Section Header

Search SG - Section Header in 53

The Section Header is used to introduce new content sections on a page with a unique title and optional desctiption. This helps to visually separate your content, making it easier to digest for the viewer.

Background options:
  • White
  • Light

An Example Section Header

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Feature Checklist
  • Multiple variations
  • CTA(s) included
  • Image capabilities
  • Video capabilities
  • Smart
  • Modal friendly
  • Uses HubDB
  • Requires additional help
Use Cases

The Section Header can be used over and over again on a page — and that's ok! It will help you to group related modules and keep your content organized.

This module also allows you to enter a unique ID. The purpose of this field is so that you can use this reference in an anchor link somewhere else on your page (e.g. in a Fixed Secondary Navigation, or in a CTA further up in the page). When the user clicks on the link, they will auto-magically be pulled down the page to your Section Header. Nifty, eh?

Guidelines
  • Character count
    • Limit main header to 40 characters
    • Limit descriptions to around 125 characters each
  • Things to know
    • Optional: all three description fields, ID, divider
    • You can specify the header element type of H2 (default) or H3 — this adjusts the sizing, illustrating importance
    • ID should be unique (not used anywhere else), and should not include spaces or other special characters. E.g. my-page-id
    • Divider field should be used sparingly (if you have many Section Headers on your page) — but adds a nice pop of color