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.
heading that wraps because the browser width is narrow heading that wraps because the browser width is narrow heading that wraps because 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.
Accordion with Badge
heading that wraps because the browser width is narrow heading that wraps because 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.
Accordion with Icon and sub-heading
Heading
This is a sub heading
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