Status | |
---|---|
Figma | ✅Publisert |
CSS | ✅Publisert |
Vue | ✅Publisert |
React | ✅Publisert |
Dokumentasjon | ✅Publisert |
Om komponenten
Accordion (trekkspilliste) brukes til å sortere og presentere relatert innhold. Den lar brukerne ekspandere og kollapse innhold ved å klikke på hver rad. Accordion egner seg å bruke når det er behov for å presentere tilleggsinformasjon på en strukturert måte, som for eksempel i en FAQ.
Punkts ofte stilte spørsmål ✨
Kan jeg digge Punkt like mye som jeg gjør nå?
Hvordan kan jeg kontakte Punkt?
Hva er MøtePunkt?
Punkts ofte stilte spørsmål 💙
Kan jeg digge Punkt like mye som jeg gjør nå?
Hvordan kan jeg kontakte Punkt?
Hva er MøtePunkt?
Varianter
Punkt støtter både bruken av collapsible section og accordion. Forskjellen mellom de to er at en accordion kun tillater én åpnet seksjon om gangen, og vil lukke andre åpne seksjoner når en ny åpnes. I utgangspunktet fungerer komponenten som en collapsible section. Hvis du vil ha en accordion så må du styre det lokalt hos deg (eksempel).
Komponenten kommer i to ulike størrelser: Default og Compact.
Farger
De ulike fargene som brukes er:
- Blå bakgrunn: $blue-100 (#F1FDFF)
- Beige bakgrunn: $beige-light (#F8F0DD)
- Grå outline: $gray-100 (#E6E6E6)
- Blå outline på clear accordion når den er åpen: $warm-blue-1000 (#1F42AA)
Alle bruker blue-dark (#2A2859) som tekstfarge.
Slik bruker du komponenten
Accordion brukes som nevnt når du ønsker å presentere relatert innhold på en strukturert måte. Innholdet i en accordion burde derfor høre sammen slik at det blir lettere for brukeren å finne frem til informasjonen de leter etter.
Ved bruk av accordion er det viktig at man er bevisst på at innhold som går inn i komponenten ofte blir oversett. Det er derfor viktig at teksten på hver rad er tydelig og beskrivende for brukeren. For at teksten på hver rad oppleves god og beskrivende burde også lengden på innholdet ikke være lengre enn ett til to avsnitt.
Gjør slik/ikke gjør slik
Unngå å bruke kun ett item
Unngå lange overskrifter med flere temaer
Anatomi
- Tittel (Valgfritt)
- Ã…pne- og lukke-ikon
- Overskrift
- Innhold