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.

Bilde som viser accordion i default og compact størrelse

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.

Bilde som viser de fire ulike fargenevariantene i accordion

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.