Card

A themed container built on Surface with opinionated content defaults. Minimum padding is sm (8px) — a card with no padding isn’t a card, it’s a plain view.

When to use: Any contained content block that visually separates from the page background — profile cards, summary cards, feature tiles, list group containers.

When not to use: When you don’t need a visible container — use a bare View. For settings/preference rows — use SettingsGroup. For full-screen layout — use a template.

Import

import { Card } from '@/components';

Usage

<Card padding="md" border>
  <Heading level={3}>Account Summary</Heading>
  <Text color="secondary">Balance: $1,240.00</Text>
</Card>

Props

Prop	Type	Default	Description
padding	'sm' | 'md' | 'lg' | 'xl'	'md'	Internal padding (minimum 'sm')
border	boolean	false	Adds thin border in theme.colors.border
isElevated	boolean	false	Adds theme.shadow.md
onPress	() => void	—	Makes the card pressable
accessibilityLabel	string	—	Required when onPress is set
children	ReactNode	—	Card content
testID	string	—	For testing

Padding scale

Value	Spacing
sm	8px
md	16px
lg	24px
xl	32px

Pressable card

<Card
  padding="md"
  border
  onPress={() => router.push(`/invoices/${invoice.id}`)}
  accessibilityLabel={`Invoice ${invoice.number} — ${invoice.amount}`}
>
  <Text variant="label" weight="semibold">{invoice.number}</Text>
  <Text color="secondary">{invoice.amount}</Text>
</Card>

Do / Don’t

Do: Use accessibilityLabel whenever onPress is set.

<Card onPress={open} accessibilityLabel="View account details">...</Card>

Don’t: Use padding 'none' — it was removed in Session 5.3 (ADR). Minimum is 'sm'.

Related

• Surface — lower-level container without content defaults
• SettingsGroup — card-style container for settings rows