Homepage Elements | Guide to Web Standards | Kent State University

Homepage Elements

Full Homepage Element Library

The terminology and elements do align with and are also illustrated in the full color template mockups.

VIEW THE Full Color Template Mockups

Hero Image

Single media image uploaded - a slideshow is not created. Short Title and/or Subtitle headlines overlay optional (samples shown without headlines).

Hero Image

Multiple media images uploaded - a slideshow is automatically created. Short Title and/or Subtitle headlines overlay optional (samples shown without headlines).

Sliding Hero Image 2

Hero Slider (linked Titles)

Text links to either either a basic page, event or news article.  The page's Short Title and Subtitle fields(s) are displayed in the lower left corner of the first image.

Sliding Hero Image 1

Call To Action List

Screenshot of CTA example

Facts and Figures Images

Graphics are used throughout Kent State websites to call out points of pride and facts about the university or specific university programs. Graphics can be hyperlinked to areas of the website with more information about that fact.

View, download or request a custom information graphic.

  • Can have intro text in this to the left and two factoids to the right, similar to the Regionals. (Re: Max 3)
  • Minimum: 2
  • Maximum: 5 
    • Maximum: 3 - if text is present in the same section to the left.

White Factoids

White Background Factoids

  • Placement: Anywhere
    • Preferred Placement at the top of the page
    • Preferred Placement above the blue footer
  • Additional View: Can have intro text in this to the left and two factoids to the right, similar to the Regionals. (Re: Max 3)

Blue Factoids

Blue Background Factoids

  • Minimum: 2
  • Maximum: 5 or 3 - if text is present in the same section to the left
  • Required Placement: Mid-page placement
  • DO NOT USE: above the blue footer or directly under call-to-action links

Teaser: V1

  • Minimum: 1
  • Maximum: 3

Teaser 1.0


Traditional Teaser

    • With hero image option selected
      • Minimum: 3
      • Maximum: 6

    See a live preview of the Traditional Teaser.

    Traditional Teaser

    Traditional Teaser with no Hero Image

    • Without hero image option selected
      • Minimum: 2
      • Maximum: 5
      • Do not use with the same number of call-to-action boxes.

    See a live preview of the Traditional Teaser with no Hero Image

    Traditional Teaser with no hero image

    Teaser Ribbon

    • Minimum: 3
    • Maximum: 5

    See a live preview of the Ribbon Teaser.

    Ribbon Teaser

    Teaser Blue Banner

    • Minimum: 2
    • Maximum: 4

    See a live preview of the Blue Banner.

    Blue Banner Teaser

    Teaser Flip

    • Minimum: 2
    • Maximum: 6
    • Wraps at 2

    See a live preview of the Flip Teaser.

    Flip Teaser


    Multi-Column Grid

    • No minimums or maximums

    Tri-Fold


    Wedge

    A full width accordion has been placed under the wedge in the screenshot below.

    • Up to three buttons can be added
    Wedge with large drop down accordion screenshot

     

    Accordion

    • Change the style of the accordion to be blue and full width (previous screenshot) by selecting the Full Width checkbox.

    Highlighted Text Blurb

    Screenshot of highlighted text blub

    Tabbed Nodes | Mixed tab content

    • Tabbed nodes will display content in a tabbed view using node ID references.
    • Mixed Tab Content will dispaly the content based on your selection for each tab type:
      • BlankNode Reference - Node ID reference
      • Blank WYSIWYG - a body field that you add content directly to
      • Dynamic Promoted Content - options include promoted news, promoted event or promoted blog

    Tabbed content

    Slideshow  (View: Node Content Slideshow)

    Homepage News Slider

    50/50 Promoted Content

    50/50 Featured Content Block - must choose two of the following: news, blog and events.

    100 Promoted Content

    Full-Width Feed

    Horizontal Teaser

    Maximum one per page.

    Featured Event

    Social Block

    Social media block

    Image Grid

    Image call-out section (mixed use)

    Contact Us Block

    Contact Us block