Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

ExpansionCard

Oppdatert 4. august 2023
GithubYarnEndringslogg

    Beta

    Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.

    Send innspill

    Intro

    ExpansionCard er en wrapper for informasjon eller handlinger i et card-format 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

    Eksempler

    Åpne eksempel i nytt vindu

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

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

    Bruk av ExpansionCard

    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.

    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

    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

    KommandoInteraksjon
    TabFlytt fokus til neste element
    Shift+TabFlytt fokus til forrige element
    EnterÅpne/lukke kortet
    SpaceÅpne/lukke kortet

    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.

    NyheterRelevante lenker

    • Kontinuitet
    • Heuristiske prinsipper for UI-design

    Props

    ExpansionCard

    onToggle? ((open: boolean) => void)
    Callback for when Card is toggled open/closed
    open? boolean
    Controlled open-state Using this removes automatic control of open-state
    defaultOpen?boolean
    Defaults to open if not controlled
    size?"medium" | "small"
    className? string
    aria-label? string
    Defines a string value that labels the current element. Should be set if not using 'aria-labelledby' @see aria-labelledby.
    aria-labelledby? string
    Identifies the element (or elements) that labels the current element. Should be set if not using 'aria-label' @see aria-describedby.
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    ExpansionCard extends HTMLDivElement

    ExpansionCard.Header

    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    ExpansionCard.Header extends HTMLDivElement

    ExpansionCard.Title

    as? React.ElementType
    OverridableComponent-api
    size?"large" | "medium" | "small"
    Changes text-sizing
    className? string
    ref? Ref<HTMLHeadingElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    ExpansionCard.Title extends HTMLHeadingElement

    ExpansionCard.Description

    className? string
    ref? Ref<HTMLParagraphElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    ExpansionCard.Description extends HTMLParagraphElement

    ExpansionCard.Content

    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    ExpansionCard.Content extends HTMLDivElement

    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.

    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

    Relaterte komponenter

    • Accordion thumbnail
      Accordion

    © 2023 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