Skip to content
Vy logo
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.

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>