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 display 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

Image Grid

Image call-out section (mixed use)

Contact Us Block

Contact Us block