Aksel

Meny

LinkCard

Oppdatert Ny
GithubYarnEndringslogg

Ny

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

Send innspill

Intro

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

Egnet til:

  • Lenke med rikt innhold

Uegnet til:

  • Interaktivt innhold

Eksempler

LinkCard er bygd for å være komposerbar, samtidig som den tilbyr en tilgjengelig implementasjon av komplekse kort.

SandboxSandbox
Åpne eksempel i nytt vindu

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.

Liste med lenker

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

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

size?

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

LinkCard.Title

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

as?

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

ref?

  • Type:
    LegacyRef<HTMLHeadingElement>
  • Description:

LinkCard.Anchor

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

asChild?

  • Type:
    boolean
  • Description:

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

LinkCard.Description

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

LinkCard.Footer

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

LinkCard.Icon

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

LinkCard.Image

aspectRatio?

  • Type:
    ImageAspectRatio
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description: