---
title: Section
description: Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.
api_version: 2025-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/structure/section
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/structure/section.md
---

# Section

Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.

## Properties

* 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 children 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.

* heading

  string

  A title that describes the content of the section.

* id

  string

  A unique identifier for the element.

## Slots

* primary-action

  HTMLElement

  The primary action for the section. Accepts a single [Button](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.

* secondary-actions

  HTMLElement

  The secondary actions for the section. Accepts multiple [Button](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.

### Examples

* #### Code

  ##### Default

  ```jsx
  <s-section heading="Rewards">
    <s-button slot="primary-action" variant="primary">
      Redeem
    </s-button>
    <s-button slot="secondary-actions" variant="secondary">
      My rewards
    </s-button>
    <s-paragraph>
      Earn 10 points for every $1 spent. Redeem 100 points for $10 off your
      next purchase.
    </s-paragraph>
  </s-section>
  ```

## Preview

![An example of the Section component shows a header, some text, a primary action, and a secondary action.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/section-default.png)

## Useful for

* Organizing your page in a logical structure based on nesting levels.
* Creating consistency across pages.

## Considerations

* When adding headings inside sections they automatically use a specific style, which helps keep the content organized and clear.

## Best practices

Use these best practices to deliver a clear and accessible experience in your extensions.

### Describe each section with a clear heading

Use concise, sentence‑case headings that reflect the section’s purpose.

### Provide an accessible name when no heading exists

If a visual heading isn’t present, set an 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 what’s in the section.

### Limit and prioritize actions

Keep the number of actions small to reduce noise and emphasize what matters most.

### Keep layout and styling consistent

Maintain consistent spacing, typography, and alignment between sections for a coherent experience.