ExpansionCard

Varianter

ExpansionCard er bygd opp av header og content. Header er den synlige delen du kan klikke på. Content er delen som vises når du åpner komponenten.

Header

Komponenten kommer med mulighet til å tilpasse innholdet i header. Du kan velge å vise/skjule ikon, ikonbakgrunn og beskrivelse. Det er også mulig å bytte ut ikon+bakgrunn med annen grafikk som f.eks. piktogrammer. Størrelser på heading + heading-tag er også fleksibel slik at den passer inne i flere hierarkier.

Content

Panelet som åpner seg er bare en wrapper rundt innholdet du selv ønsker å legge der.

Retningslinjer

ExpansionCard er et godt virkemiddel for å organisere og skille ut informasjon. Det kan for eksempel brukes til informasjon som forklarer noe mer detaljert eller forklarer noe relatert til innholdet på siden.

Vurder dette når du vil bruke ExpansionCard:

• Er innholdet viktig? Om det er viktig (kritisk) at bruker får med seg innholdet må du være varsom med ExpansionCard. Folk har en tendens til å overse informasjon som er gjemt.
• Er det for mange ExpansionCards? Mange ExpansionCards samlet på et sted kan oppleves overveldende. Tenk på balansen mellom struktur i informasjonen og støy fra for mange kraftige elementer.
• Mye innhold? Om du har mye innhold kan du vurdere å lage en ny side. Innhold i ExpansionCard har mindre plass (spesielt på mobil) og er vanskeligere å linke til. Hvis innholdet krever headings, bør det ikke gjemmes i ExpansionCard.
• Forskjellig innhold? Innholdet i header skal introdusere innholdet i content slik at brukerne skjønner hva de vil se før de klikker på komponenten. Pass derfor på at content ikke inneholder for mye forskjellig innhold som gjør det vanskelig å være nøyaktig i header.

Figma

I Figma er komponenten designet med slot-komponenter som gjør det mulig å legge til eget innhold samtidig som variantene og interaksjonen bevares.

Tilgjengelighet

Om du justerer på farge-tokens må du passe på kontrastkravene:

• Farge på tekst mot bakgrunn - 4.5:1
• Former, ikoner, rammer, etc. mot bakgrunn - 3:1

Interaksjon med tastatur

Klikkflate

Hele Header-delen av komponenten er klikkbar, noe som også vises med hover-interaksjon. Dette er løst med psuedo-element (beskrevet her), der man ikke trenger at innholdet er i en button. Dette åpner opp for rikere innhold i Header, men bruker vil ikke kunne kopiere/markere tekst i Header.

Interaksjon med skjermleser

Komponenten er kodet med section-element (mdn). Dette gir skjermlesere mer kontekst om at de nå er inne i et card, men krever en medfølgene unik aria-label som beskriver seksjonen. Oftest vil label bare trenge å være tittelen, men må vurderes basert på konteksten.

Plassering av lukk/åpne-knapp

Vi har valgt å plassere knappen til høyre i header da dette er det mest standariserte utrykket for paneler med interaksjon (Jakob's Law). Dette betyr selvfølgelig ikke at standarden alltid er den mest tilgjengelige løsningen, og er noen vurderinger for valget:

• ExpansionCard er innrammet i en tydelig border som guider bruker til knappen (Gestaltprinsipp kontinuitet).
• Komponenten bør ha en tydelig maksbredde definert av konteksten den er brukt i slik at tekst og knapp ikke blir for frakoblet.

Selv om vi har tatt dette valget for komponenten utforsker vi muligheten for å gjøre dette valgfritt i Accordion.

Props

Tokens

Vi har valgt å ikke tilby egne varianter, men heller oppfordre til å bruke css-variablene våre under til å lage egne der det måtte være ønsket. Se eksemplet custom og Icon lengre opp på siden for demoer.