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