ComponentsAccordion
Accordion
atomStacked disclosure panels — one section open at a time or many.
Accordion
Stacked disclosure panels; first open by default.
What is a design token?
A named value (color, space, radius) the whole kit reads from — change it once, everything follows.
Can I theme it?
Yes. Every component reads tokens, so a new palette or shape recalculates the entire UI.
Is it framework-neutral?
Tokens are plain CSS custom properties — drop them into React, Vue, Svelte or vanilla HTML.
Recipe CSS
This is the exact CSS your kit ships for Accordion — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.
/* === Accordion === */
.accordion details + details { border-top: var(--k-divider); }
.accordion summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--k-s-10) 0;
cursor: pointer;
font-size: var(--k-type-small);
font-weight: var(--k-weight-medium);
}
.accordion summary::-webkit-details-marker { display: none; }
/* Chevron — rotates 180° when open. Uses inline SVG so it inherits color. */
.accordion__chevron {
width: 14px;
height: 14px;
color: var(--k-fg-faint);
transition: transform var(--k-dur, 200ms) var(--k-ease, ease);
flex: none;
}
.accordion details[open] .accordion__chevron { transform: rotate(180deg); }
.accordion p { font-size: var(--k-type-small); color: var(--k-fg-muted); padding-bottom: var(--k-s-10); }