Accordion
What does the header class style?
The clickable row with the question and the chevron.
And the content class?
The answer panel that opens under it.
.accordion-header-default · .accordion-content-default
Compact Accordion
When is the compact accordion used?
In long lists, such as the questions in the docs.
What is different from the default?
Less padding, with a smaller question, answer and chevron.
.accordion-header-compact · .accordion-content-compact
Divider Accordion
Where is the divider applied?
The divider belongs to the whole accordion item, so it stays below the answer when the item is open.
Which classes should I use?
Use accordion-item-divider on each item, accordion-header-default on the clickable row and accordion-content-default on the answer. Set the accordion gap to gap-none.
.accordion-item-divider · .accordion-header-default · .accordion-content-default
Replace details-default with accordion-item-divider on each item and remove item backgrounds. Use gap-none on the accordion and set its top border to 1px with color-border-light.
Compact Divider Accordion
Can the divider accordion be compact?
Yes. Keep accordion-item-divider on each item and use accordion-header-compact and accordion-content-compact for smaller spacing.
Which color does the divider use?
The divider uses your design system’s border color.
.accordion-item-divider · .accordion-header-compact · .accordion-content-compact
Replace details-default with accordion-item-divider on each item and remove item backgrounds. Use gap-none on the accordion and set its top border to 1px with color-border-light.