Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to sidebar Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Content
  2. Hero

Hero 

The hero is a large promotional section that brings the user's attention to priority content. It provides a content area that allows for full-width background image, plus a title, short blurb and links to other key journey-related content. 

Examples

Large hero image with caption [View Image]

The compass [View Image]

Background image

This is an example of a hero with an image and caption. By default, the hero will appear in the main content area.

A dog and student hanging out at VCU's compass [View Image]

No background image

This is an example of a hero with no background image included. By default, the hero will appear in the main content area with a black background.

Code reference

When to use

Heroes are typically used at the very top of a page to provide visual representation and introductory messaging, but they may be placed in other areas of your page as well. 

On a large screen, the short blurb will show up directly on top of the image in either the bottom left, bottom center or bottom right corners. On a small mobile screen, the short blurb will show up underneath the entire image.

How to use

Tips

Requirements

A name for your hero is the only required element. However, you must enter some text to avoid a blank caption wrapper appearing on your page. 

Images are not required. If you do not upload an image, the caption will appear against a black background. 

Accessibility considerations

Make sure to check that all content entered into this component meets web accessibility standards.

Quick links

A class full of students take notes during a lecture [View Image]

Sidebar hero

This is an example of a sidebar hero. Add the word "Sidebar" to the hero component name to have it appear in the right column.

[View Image] Students walk down a pathway to class [View Image]

Footer hero

This is an example of a footer hero. Add the word "Footer" to the hero component name to have it appear in the footer. 

View graphic versionView graphic versionView graphic version