Overview
The hero component is a page section that holds a central position on a page, found at the top of the screen under the header. It serves to introduce the purpose of the page by providing helpful content such as a title, additional copy, an image, and a CTA.
Formatting
Anatomy
- Teaser: Section of content that can include multiple pieces of text including a pretitle, title and body copy
- Call to Action: Optional CTA with several options of actions a user can take.
- Image (optional)
Variations
The hero can be configured many different ways to suit the needs of the page. The hero accommodates desktop and mobile breakpoints, including tablet and phone.
Image Justification:
On desktop, the image can appear on the left or on the right. On mobile breakpoints, the image is always on top.
CTA Options:
The following CTAs can be used in the hero component:
- None
- Button
- Button Group
- Link
Behavior
Desktop Breakpoints (Large, Medium)
The hero component spans 5 columns of the 12 column grid.
Mobile Breakpoints (Small, X-Small)
The hero component spans 6 columns of the grid for the Small breakpoint and 4 columns of the grid for the X-Small breakpoint.
