Section
The section component groups related content into clearly-defined thematic areas. Use it to organize content and provide clear navigation landmarks.
The component manages heading levels automatically, ensuring nested sections maintain proper semantic structure. Only one secondary action button is supported for each section.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Anchor to PropertiesProperties
Configure the following properties on the Section component.
- Anchor to headingheadingheadingstringstring
A title that describes the content of the section. If omitted and no secondary actions are provided, the section will be rendered without a header.
- Anchor to idididstringstring
A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
Anchor to SlotsSlots
The section component supports slots for additional content placement within the section. Learn more about using slots.
- Anchor to secondary-actionssecondary-actionssecondary-actionsHTMLElementHTMLElement
A button element to display in the section heading. Only a single button is supported. Use the
slot="secondary-actions"attribute to place action elements that relate to the entire section's content.
Anchor to ExamplesExamples
Group related content using a section component. This example shows a basic section with a heading and content area.
Group related content into sections
Group related content into sections
Anchor to Best practicesBest practices
- Write descriptive headings: Provide clear heading text that represents the section's content.
- Let heading levels adjust automatically: Nested sections automatically adjust heading levels for proper semantic structure.
- Place relevant secondary actions: Use the secondary-actions slot for actions that apply to the entire section, like "Edit Settings" or "Add Item."