---
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/checkout-ui-extensions/2026-04/web-components/layout-and-structure/divider).
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/section
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/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/checkout-ui-extensions/2026-04/web-components/layout-and-structure/divider).

### Support Targets (29)

### Supported targets

* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## Properties

* **accessibilityLabel**

  **string**

  A label announced by assistive technologies that describes the purpose of the section. When no `heading` property is provided, you **must** set `accessibilityLabel` so screen readers can identify the section.

* **heading**

  **string**

  The heading text displayed at the top of the section to summarize its content.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/section-default-BliTcwxw.png)

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

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