---
title: Section
description: >-
  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](/docs/api/customer-account-ui-extensions/2026-01/web-components/layout-and-structure/divider).
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/layout-and-structure/section
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/layout-and-structure/section.md
---

# 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](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/layout-and-structure/divider).

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## 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/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/web-components/actions/button) elements.

Examples

## Preview

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

### 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>
  ```

## 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.