Accordion
A vertically stacked set of interactive headings, each revealing a section of content. Three published components, twelve variants, every state drawn.
Yes. It ships with sensible defaults for spacing, type and motion, and every value resolves through a token so it matches the rest of your interface without being restyled.
Every colour, radius and space is bound to a semantic token rather than a raw value, so the same component follows your theme the moment you swap the token set.
The chevron rotates and the panel opens. In Penpot the two ends of that are drawn as Active Off and Active On, because a static file cannot hold the motion between them.
You can, and the kit does not stop you, but a second level is usually a sign the content wants a page of its own rather than another fold.
The four states of an item
Focus is an outer ring at reduced opacity rather than a colour change, the same as every other control in the kit. Above they respond to your pointer; here they are the four variants as the file holds them.
Three components, twelve variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Accordion
When a page carries more than a reader needs at once and the parts are genuinely independent - an FAQ, a settings group, a long specification. If the sections have to be read in order, use headings and let the page scroll instead.
Basic when the accordion sits inside a card or a panel that already has an edge. Border when it stands on its own on the page and each item needs its own container to read as separate.
Two axes: Active is whether the item is open, State covers default, hover, focus and disabled. Two times four is eight, and every one of them is drawn because a design file has no pseudo-classes to fall back on.
One to one. Variant=Border becomes the bordered item class set, Active=On is the open state, and the padding and radius come from the same tokens the code reads.