The basic Subhead consists of a
.Subhead container, which has a light gray bottom border. Use
.Subhead-heading for the heading itself. It’s an
<h2> sized heading with normal font-weight.
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
To add a top margin to the Subhead, use
.Subhead--spacious. This is useful for separating sections on a settings page.
You can add a one line description to the subhead with
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
You can add a button or something to the right of
.Subhead-heading with the
Use all the elements together to create a Subhead with actions and a description.
.Subhead-heading--danger modifier to make the text bold and red. This is useful for warning users.