Komponenter
LinkCard
LinkCard brukes for å fremheve viktige lenker med mer kontekst enn vanlige tekstlenker.
Ny funksjon
Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!
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.
<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.
<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
size?
- Type:
"small" | "medium"
- Default:
""medium""
- Description:
Changes padding and typo sizes.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
LinkCard.Title
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
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
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
LinkCard.Anchor
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
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
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
LinkCard.Description
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
LinkCard.Footer
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
LinkCard.Icon
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
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
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs