Anatomy
- Title: The title of the section
- Navigation link (optional): A chevron to indicate the header is clickable to navigate deeper into the section (“Section” variant only)
- Label (optional): A label for the navigation action. (“Section” variant only)
- Divider (optional): A divider (“Group” variant only)
Usage Guidelines
When to use this component
- To organize content with different purposes into distinct sections within a screen
- To introduce a list of items or organize lists into groups
- To show a limited preview of items with a link to “See more”
Example: Split page content into sections
Use section headers to split the content of long pages into sections.
Example: Highlight a limited set of items with an option to “See more”
Use section headers to show a limited preview of content, with a link to see more.
When not to use this component
- For hero sections
- When communicating the action that a user needs to perform
Example: Do not use section headers for hero sections.
Section headers divide the content of a page into multiple sections and describe the content of the section. The hero section is implicitly divided because it does not have a section before it, and it’s content should be clear for the page context.
Don't use section headers in hero sections.
Leave out section headers in hero sections.
Example: Do not use section headers to communicate actions
Section headers must describe the content of the section and should not be used to promote user actions.
Don't use section headers to promote actions.
Use other components such as page headers to text elements to communicate actions.
Best Practices
Use the "Section" variant to create hierarchy and make pages of content easier to scan.
Use the "Section" variant to group items of lists.
Use the "Group" variant to group items of lists.
Use the "Group" variant for grouping content other than lists.
Use a noun to describe the content of the section
Start the section header with a verb
Offer a navigation link to more of the same content.
Do not use the navigation link to link navigate to content unrelated to the section.
General Component Behaviors
The entire section header is pressable when using the optional navigation link.
Variants
Section
Used to create structure to a page by separating the content into sections and grouping information together.
Group
Used to groups lists of items.
Content Guidelines
- The title of the header should be no more than 3 words, with exception to prepositions (like “in”, “on”, “near”, etc.) or definite articles (like “the“, “a”, “your”, etc.)
- Use a noun that describes the content within the section, such as “Account details” or “Privacy”
- Do not start with a verb, like “Select a profile”. Use normal text in this case.
For further information, see the Content Styleguide.
Known Gaps
- The list section does not have a description. An optional description may be added in the future depending on needs.