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.

Punkts ofte stilte spørsmål ✨

Kan jeg digge Punkt like mye som jeg gjør nå?
Selvfølgelig! Vi digger støtten din!
Hvordan kan jeg kontakte Punkt?
Vi er tilgjengelige via Slack-kanalen, #origo-punkt. Ellers er vi veldig åpne for PRer, tilbakemeldinger og innspill!
Hva er MøtePunkt?
MøtePunkt er et brukerforum for Punkt-brukere.

Punkts ofte stilte spørsmål 💙

Kan jeg digge Punkt like mye som jeg gjør nå?
Selvfølgelig! Vi digger støtten din!
Hvordan kan jeg kontakte Punkt?
Vi er tilgjengelige via Slack-kanalen, #origo-punkt. Ellers er vi veldig åpne for PRer, tilbakemeldinger og innspill!
Hva er MøtePunkt?
MøtePunkt er et brukerforum for Punkt-brukere.

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