Choose a version:

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 are supported in the primary-action and secondary-actions slots.

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the section component.

Anchor to accessibilityLabel accessibilityLabel string: A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.
Anchor to heading heading string: A title that describes the content of the section.
Anchor to id id string: A unique identifier for the element. Use this to target the element with CSS, JavaScript, or accessibility attributes. The id must be unique within the document.

Anchor to SlotsSlots

The section component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to primary-action primary-action HTMLElement: The main call-to-action for the section. Accepts a single button component.
Anchor to secondary-actions secondary-actions HTMLElement: Additional actions for the section. Accepts one or more button components.

Anchor to ExamplesExamples

Anchor to Group related content with a headingGroup related content with a heading

Use a section to wrap related content under a descriptive heading. This example shows a rewards section with descriptive text and action buttons.

Group related content with a heading

A card-like section with a Rewards heading, descriptive text, and action buttons.

html

<s-section heading="Rewards">

<s-stack direction="block" gap="base">

<s-text>Earn 10 points for every $1 spent. Redeem 100 points for $10 off your next purchase</s-text>

<s-stack direction="inline" gap="base">

<s-button variant="primary">Redeem</s-button>

<s-button variant="secondary">My rewards</s-button>

</s-stack>

</s-section>

Anchor to Add section-level actionsAdd section-level actions

Place buttons in the primary-action and secondary-actions slots to add contextual actions to a section. This example shows a rewards section with "Redeem" and "View history" buttons.

html

<s-section heading="Loyalty rewards">

<s-button slot="primary-action">Redeem</s-button>

<s-button slot="secondary-actions">View history</s-button>

<s-stack direction="block" gap="small-200">

<s-text>You have 1,250 points available.</s-text>

<s-text>Earn 10 points for every $1 spent.</s-text>

</s-stack>

</s-section>

Anchor to Nest sections for content hierarchyNest sections for content hierarchy

Nest sections to create visual and semantic hierarchy. Heading levels adjust automatically based on nesting depth. This example groups shipping and payment details inside an outer order details section.

html

<s-section heading="Order details">

<s-text>Order #1042 — Placed March 15, 2026</s-text>

<s-section heading="Shipping address">

<s-stack direction="block" gap="small-200">

<s-text>Jane Smith</s-text>

<s-text>123 Main St</s-text>

<s-text>Toronto, ON M5V 2H1</s-text>

</s-stack>

</s-section>

<s-section heading="Payment">

<s-text>Visa ending in 4242</s-text>

</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 customers 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.
Align actions to the section's content: Only include primary and secondary actions that relate directly to the content in that section.
Limit and prioritize actions: Keep the number of actions small to reduce noise and emphasize what matters most.
Keep layout consistent: Maintain consistent spacing and structure between sections across the page for a coherent experience.

Was this page helpful?