Accordion

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.

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

  1. Tittel (Valgfritt)
  2. Åpne- og lukke-ikon
  3. Overskrift
  4. Innhold