Hopp til innhold
Aksel

Komponenter

InfoCard

InfoCard brukes til å fremheve innhold. Kortet styles med farge og ikon som hjelper brukeren med å forstå budskapet.

NyOppdatert 24. november 2025
GithubEndringslogg

Ny funksjon

Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!

Send innspill

Egnet til:

  • Innhold som skal få mer oppmerksomhet

Uegnet til:

Eksempler

Retningslinjer

Mengde og antall

Mengde innhold i et InfoCard eller antall InfoCard per side har vi ingen definert grense på annet enn at det skal brukes til å fremheve innhold. Om alt er fremhevet, er ingenting fremhevet - "Less is more".

Kontekst

Velg et ikon og en farge på InfoCard som matcher budskapet eller konteksten til innholdet. Du finner inspirasjon til noen varianter i kodeeksemplene over. Les mer om dynamisk theming.

Tilgjengelighet

Heading-nivå

<InfoCard.Title /> er h2 ut av boksen, husk å oppdatere dette til riktig nivå i kontekst av hvor du bruker den med as-propen.

Tilgjengelig navn på ikon

Hvis ikke en alternativ tekst gir ekstra verdi, anbefaler vi å gjemme ikonet med aria-hidden.

Props

InfoCard

children

  • Type:
    ReactNode
  • Description:

    Component content.

size?

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

    Changes the size.

data-color?

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

    Overrides color

className?

  • Type:
    string

as?

  • Type:
    "div" | "section"
  • Default:
    "div"
  • Description:

    Changes the HTML element used for the root element.

    When using section, provide either aria-label or aria-labelledby for better accessibility. axe-core might warn about unique landmarks if you have multiple InfoCards on page with the same label. In those cases consider updating to unique aria-label or aria-labelledby props. @see 📝 Landmarks unique

ref?

  • Type:
    LegacyRef<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

InfoCard.Header

icon?

  • Type:
    ReactNode
  • Description:

    Icon to display in the header.

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<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

InfoCard.Title

as?

  • Type:
    "h2" | "h3" | "h4" | "h5" | "h6" | "div"
  • Default:
    "h2"
  • Description:

    Changes the HTML element used for the title.

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<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

InfoCard.Content

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<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