Skip to content
Vy logo
Components
React
React Native
Figma

Card (deprecated)

Card is deprecated. Use StaticCard or PressableCard 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>