Anatomy
- Label: An optional label to provide leading context to the section intro.
- Heading: The title of the section.
- Description: An optional description of the section.
- Link: An optional link to expand on the content introduced.
Usage
Use the section intro to introduce a new section element in the page. The section intro uses the full-width of the screen and can be used in conjunction with other components that expand the content introduced. For example, the card or the pillar components.
We recommmend using the section intro as a header of an HTML <section> element. Sections divide the content of the page into thematic groups and represent standalone elements that are typically related to a specific topic or subject within the document.
Sections are designed to be self-contained, meaning they should make sense and be meaningful even when viewed independently from the rest of the page. They provide a way to divide the content into meaningful and structured blocks.
Ensure the description is concise, keeping it to one paragraph. Use a link to direct users to a page with further details if needed.
Use section intros to introduce a new topic in a section and combine it with other components and content.
Options
Align
Section intro can be aligned to the start or center of the page. By default, the section intro is aligned to the start of the page to allow for an image or a visual asset to be positioned on the left. Use the center alignment if the asset is centered, not present, or the scenario calls for it.
Don’t use center alignment if the section intro is paired with an image or visual asset aligned to the left.
Emphasized text
Section intro allows for only one portion of the heading to be highlighted. Use strategically to highlight key ideas and guide effectively through a story.