SECTION HEADER
A section header divides sections of a screen.
RESPONSIVE LAYOUT
These are the examples of the section header component across different screen sizes.
Mobile - 360px
Desktop - 1920px
WHEN TO USE
Use a section header
To divide content with different purposes into distinct sections within a screen
To introduce and separate a list of items from the rest of the content
When there’s a single action related to the section, such as a “See more” button for extending a limited list
Don’t use a section header
When linking to other pages or external resources (use a link instead)
CONTENT
Text
Text should:
—
be no more than 3 words
—
Use a noun that describes the section’s content, like “Insights”
—
Avoid starting with a verb or making it an instruction (e.g., “Select” or “Choose”)
AVAILABILITY