Kort

Bruk av kort

Kortene skal hjelpe brukerne med å navigere seg til riktig side. De skal gi en kort og tydelig oppsummering av hva slags informasjon som finnes på undersiden.

CardBase

Dette er basisen for alle kort. Komponeten kan brukes direkte for å få en ramme du kan fylle dersom du trenger et spesialtilpassert kort.

Du kan skru av/på box-shadow med shadow-prop, skru av margin med noMargin-prop, og sette bakgrunnsfargen i både light- og darkmode med bgColorog bgDarkmodeColor.

TextCard

Tekstkort er den enkleste korttypen. Den tilbyr alle underkomponenter (CardName, Title, Subtext, Text og CardAction) og plasserer dem i gitt rekkefølge nedover i kortet, med teksten midtstilt.

IconCard

Ikonkort er kort med en gitt maksbredde og et venstrestilt ikon. Den tilbyr alle underkomponenter (CardName, Title, Subtext, Text og CardAction) og plasserer dem i gitt rekkefølge nedover i kortet, med teksten venstrestilt, til høyre for ikonet.

Kortet kan gjøres mer kompakt med condensed-modifyeren.

Ikonbruk

Ikonene som brukes i kortene skal være ha weight 300. Størrelsen er lg i condensed-versjonen og xl i den normale versjonen.

IllustrationCard

Illustrasjonskort er kort med en venstrestilt illustrasjon. Den tilbyr alle underkomponenter (CardName, Title, Subtext, Text og CardAction) og plasserer dem i gitt rekkefølge på høyresiden nedover i kortet (med teksten venstrestilt)

No report found with id: Cards_IllustrationCard

Kortet kan gjøres mer kompakt med condensed-modifyeren.

GroupCard

GroupCard er et kort med en liste av elementer inni. Det kan bestå av GroupCardTitle, GroupCardElement og GroupCardFooter, men trenger ikke alle.

Man kan modifisere GroupCard til å ikke ha skygge med shadow={false}.

GroupCardElement har linjer mellom elementene som standard, men det kan fjernes med noSeparator.

Akkurat som med CardBase, er ikke GroupCardElement klikkbart som standard. Bruk CardAction for å lage et klikkbart kort.

StippledCard

StippledCard er kort med en stiplet kantlinje. Den tilbyr alle underkomponenter (CardName, Title, Subtext, Text og CardAction) og plasserer dem i gitt rekkefølge nedover i kortet, med teksten venstrestilt. Kortet kan brukes i kombinasjon med ikoner eller illustrasjoner, eller uten noen av delene.

StippledCard kan gjøres mer kompakt med condensed-modifyeren.

ImageCard

Bildekort er kort med en gitt maksbredde, minimumshøyde, og et topplasert bilde. Den tilbyr alle underkomponenter (CardName, Title, Subtext, Text og CardAction) og plasserer dem i gitt rekkefølge nedover i kortet, med teksten midtstilt, nedenfor bildet.

Klikkbare kort

Kort er ikke klikkbare som standard. Bruk <CardAction/> for å lage et klikkbart kort. En <CardAction/> kan brukes som en lenke eller en knapp ved hjelp av as.