Card

Discover

Weekend in Porto3 days · from $240

Bookshops, port cellars and the Ribeira at sunset.

Details

Book

Outlined

No shadow, a border instead

Installation

npx axiom add card

pnpm dlx axiom add card

yarn dlx axiom add card

bun x axiom add card

Colors 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

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

A small elevated card with a value and a trend. onPress opens the details.

Today

Energy

482▲ 12% vs yesterday

Focus

3h 20▼ 20 min

Weekly goal4 / 5 days

<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.

Linus TorvaldsHelsinki · 3h

<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.

Continue watchingSee all

Episode 418 min left

The keynote42 min left

<Carousel
	data={shows}
	itemWidth={230}
	renderItem={({ item }) => (
		<Card onPress={() => play(item.id)}>
			<Card.Media source={item.poster} />
			<Card.Content>…</Card.Content>
		</Card>
	)}
>
	<Carousel.List />
</Carousel>