---
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: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/structure/section
  md: https://shopify.dev/docs/api/checkout-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.

### Examples

* #### Code

  ##### Default

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-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.