Component Header Intent and Usage
Component headers are helpful for establishing breaks in pages, grouping content together, and providing contextual information to the user about what is in a given section. They are recommended to preface sections of content such as cards to help the user understand why they were being presented with the content.
Component Header Design Guidelines
- Headers use a unique accent font which is easily read in short blurbs / statements; it presents in all caps.
- Headers also utilize an accent line which creates a visual separation between the content above and below the header, and which gives the header more weight.
- On small devices or where added to small columns on the page, the line automatically is hidden as the text is sufficient for creating this separation.
Component Header Content Guidelines
- Column header text should be short, succinct, and relevant to the user. Aim for no more than 5-8 words.
- Examples: "MORE ABOUT BUTTERFLIES AND MOTHS", "FEATURED TOPICS", "IN THIS SECTION", "WHAT TO LOOK FOR RIGHT NOW", "DISCOVER MISSOURI'S CONSERVATION AREAS"
Component Header Examples
Display Styles
The default display should be your first choice when adding a component header. The other displays may be used occasionally at the page designer's discretion for aesthetic or emphasis reasons. Be consistent — use only one component header type per page and across pages within a section. (For exceptions, see examples below.)
Sizes
Component Headers can span the full page or just a section.
Component Headers on the MDC Website
These pages use the default component header for the full-width headings, with display 4 as a half-page heading in a block that functions like a promo or call-to-action.