Base Hero

[slowbot]

Prominent overview component usually placed at the top of a page featuring title and lead with an optional image.

When to use the hero component

• When you have a primary message you want to communicate in a concise way with a single and/or secondary action.
• When you want to establish the mood with a distinctive hero or background image.

When to consider something else

• When you have a larger lengths of content. Consider using a text section
• When you have set of links or complex navigation. Consider using a side or local navigation

Usability guidance

• Make titles brief and concise. Avoid run on titles with too many words
• Select images with a single dominant focal point. Avoid busy hero or background images.

Accessibility

• Ensure you have sufficient color contrast with background colors and images.

Implementation

Field	Value	Name
Title	title of the page or section - required
Lead	brief subtitle or lead in description for the page or section
Summary Body	summary content for the page or section
Action	primary action a user can take
Image	a descriptive or decorative image
Brow	category label or tag usually auto generated
Tag	Assigns a H1 - H3 value to the title field
Secondary Body	secondary content for the page or section

Variants	Values	Name
Layout	Center, 2 (default) or 3
Background	light (default), or dark. Effects: text color, background color, action color
Image position	right (default), or background

Nested Components

• Breadcrumb
• Back

Theme

Element	Effects	Global/Component
$theme-font-role-heading	Title	Global
$theme-display-font-size	Title	Global
$theme-lead-font-family	Lead	Global
$theme-jcc-display-font-weight	Title	Global/Custom
$theme-jcc-hero-background	Background color	Component/Custom
$theme-jcc-dark-background-color	Background color	Global/Custom
$theme-jcc-dark-background-link	Link color	Global/Custom

Questions:

• Should we merge 1 column with center align options?
• Should this only be for h1 page titles or can this be reused for other page content?
• Should this be the default h1 component or should this only be used for prominent page headers?
• How do we specify mobile position for background images? Do we hide images on mobile?

Figma

https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=10%3A13
https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=122%3A106