Standard Hero Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur eros nec risus eleifend, sed porta nisi rutrum. Aenean posuere luctus quam, sit amet bibendum mi consectetur ac.

Overview

A Standard Hero component is a banner element that displays information at the top of secondary page types. 

Elements 

  • Heading: Describes the topic of the Hero.
  • Text: Provides descriptive details about the topic. Titles using two colors should place blue text before orange. Single-color titles should remain the default color.
  • Content background color:  Options include "Dark or Light" for blue or white.
  • Hero image (optional): Option for no image or an image positioned on the left, right or bottom.
  • Call to action link (optional): Links to more details about the topic.

How do you use it? 

  • The Standard Hero is for secondary pages.
  • Use short, concise and active language in the Hero text.
  • Use call-to-action links when appropriate to provide a path to more details. This should be used for specific circumstances and not all of the time. 

Examples

Dark Heading

This is a Standard Hero without an image in the "dark" theme. 

Light Heading

This is a Standard Hero without an image in the "light" theme. 

Hero Heading One

This is a Standard Hero with an optional Call to Action (CTA). 

Call to action one

Hero Heading Two

This is a Standard Hero with an image on the right side. 

Nighttime scenes of Campus

Hero Heading Three

This is a Standard Hero with an image on the left side. 

Nighttime scenes of Campus

Hero Heading Four

This is a Standard Hero with an image on the bottom. 

Nighttime scenes of Campus