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.
register-details. action. render - pos.
register-details. 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.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Use cases
- Content grouping: Organize forms or interfaces into logical groups with clear headings.
- Navigation support: Group related settings or information into distinct scannable areas.
- Contextual actions: Provide actions through the secondary actions slot, like edit or configure buttons.
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
Examples
Group related content into sections
Description
Group related content using a `Section` component. This example shows a basic section with a heading and content area.
Default
<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>
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 secondaryActions are provided, the section will be rendered without a header.
- Anchor to idididstringstring
A unique identifier for the element.
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
Button element to display in the section heading. A single button is supported.
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."