Card
The
Card
component is a container that displays content. It has built-in padding, border and
shadow.Basic usage
tsxCopied1<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">7An airplane or aeroplane (informally plane) is a fixed-wing aircraft that is propelled8forward by thrust from a jet engine, propeller, or rocket engine.9</Text>10<Button href="https://airplane.dev" preset="secondary">11Learn more about airplane12</Button>13</Card>
Custom
You can customize the border, radius, shadow and padding of a card.
tsxCopied1<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">7An airplane or aeroplane (informally plane) is a fixed-wing aircraft that is propelled8forward by thrust from a jet engine, propeller, or rocket engine9</Text>10<Button href="https://airplane.dev" preset="secondary">11Learn more about airplane12</Button>13</Card>
List
Cards are often used in lists to show a series of components.
tsxCopied1<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
Content of the card.
grow
optional
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
p
optional
default: lg
Card padding.
radius
optional
default: lg
Border radius of the card.
shadow
optional
Shadow around the card.
width
optional
default: auto
withBorder
optional
default: true
Whether the card is surrounded by a 1px border.