Hopp til innhold
Aksel

Komponenter

ExpansionCard

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 brukeren bør/må få med seg.
  • Store mengder med innhold.
  • Å brukes mange ganger etter hverandre. Bruk heller Accordion.

Eksempler

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:

  • Ikke bruk ExpansionCard hvis innholdet er viktig. Folk overser ofte informasjon som er gjemt.
  • Mange ExpansionCards samlet på ett sted kan oppleves overveldende.
  • Hvis du har mye innhold, bør du vurdere å lage en ny side i stedet.
  • Header skal introdusere innholdet i content slik at brukerne skjønner hva de vil se før de klikker på komponenten.

Tilgjengelighet

Klikkflate

Hele header-delen av komponenten er klikkbar, noe som også vises med hover-interaksjon. Dette er løst med et pseudo-element, der man ikke trenger å ha alt innholdet i en button. Dette muliggjør rikere innhold i header, men brukeren vil ikke kunne 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 (chevron) til høyre i header da dette er det mest vanlige for paneler med interaksjon. Dette er noen av vurderingene for valget:

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

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr

Props

ExpansionCard

onToggle?

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

    Callback for when Card is opened/closed.

open?

  • Type:
    boolean
  • Description:

    Controlled open-state.

    Using this removes automatic control of open-state.

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

    The open state when initially rendered. Use when you do not need to control the open state.

size?

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

data-color?

  • Type:
    "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
  • Description:

    Overrides inherited color. @see 🏷️ {@link AkselColor } @see 📝 Documentation

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ExpansionCard.Header

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ExpansionCard.Title

size?

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

    Changes text-sizing

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLHeadingElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

ExpansionCard.Description

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLParagraphElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ExpansionCard.Content

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Forvalter

Team
Aksel
Artikkel oppdatert 21. august 2026
Rapporter en bug
Om du har funnet en bug eller noe som ikke henger på greip kan du gi beskjed på GitHub.
Rapporter en bug
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack