Moleküller

Accordion

İçeriği başlığının altında açılıp kapanan bir kart; SSS, ayar grupları ve uzun ayrıntılar için.

TasarımcıGeliştirici

Playground

Siparişler 2 iş günü içinde kargolanır. 500 TL üzeri kargo ücretsizdir.

Alt başlık Bodycopy Başlık slotu

Figma varyantı

State=Expand
Subtitle=True
Bodycopy=False
Header Slot=False

Durumlar

Kapalıyken başlık card style 1 gölgesiyle görünür; açıkken içerik görünür ve kart card hover gölgesine yükselir. Yuvarlak tertiary düğme açıkken basılıdır.

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`

Figma notları

Kartın dolgusu yok; kod, gölgenin bir yüzeyi olsun diye surface/level-1 kullanır.
Köşe ham 12px; kod --radius-form-element kullanır.
Başlık ve metinlerin rengi yok; kod high ve medium emphasis kullanır.
Subtitle ve Bodycopy eski “Paragraph Small/Regular” stilini kullanıyor; kod ui/text small/regular kullanır.
Başlık 48px; Header Slot’tan önce ham 129px boşluk var; kod slotu sona iter.
Kodda yalnızca yuvarlak buton değil, başlığın tamamı açıp kapatır.

Figma’dan koda

Figma	React
State = Expand / Collapse	`open / defaultOpen`
Subtitle / Bodycopy	`subtitle / bodycopy`
Header Slot + Slot Content (H)	`header={…}`
Body Slot	`children`