---
title: Section
description: Groups related content into clearly-defined thematic areas. Sections have contextual heading levels to maintain a meaningful and accessible page structure.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/section
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/section.md
---

# Section

Groups related content into clearly-defined thematic areas. Sections have contextual heading levels to maintain a meaningful and accessible page structure.

## Properties

* heading

  string

  A title that describes the content of the section.

  If omitted, and no secondaryActions are provided, the section will be rendered without a header.

* id

  string

  A unique identifier for the element.

## Slots

* secondary-actions

  HTMLElement

  Button element to display in the section heading. A single button is supported.

### Examples

* #### Code

  ##### Default

  ```html
  <s-section heading="Select product category">
    <s-button slot="secondary-actions">Edit</s-button>
    <s-choice-list>
      <s-choice value="snowboards">Snowboards</s-choice>
      <s-choice value="jackets">Jackets</s-choice>
      <s-choice value="label">Label</s-choice>
    </s-choice-list>
  </s-section>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/section-default.png)