Accordion

Egnet til:

• når brukerne bare har behov for en liten av del av innholdet på siden.
• når innholdet i seksjonene er uavhengig av hverandre, og det er liten sannsynlighet for at de trenger innhold fra mange seksjoner samtidig.
• skjule innhold for å redusere scrolling eller visuell støy

Uegnet til:

• sider hvor du har behov for å se mye av informasjonen i ulike seksjoner samtidig, eller om innholdet normalt leses som en sammenhengende artikkel. 
• når det er lite innhold på siden; da bør du heller vise innholdet direkte.
• når informasjonen har ulike i nivåer (unngå trekkspill inni et annet trekkspill).
• sider som bruker ofte skriver ut, for eksempel kvittering.

Komponenter som ligner:

• OpenClose

Teknisk dokumentasjon

Se Accordion i Storybook for tekniske detaljer.

Varianter

Farger

Accordion finnes kan få følgende farger: 

• hvit/Ingen (default)
• gul (ochre)
• grønn (forest)
• burgunder (burgundy)
• blå (denim)
• grå (graphite)

Fargene er ment å brukes når Accordion plasseres inni Panel eller andre fargede flater, eller på steder hvor trekkspillet skal få ekstra visuell oppmerksomhet.

Eksempel på trekkspill med grønn bakgrunn:

Størrelser

Accordion finnes i tre ulike størrelser:

• small
• medium (standard)
• large

Hvordan bruke komponenten  

Ikoner

Standardoppførselen til komponenten er at pilikon for åpne og lukke er plassert til høyre, men det er mulig å flytte det til ventre ved behov. Komponenten har også mulighet til å sette inn et valgtfritt «temaikon» til venstre, men da vil ikonet for åpne/lukke alltid stå til høyre.

Gruppere støtteinformasjon

Det er ofte nyttig å gruppere støtteinformasjon som folk ikke trenger hele tiden inn i trekkspill. Eksempler på dette er sidemeny i saksbehandling eller oversikt over kontaktopplysninger.

Brukt med temaikon for kontaktopplysninger:

Brukt i sidemeny i saksbehandling:

 

Universell utforming  

• Sjekk at tastaturfokus beholdes på knappen når du åpner og lukker innholdet.