Skip to main content

Section

The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.

Sections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use divider.

Section heading levels and visual styling (borders, backgrounds) are determined automatically by nesting depth and can't be overridden. Only buttons and links are supported in the primary-action and secondary-actions slots.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the section component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label used to describe the section that will be announced by assistive technologies.

When no heading property is provided or included as a child of the section, you must provide an accessibilityLabel to describe the section. This is important as it allows assistive technologies to provide the right context to users.

Anchor to heading
heading
string

A title displayed at the top of the section. When provided, it serves as both a visible heading and the accessible name for the section. If omitted, you must provide an accessibilityLabel instead.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Group content under a headingGroup content under a heading

Wrap related content in a headed section. This example places a paragraph inside s-section with a heading attribute so the group gets a visible title and semantic structure.

Group content under a heading

A rendered example of the section component

html

<s-section accessibilityLabel="Loyalty rewards details" heading="Rewards">
<s-paragraph>
Earn 10 points for every $1 spent. Redeem 100 points for $10 off your next
purchase.
</s-paragraph>
</s-section>

Anchor to Create an accessible landmark without a visible headingCreate an accessible landmark without a visible heading

Define an accessible region without a visible heading. This example uses accessibilityLabel on s-section so screen readers can identify the content group.

html

<s-section accessibilityLabel="Loyalty program summary">
<s-paragraph>
Earn 10 points for every $1 spent. Redeem 100 points for $10 off your next
purchase.
</s-paragraph>
</s-section>

Anchor to Nest sections to create a content hierarchyNest sections to create a content hierarchy

Build a multi-level content hierarchy with nested sections. This example nests s-section elements so headings automatically adjust their level based on depth.

html

<s-section heading="Order details">
<s-section heading="Items">
<s-text>3 items in your cart</s-text>
</s-section>
<s-section heading="Shipping">
<s-text>Standard delivery: 5-7 business days</s-text>
</s-section>
</s-section>

Anchor to Best practicesBest practices

  • Describe each section with a clear heading: Use concise, sentence-case headings that reflect the section's purpose so buyers can scan the page quickly.
  • Provide an accessible name when no heading exists: If a visual heading isn't appropriate, set accessibilityLabel so assistive technologies can identify the section.
  • Prefer divider for decoration: Use s-divider when you only need a visual line between content groups.
  • Keep layout consistent: Maintain consistent spacing and structure between sections across the page for a coherent experience.
Was this page helpful?