Hero Modules

The hero module is the area between the University header and the main content body section.

The purpose of the hero module is to help visitors understand the topic of the page and encourage them to read the rest of the page’s content. This module also displays the title of the page. Unlike other modules, a page can only have one hero.

There are three main styles of hero modules:

Landing Page

The Landing Page hero module is most frequently used on the home (or landing) page of a website. It is largest of the hero styles and is available in three configurations:

  • Single
  • Background
  • Grid

Unlike the other styles of hero sections, the Landing Page hero module includes a button feature that can encourage visitors to perform a desired transaction on the web page.


Landing Page – Single

The Single configuration offers a dark background texture with a single image. In addition, the following options are available:

  • Title
  • Text
  • Button
  • Image (caption optional)
  • Video overlay
Landing Page Single

Landing Page – Background

The Background configuration offers a background image or video instead of a dark texture. In addition, the following options are available:

  • Title
  • Text
  • Button
Landing Page Background

Landing Page – Grid

The Grid configuration offers a dark background texture with up to three images. Each image can feature a caption or video button that overlays the screen when clicked. In addition, the following options are available:

  • Title
  • Text
  • Button
Landing Page Grid

 

Tier 2

Tier 2 hero module are most often found on major (second tier) pages of a website. This type of hero is slightly smaller than the Landing Page hero and comes in one configuration. Like the Landing Page hero, Tier 2 hero modules can feature background photos, foreground photos and videos. In addition, an info bar can be added to the Tier 2 hero section that can highlight content near the top of the web page.


Tier 2

The Tier 2 hero module requires a background image or video. In addition, a foreground image can be added. The following options are also available:

  • Title
  • Text
  • Image
  • Video overlay

Tier 2 with info bar

The Tier 2 hero module requires a background image or video. In addition, a foreground image can be added. When the Info Bar is enabled, the following options are available in addition to the standard module options:

  • Info Bar Title
  • Left column text
  • Right column text
  • Call-to-action Button

 

Interior Page

The Interior Page hero module is often used on content pages beneath the top-tier pages. It is the most commonly used hero style. Unlike other styles, this hero only offers text content. This module isĀ available in two vertical sizes: normal and slim.


Interior Page – Normal

The Interior Page hero module offers a dark background texture and uses only text content. The following options are available:

  • Title
  • Text
  • Optional diamond graphic
Interior Page - Normal

Interior Page – Slim

The Interior Page hero module offers a dark background texture and uses only text content. The following options are available:

  • Title
  • Text
  • Optional diamond graphic
Interior Page - Slim