Molecules
Accordion
A card whose content opens and closes under its title, for FAQs, settings groups and long details.
Playground
Orders ship within 2 working days. Shipping is free over 500 TL.
Send items back unused, in their box, within 14 days of delivery.
We take all major cards and bank transfers.
Figma variant
State=Expand
Subtitle=True
Bodycopy=False
Header Slot=FalseStates
Collapsed shows the header with the card style 1 shadow; expanded shows the content and raises the card to the card hover shadow. The round tertiary toggle is pressed while open.
| Part | Token |
|---|---|
| Card | --color-surface-level-1, --radius-form-element |
| Shadow (collapsed / expanded) | --shadow-card-style-1 / --shadow-card-hover |
| Header padding / gap | --space-tiny --space-medium / --space-form-gutter |
| Toggle | Button tertiary small icon (pressed when open) |
| Title / texts | --text-ui-text-lead-bold / --text-ui-text-small-regular |
Notes from Figma
- The card has no fill; code uses surface/level-1 so the shadow has a surface.
- The radius is a raw 12px; code uses --radius-form-element.
- The title and texts have no color; code uses high and medium emphasis.
- Subtitle and Bodycopy use the legacy “Paragraph Small/Regular” style; code uses ui/text small/regular.
- The header is 48px with a raw 129px gap before the Header Slot; code pushes the slot to the end.
- The whole header is the toggle in code, not only the round button.
Figma to code
| Figma | React |
|---|---|
| State = Expand / Collapse | open / defaultOpen |
| Subtitle / Bodycopy | subtitle / bodycopy |
| Header Slot + Slot Content (H) | header={…} |
| Body Slot | children |