4.67.0

Toggle direction

Accordion (contained)

Toggle the display of multiple sections of expandable content

Demo

API

Tag

Name	Description
`<s-accordion-contained>`	Custom tag, accepts two slots and a series of `s-accordion-stacked` components as content

Slots

Name	Required	Description
`title`		Title content. Use a `div` with a text utility class (e.g. `class="text-lg block"`) rather than a heading tag — heading levels must not skip in the page outline, so the right level depends on context. Can include a subtitle `span` (with class `.subtitle`).
`title-accessory`		Optional accessory content to be displayed to the right of the title.

Demo

API

Tag

Name
`<SAccordionContained>`

Slots

Name	Required	Description
`title`		Title content. Use a `div` with a text utility class (e.g. `class="text-lg block"`) rather than a heading tag — heading levels must not skip in the page outline, so the right level depends on context. Can include a subtitle `span` (with class `.subtitle`).
`title-accessory`		Optional accessory content to be displayed to the right of the title.

Skylab React links

General information about using our React package

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com