Base Header Group

[slowbot]

Title and introduction into a new section of content.

When to use the header group component

• When you are adding the title and intro text to a new content region of a page.

When to consider something else

• When you need to add a page header use the hero component.
• When you need to add a title to a smaller component such as a card simply use a header
• When you need to add a title to continuous running text use styles within a WYSIWYG editor

Usability guidance

• Keep titles short and concise.
• Develop a maximum character count for your lead text as well. We recommend around 150 characters.

Accessibility

• Use the proper header order for your header group. Most often with a section this should be an H2.

Implementation

Field	Value	Name
Brow	content for the section
Title	title of the section
Lead	brief subtitle or lead in description for the section

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

Related USWDS Components

• Prose

Theme

Element	Effects	Global/Component
$theme-font-role-heading	Title	Global
$theme-lead-font-family	Lead	Global
$theme-jcc-brow-font-case	Brow	Global/Custom

Questions:

• Should we rename this Section Header? Since the primary use case is for Section components?

Figma:

https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=241%3A0
https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=245%3A982