Section
Groups related content into clearly-defined thematic areas. Sections have contextual heading levels to maintain a meaningful and accessible page structure.
Anchor to propertiesProperties
- Anchor to headingheadingstring
A title that describes the content of the section.
If omitted, and no secondaryActions are provided, the section will be rendered without a header.
- string
A unique identifier for the element.
Was this section helpful?
Anchor to slotsSlots
- Anchor to secondary-actionssecondary-actionsHTMLElement
Button element to display in the section heading. A single button is supported.
Was this section helpful?
Code
<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>
Examples
Code
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>
Preview
