Accordion (stacked)
Toggle the display of a stacked section of expandable content
Demo
Accordion
Heading 1
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
This is a long heading that wraps when the browser width is narrow
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Heading 3
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Single accordion with icon and sub-heading
Using a single accordion
Always wrap the s-accordion-stacked component in a div with the class "accordion-container".
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Accordion with Badge
This is a long heading that wraps when the browser width is narrow
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Heading 2
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Accordion with Tag
Heading 1
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Heading 2
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Accordion with Icon
Heading 1
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Heading 2
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
API
Tag
| Name | Description |
<s-accordion-stacked>
|
Custom tag accepts three slots: one each for title text, accessories, and a sub-heading |
Slots
| Name | Required | Description |
|---|---|---|
title
|
|
h2 or h3)
|
title-accessory
|
|
|
sub-heading
|
|
Attributes
| Name | Detail | Description |
open |
attribute |
When present, expands the accordion's content area. |
Events
| Name | Detail | Description |
s-toggle |
The accordion's oldState and newState are available on e.detail |
Fired when the accordion is toggled. |
Demo
API
Tag
| Name |
<SAccordionStacked>
|
Slots
| Name | Required | Description |
|---|---|---|
title
|
|
h2 or h3)
|
title-accessory
|
|
|
sub-heading
|
|
Props
| Name | Value | Required | Description |
open |
attribute |
When present, expands the accordion's content area. |
Skylab React links
Typescript
Guidelines
All s-accordion-stacked components representing same set of data should be grouped together
inside <div class='accordion-container'>
If there are multiple groups of stack accordions on page, each set should be grouped together in div having class 'accordion-container' as shown in demo
Heading 1
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com