Skip to content
Vy logo

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.


A basic card

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

A clickable card

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

Cards in different colors

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

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 size="lg" padding={6} width="fit-content" as="a" href="/" display="block">
    A large card