Gå til hovedinnhold
KOMPONENTER

Cards

Cards er komponenter for å vise tekst i en annen flate.


Card
Man kan også benytte seg av komponenten Card, for å få en ikke-klikkbar boks for å ha innhold i.

Komponenter

NavnTypePåkrevd?Default-verdiBeskrivelse
as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... 'a'

HTML-elementet eller React-komponenten som lager NavigationCard

titlestring

Tittelen/teksten som står i CardBox

titleIconReactNode

Valgfritt ikon som står over tittelen

classNamestring

Ekstra klassenavn

compactboolean false

Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst

childrenReactNode

Beskrivelse under tittel, om ikke “compact” er valgt

NavigationCard kan brukes gjerne på landingssider for å gi oversiktlige linker til forskjellige undersider. NavigationCard skal ha en beskrivende tekst under tittelen, og gjerne et beskrivende ikon. Bruk helst eksempelet over, og ha 1.5rem/24px mellom hvert NavigationCard.

NavigationCard med compact-propen kan brukes på samme måte, men heller om man vil bruke mindre plass, eller ikke har en beskrivende tekst til tittelen. Ettersom denne ikke har forflyttning ved hover, så kan du bruke lavere verdier for spacing mellom boksene.

Card

NavnTypePåkrevd?Default-verdiBeskrivelse
as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... "div"

HTML-elementet eller React-komponenten som lager Card

classNamestring

Ekstra klassenavn

BaseCard er komponenten som NavigationCard bygger seg oppå, og kan også brukes direkte, om man skulle ha behov stylingen som BaseCard er "kjent" for.