Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

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

as?

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

    Changes the HTML element used for the root element.

    Testing: When using axe-core for accessibility testing, section might warn about unique landmarks if you have multiple Alerts on page with the same status. In those cases, consider using div as the root element, or adding unique aria-label or aria-labelledby props. 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 @see 📝 Landmarks unique

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