atom

Card

Container component for grouping related content with optional elevation, padding, and border radius.

Overview

The Card component is a versatile container for grouping related content. It supports different visual styles (elevated, outlined, filled), responsive padding and radius, and can be made interactive for clickable cards.

Props

Prop	Type	Default	Description
`paddingArea`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal padding
`radius`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Border radius
`shadowDepth`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Shadow depth / elevation
`variant`	`'elevated' \| 'outlined' \| 'filled'`	`'elevated'`	Visual style
`onPress`	`(event: GestureResponderEvent) => void`	-	Enables interactive pressable card
`testID`	`string`	-	Test ID for testing
`accessibilityLabel`	`string`	-	Accessibility label for screen readers
`accessibilityRole`	`AccessibilityRole`	`"button"`	Accessibility role for Pressable component when onPress is set

Variants

Visual Variants

Three styles for different visual contexts.

<Card variant="elevated">...</Card>
<Card variant="outlined">...</Card>
<Card variant="filled">...</Card>

Elevation/shadowDepth Levels

Control shadow depth for elevated cards.

Padding

Control internal spacing.

Radius

Control border radius.

Examples

Interactive/Pressable Card

Press the card.

<Card onPress={() => console.log('Pressed')}>
    Clickable content
</Card>