Card
Content container, elevated or outlined.
Installation
npx axiom add cardpnpm dlx axiom add cardyarn dlx axiom add cardbun x axiom add cardColors come from card.{elevated,outlined,filled}.{default,pressed} in the component tokens. The elevated shadow is a boxShadow in the component file.
Usage
import { Card } from "@/components/ui/card";
<Card variant="outlined">
<Card.Header>
<Card.Title>Weekend in Porto</Card.Title>
<Card.Description>3 days · from $240</Card.Description>
</Card.Header>
<Card.Content>…</Card.Content>
<Card.Footer>…</Card.Footer>
</Card>;Props
Card
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'elevated' | 'outlined' | 'filled' | 'elevated' | elevated: background.elevated with a shadow, stands out on grouped backgrounds. outlined: a border, for plain backgrounds. filled: background.subtle, no border or shadow. |
padding | SpacingToken | 'none' | 'none' | Inner padding for a card without sub-components. With Card.Header/Content/Footer, leave it to none: they pad themselves. |
radius | RadiusToken | 'lg' | Corner radius, 14pt by default. Media inside is clipped to it. |
onPress | () => void | — | Makes the whole card pressable with a pressed state. Buttons inside still receive their own presses. |
disabled | boolean | false | With onPress, blocks presses and lowers the opacity. |
accessibilityLabel | string | — | With onPress, read instead of the texts inside the card: say what it opens. |
children | ReactNode | — | The sub-components below, or any content. |
style | StyleProp<ViewStyle> | — | Extra styles for the container. |
Card.Media
| Prop | Type | Default | Description |
|---|---|---|---|
source | ImageSourcePropType | — | Image shown edge to edge at the top of the card. |
aspectRatio | number | 16 / 9 | Height relative to the card width. |
children | ReactNode | — | Overlay content on the image, like a Badge. |
Card.Header, Card.Content, Card.Footer
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Header: Card.Title, Card.Description and an optional trailing action. Content: the body. Footer: actions, laid out in a row. |
style | StyleProp<ViewStyle> | — | Extra styles. Each part uses 16pt horizontal padding and shares the vertical spacing with its neighbors. |
Use cases
Summary widget on a dashboard
A small elevated card with a value and a trend. onPress opens the details.
<Card padding={4} onPress={openEnergy}>
<Text variant="footnote" color="muted">
Energy
</Text>
<Title variant="headingLg">482</Title>
<Text variant="footnote" color="success">
▲ 12% vs yesterday
</Text>
</Card>Feed item with media
Card.Media on top, a header with the author, a footer with actions.
<Card variant="outlined">
<Card.Header>
<Avatar size="sm" … />
<Card.Title>Linus Torvalds</Card.Title>
</Card.Header>
<Card.Media source={{ uri: post.image }} aspectRatio={4 / 3} />
<Card.Footer>
<IconButton icon="heart" accessibilityLabel="Like" />
<IconButton icon="send" accessibilityLabel="Share" />
</Card.Footer>
</Card>Horizontal carousel of cards
Cards with a fixed width in a Carousel, peeking at the next one.
<Carousel
data={shows}
itemWidth={230}
renderItem={({ item }) => (
<Card onPress={() => play(item.id)}>
<Card.Media source={item.poster} />
<Card.Content>…</Card.Content>
</Card>
)}
/>Guidelines
Avoid nesting cards inside cards. On a small screen, every level of padding and border takes space from the content. See Mobile design guidelines.