Props

Prop:

heading?

Type:

string

Beskrivelse:

Tittel på card

Prop:

headingLevel?

headinglevel?

Type:

"1" | "2" | "3" | "4" | "5" | "6"

Standardverdi:

3

Beskrivelse:

Nivået på headingen. Brukes for tilgjengelighet.

Prop:

subheading?

Type:

string

Beskrivelse:

Undertittel på card

Prop:

layout?

Type:

"vertical" | "horizontal"

Standardverdi:

"vertical"

Beskrivelse:

Horisontal eller vertikal layout. Ved horisontal layout vil bildet være plassert til venstre for teksten på desktop, og over teksten på mobil.

Prop:

skin?

Type:

"outlined" | "outlined-beige" | "gray" | "blue" | "beige" | "green"

Standardverdi:

"outlined"

Beskrivelse:

Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. Ved padding=none er det ikke mulighet for outlined-skin. Card med kombinasjonen av propsene padding=none + layout=vertical vil alltid være transparante.

Prop:

padding?

Type:

"none" | "default"

Standardverdi:

"default"

Beskrivelse:

Padding rundt card. Ved "none" strekker innholdet i card seg ut til kantene, og dette er derfor ikke mulig å kombinere med outlined skin.

Prop:

metaLead?

Type:

string

Beskrivelse:

Undertekst med fet skriftvekt

Prop:

metaTrail?

Type:

string

Beskrivelse:

Undertekst med normal skriftvekt

Prop:

tagPosition?

Type:

"top" | "bottom"

Standardverdi:

"top"

Beskrivelse:

Plassering av tags i card

Prop:

clickCardLink?

Type:

string

Beskrivelse:

Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card.

Prop:

openLinkInNewTab?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.

Prop:

borderOnHover?

Type:

boolean

Standardverdi:

true

Beskrivelse:

Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov.

Prop:

zoom?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Forstørrer bildet litt når man holder musepekeren over kortet

Prop:

image?

Type:

ICardImage

Beskrivelse:

Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.

Prop:

imageShape?

Type:

"square" | "round"

Standardverdi:

"square"

Beskrivelse:

Valg for om bildet skal ha rektangulær eller rund form.

Prop:

imageAspect?

Type:

"auto" | "1-1" | "4-3" | "3-2" | "16-9" | "19-10"

Beskrivelse:

Overstyrer bildets sideforhold. Uten denne er det 1:1, eller 19:10 med padding «none» og stående kort.

Prop:

restrictImageHeight?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Låser bildehøyden i stedet for sideforholdet, og trapper den opp med skjermbredden: 12.5rem, 14.375rem fra tablet og 18.125rem fra tablet-big. Bildet beskjæres sentrert.

Prop:

tags?

Type:

array

Beskrivelse:

Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text

Prop:

ariaLabel?

Type:

string

Beskrivelse:

Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.

Slots

Slot:

default

Beskrivelse:

Innholdet i card

Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.

Prop:

src

Type:

string

Beskrivelse:

Stien til bildet

Prop:

alt?

Type:

string

Beskrivelse:

Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative

Prop:

skin?

Type:

"blue" | "green" | "red" | "yellow"

Beskrivelse:

Farge på tag

Prop:

iconName?

Type:

icon

Beskrivelse:

Id på ikonet du ønsker å bruke til tag

Prop:

ariaLabel?

Type:

string

Beskrivelse:

Tekst for aria-label

Prop:

text

Type:

string

Beskrivelse:

Tekst på tag