Skip to main content

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.

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

Anchor to propertiesProperties

Anchor to accessibilityLabel
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.

Anchor to heading
heading
string

A title that describes the content of the section.

Anchor to id
id
string

A unique identifier for the element.

Examples
<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

Anchor to useful-forUseful for

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

Anchor to considerationsConsiderations

  • When adding headings inside sections they automatically use a specific style, which helps keep the content organized and clear.
Was this page helpful?