Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

ExpansionCard

Oppdatert 5. august 2024Stabil
GithubYarnEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Design
    • Bruk
    • Figma
  • Tilgjengelighet
    • Klikkflate
    • Interaksjon med skjermleser
    • Plassering av lukk/åpne-knapp
  • Props
    • ExpansionCard
    • ExpansionCard.Header
    • ExpansionCard.Title
    • ExpansionCard.Description
    • ExpansionCard.Content
  • Tokens

Intro

ExpansionCard samler informasjon eller handlinger i en boks som utvider og trekker seg sammen basert på brukerinteraksjon.

Egnet til:

  • Vise en oppsummering av informasjon med muligheten for å utvide for mer detaljer.
  • Samle relatert innhold i et enkelt panel.
  • Spare plass på siden ved å vise informasjon når brukeren ber om mer detaljer.

Uegnet til:

  • Viktig innhold som bruker bør/må få med seg.
  • Store mengder med innhold.
  • Å brukes mange ganger etter hverandre. Bruk heller Accordion.

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Tokens lar deg lett gjøre stilendringene du trenger uten å måtte overskrive css-klasser.

Man kan manuelt legge til ikoner eller illustrasjoner vha. HStack.

Retningslinjer

Design

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.

Anatomien til ExpansionCard

Header

Komponenten kommer med mulighet til å tilpasse innholdet i header. Du kan for eksempel ha med ikon/grafikk og beskrivelse i tillegg til tittel.

Content

Det er ikke noen sterke føringer for innholdet i content-delen, men du bør tenke over mengden.

Bruk

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 overskrifter, 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.

Bytte ut content i Figma

Forklaring på hvordan du enkelt legger til eget innhold.

Så enkelt er det:

  • Lag/sett sammen innholdet ditt i en autolayout frame som er responsiv i bredden.
  • Gjør autolayout framen med innholdet ditt om til en lokal komponent. Resizing må settes til horizontal fixed og vertical hug.
  • I ExpansionCard-komponenten skrur du på Open proppen.
  • Bruk 🔄 Content proppen for å endre innholdet til komponenten du lagde av innholdet ditt.

Det er mulig å detache ExpansionCard og legge til innhold direkte, men da vil du miste variantene og interaksjonen i prototyper.

Legge til header-grafikk i Figma

Legg enkelt til egen grafikk og tilpass det til innholdet.

Siden innholdet i header kan variere så mye er det ikke mulig å lage en komponent som tar høyde for alle muligheter. Derfor er det mulig å legge til grafikk og tilpasse plassering selv slik at det passer perfekt med innholdet ditt.

Så enkelt er det:

  • Lag/sett sammen innholdet ditt i en autolayout frame.
  • Gjør autolayout framen med innholdet ditt om til en lokal komponent. Resizing må settes til horizontal hug og vertical hug.
  • I ExpansionCard-komponenten skrur du på 👁️ Header graphic proppen.
  • Bruk 🔄 Header graphic proppen for å endre innholdet til komponenten du lagde av innholdet ditt.

Det er mulig å detache ExpansionCard og legge til grafikken direkte, men da vil du miste variantene og interaksjonen i prototyper.

Tilgjengelighet

Klikkflate

Hele header-delen av komponenten er klikkbar, noe som også vises med hover-interaksjon. Dette er løst med et psuedo-element (beskrevet her), der man ikke trenger å ha alt innholdet i en button. Dette muliggjør 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ølgende unik aria-label som beskriver seksjonen. Oftest kan label bare 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. Dette er noen av vurderingene 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.

LenkerLenker

  • Kontinuitet
  • Heuristiske prinsipper for UI-design

Props

ExpansionCard

onToggle?

  • Type:
    ((open: boolean) => void)
  • Description:

open?

  • Type:
    boolean
  • Description:

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ExpansionCard.Header

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ExpansionCard.Title

as?

  • Type:
    React.ElementType
  • Description:

size?

  • Type:
    "large" | "medium" | "small"
  • Default:
    medium
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLHeadingElement>
  • Description:

ExpansionCard.Description

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLParagraphElement>
  • Description:

ExpansionCard.Content

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

Vi har valgt å ikke tilby egne varianter, men oppfordrer heller til å lage egne ved hjelp av css-variablene våre. Se eksemplet "custom" for demo.

TokenFallback
--ac-expansioncard-bg--a-surface-default
--ac-expansioncard-header-bg--a-surface-transparent
--ac-expansioncard-header-bg-hover--a-surface-hover
--ac-expansioncard-header-open-bg--a-surface-transparent
--ac-expansioncard-border-color--a-border-default
--ac-expansioncard-border-open-color--a-border-default
--ac-expansioncard-border-radius--a-border-radius-large
--ac-expansioncard-button-border-radius--a-border-radius-medium
--ac-expansioncard-border-hover-color--a-border-strong
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack