Card

The Card component is a container that displays content. It has built-in padding, border and shadow.

Basic usage

 
tsx
Copied
1
<Card>
2
  <Stack direction="row" justify="space-between">
3
    <Title order={2}>Airplane</Title>
4
    <Chip variant="light">English</Chip>
5
  </Stack>
6
  <Text color="secondary">
7
    An airplane or aeroplane (informally plane) is a fixed-wing aircraft that is propelled
8
    forward by thrust from a jet engine, propeller, or rocket engine.
9
  </Text>
10
  <Button href="https://airplane.dev" preset="secondary">
11
    Learn more about airplane
12
  </Button>
13
</Card>

Custom
You can customize the border, radius, shadow and padding of a card.
tsx
Copied
1
<Card withBorder={false} radius="xs" shadow="xl" p="xl">
2
  <Stack direction="row" justify="space-between">
3
    <Title order={2}>Airplane</Title>
4
    <Chip variant="light">English</Chip>
5
  </Stack>
6
  <Text color="secondary">
7
    An airplane or aeroplane (informally plane) is a fixed-wing aircraft that is propelled
8
    forward by thrust from a jet engine, propeller, or rocket engine
9
  </Text>
10
  <Button href="https://airplane.dev" preset="secondary">
11
    Learn more about airplane
12
  </Button>
13
</Card>

List
Cards are often used in lists to show a series of components.
tsx
Copied
1
<Stack height="64u">
2
  {data.map((dataItem) => (
3
    <Card key={dataItem} p={"md"}>
4
      <Text>{dataItem}</Text>
5
    </Card>
6
  ))}
7
</Stack>

Component API
children
REQUIRED
React.ReactNode

Content of the card.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
p
optional
default: lg
number | "xs" | "sm" | "md" | "lg" | "xl"

Card padding.

radius
optional
default: lg
number | "xs" | "sm" | "md" | "lg" | "xl"

Border radius of the card.

shadow
optional
string & {} | "xs" | "sm" | "md" | "lg" | "xl"

Shadow around the card.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.
withBorder
optional
default: true
boolean

Whether the card is surrounded by a 1px border.

PrivacyTermsSupport