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.

Hele kortet er klikkbart og tar brukeren med til en underside med mer detaljer. Siden kortet er klikkbart i seg selv skal vi ikke bruke knapper, linker eller andre klikkbare elementer inni kortet.

href og element

Kortkomponentene returneres som a, og man må derfor sende med en URL med href. Unntaket er dersom man bruker element-propen for overstyre hvilket element som skal returneres.

URL i href:

<CardBase href="https://design.sparebank1.no">
    Dette er et klikkbart kort
</CardBase>

Egendefinert element:

<CardBase element="div">
    Dette kortet er ikke klikkbart
</CardBase>

CardBase

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

TextCard

Tekstkort er den enkleste korttypen. Den tilbyr alle underkomponenter (CardName, Title, Subtext og Text) 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 og Text) 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.

StippledCard

StippledCard er kort med en stiplet kantlinje. Den tilbyr alle underkomponenter (CardName, Title, Subtext og Text) 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 og Text) og plasserer dem i gitt rekkefølge nedover i kortet, med teksten midtstilt, nedenfor bildet.