Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

LinkCard

LinkCard brukes for å fremheve viktige lenker med mer kontekst enn vanlige tekstlenker.

NyOppdatert 1. juli 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:

  • Lenke med rikt innhold.

Uegnet til:

  • Interaktivt innhold.

Eksempler

Retningslinjer

Innhold

  • Tittel (obligatorisk): Prøv å holde deg til én linje.
  • Beskrivelse: 1-2 korte setninger som utdyper overskriften.
  • Unngå å gjenta samme informasjon i overskrift og beskrivelse.
  • Bruk kun relevante illustrasjoner som tilfører verdi.

Tittel som semantisk overskrift

Tittelen kan rendres som et h-element hvis det gir mer mening i konteksten. Dette gjøres ved hjelp av as-propen. LinkCard-et bør i så fall ha en beskrivelse.

TSX
<LinkCard>
  <LinkCard.Title as="h3">
    <LinkCard.Anchor href="/eksempel">Sykepenger</LinkCard.Anchor>
  </LinkCard.Title>
  <LinkCard.Description>
        Erstatter inntekten din når du ikke kan jobbe på grunn av sykdom eller
        skade.
  </LinkCard.Description>
</LinkCard>

Liste med lenker

Når flere lenker vises sammen, anbefaler vi å samle disse i en liste.

TSX
<ul>
  <li>
    <LinkCard>...</LinkCard>
  </li>
  <li>
    <LinkCard>...</LinkCard>
  </li>
</ul>

Tilgjengelighet

LinkCard er omsluttet med et klikkbart div-element i stedet for et a-element. Dette lar oss plassere a-elementet rundt tittelen, og unngår støy i skjermleser-lenkelister fra beskrivelser og annet innhold.

Ved "text-selection" stopper komponenten navigasjon ved klikk, slik at bruker kan markere teksten i LinkCard uten å ved uhell navigere.

Props

LinkCard

arrow?

  • Type:
    boolean
  • Default:
    true

arrowPosition?

  • Type:
    "baseline" | "center"
  • Default:
    "baseline"
  • Description:

    Adjusts arrow position.

size?

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

    Changes padding and typo sizes.

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

LinkCard.Title

className?

  • Type:
    string

as?

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

    Heading tag. Use "span" if you want a non header defining card (eg. you have a lot of them all at once, such as in a grid)

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

LinkCard.Anchor

className?

  • Type:
    string

asChild?

  • Type:
    boolean
  • Description:

    Renders the component and its child as a single element, merging the props of the component with the props of the child.

ref?

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

LinkCard.Description

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

LinkCard.Footer

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

LinkCard.Icon

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

LinkCard.Image

aspectRatio?

  • Type:
    ImageAspectRatio
  • Description:

    The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.

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