Components

Card (deprecated)

Card is deprecated. Use StaticCardEkstern lenke or PressableCardEkstern lenke instead.

Cards are flexible components used to group and display content in a clear and concise format. They might be clickable or static.

GitHub React Native Figma

Examples

A basic card

<Card padding={4} width="fit-content">
  I am a card
</Card>

A clickable card

<Card padding={4} width="fit-content" as="button" display="block">
  I am a clickable card
</Card>

Cards in different colors

<Flex gap={2} flexWrap="wrap">
  <Card padding={4} colorScheme="white">
    White cards
  </Card>
  <Card padding={4} colorScheme="grey">
    Grey cards
  </Card>
  <Card padding={4} colorScheme="blue">
    Blue cards
  </Card>
  <Card padding={4} colorScheme="teal">
    Teal cards
  </Card>
  <Card padding={4} colorScheme="green">
    Green cards
  </Card>
  <Card padding={4} colorScheme="yellow">
    Yellow cards
  </Card>
  <Card padding={4} colorScheme="orange">
    Orange cards
  </Card>
</Flex>

Different sizes of cards

<Flex gap={3} flexWrap="wrap">
  <Card size="sm" padding={2} width="fit-content" as="a" href="/" display="block">
    A small card
  </Card>
  <Card size="lg" padding={6} width="fit-content" as="a" href="/" display="block">
    A large card
  </Card>
</Flex>

Guidelines

Kort finnes i to varianter – vanlige "bokser" og interaktive kort. De interaktive kortene har en skygge, mens de vanlige boksene ikke har det.

Kort kan inneholde alt fra bilder til overskrifter, støttetekst, lister, og andre komponenter. Men der bokser kan inneholde en eller flere knapper, vil vil ikke selve boksen være klikkbar. Det kan man derimot gjøre med interaktive kort.

Kort inneholder både kort og bokser. Kort kan inneholde alt fra bilder til overskrifter, støttetekst, lister og andre komponenter. Men bokser inneholder flere call to action innganger. Det kan ikke trykkes på selve kortet, men direkte på knapp eller tekst som fører ut av boksen.

Klikk eller ikke klikk

Det som avgjør om noe er klikkbart eller ei, er om man gjør det klikkbart. I React kan man sende inn en as prop, som kan bli satt til en lenke eller en knapp, og i React Native kan man sende inn en onPress prop for å oppnå samme effekt.

<Stack direction={["column", "row"]}>
  <Card p={4} width="fit-content">
    Dette er et veldig enkelt kort,<br />
    også kjent som en boks.
  </Card>
  <Card as="a" href="https://vy.no" p={4} width="fit-content">
    Dette er et veldig enkelt kort,<br />
    som du kan klikke på.
  </Card>
</Stack>

Størrelser

Kort kommer i forskjellige størrelser – sm og lg. Den eneste forskjellen mellom dem er mengden skygge de får når de er interaktive. lg variant kan brukes på kort som skal utheves, på desktop for å synliggjøre fra resten av innholdet, eller der det er få kort på samme side. sm variant kan brukes i kort som ikke skal utheves, eller der det er mange kort på samme side. sm er også foretrukket variant på mobil.

<Wrap gap={3}>
  <Card size="sm" p={2} width="fit-content" height="fit-content">
    Dette er et lite kort
  </Card>
  <Card 
    size="sm" 
    p={2} 
    width="fit-content"  
    height="fit-content" 
    as="a" 
    href="https://vy.no"
  >
    Dette er et lite klikkbart kort
  </Card>
  <Card size="lg" p={4} width="fit-content" as="a" href="https://vy.no">
    Dette er et stort klikkbart kort
  </Card>
</Wrap>

Farger

Det finnes en rekke forskjellige farger man kan bruke på kort. Her er en uttømmende eksempelliste i både liten og stor versjon.

Standardfargen er hvit, mens de andre er unntak / kontekstuelle. Bruk den med omhu.

<Stack>
  <Wrap gap={3}>
    <Card colorScheme="white" p={4}>"white"</Card>
    <Card colorScheme="green" p={4}>"green"</Card>
    <Card colorScheme="teal" p={4}>"teal"</Card>
    <Card colorScheme="blue" p={4}>"blue"</Card>
    <Card colorScheme="yellow" p={4}>"yellow"</Card>
    <Card colorScheme="orange" p={4}>"orange"</Card>
    <Card colorScheme="grey" p={4}>"grey"</Card>
  </Wrap>
  <Wrap gap={3}>
    <Card colorScheme="white" p={4} size="sm" as="button">"white"</Card>
    <Card colorScheme="green" p={4} size="sm" as="button">"green"</Card>
    <Card colorScheme="teal" p={4} size="sm" as="button">"teal"</Card>
    <Card colorScheme="blue" p={4} size="sm" as="button">"blue"</Card>
    <Card colorScheme="yellow" p={4} size="sm" as="button">"yellow"</Card>
    <Card colorScheme="orange" p={4} size="sm" as="button">"orange"</Card>
    <Card colorScheme="grey" p={4} size="sm" as="button">"grey"</Card>
  </Wrap>
  <Wrap gap={3}>
    <Card colorScheme="white" p={4} as="button">"white"</Card>
    <Card colorScheme="green" p={4} as="button">"green"</Card>
    <Card colorScheme="teal" p={4} as="button">"teal"</Card>
    <Card colorScheme="blue" p={4} as="button">"blue"</Card>
    <Card colorScheme="yellow" p={4} as="button">"yellow"</Card>
    <Card colorScheme="orange" p={4} as="button">"orange"</Card>
    <Card colorScheme="grey" p={4} as="button">"grey"</Card>
  </Wrap>
</Stack>

Avrunding

Vanligvis skal kort ha "md" avrunding i hjørnene. Men om man har mange kort i en liste, kan det virke litt visuelt overveldende.

Da kan du spesifisere hjørneavrundingen selv med borderRadius="sm", for eksempel.

Code

`<Card />`

import { Card } from "@vygruppen/spor-react";

A simple card

Props

Name	Type	Description
`children`	`React.ReactNode`	The content of the card
`colorScheme`	`"white" \| "grey" \| "blue" \| "green" \| "teal" \| "yellow" \| "orange"`	Default "white"
`size`	`"sm" \| "lg"`	Default "lg"

Fundamentals

Getting started