Card

A surface container for grouping related content. Three structural variants adapt the visual weight from subtle to prominent — useful for feature callouts, dashboards, and content layouts.

Preview

Default

Off-white fill with a thin border.

Elevated

White fill raised with a drop shadow.

Outlined

Transparent background, bold border.

Padding sizes

padding="sm"

padding="md"

padding="lg"

Usage

import { Card } from '@/components/Card';

// Default — light fill + thin border
<Card variant="default" padding="md">
  <h3>Default Card</h3>
  <p>Standard border with a light off-white fill.</p>
</Card>

// Elevated — white fill + drop shadow
<Card variant="elevated" padding="md">
  <h3>Elevated Card</h3>
  <p>Raised off the canvas with a soft drop shadow.</p>
</Card>

// Outlined — transparent fill + bold border
<Card variant="outlined" padding="md">
  <h3>Outlined Card</h3>
  <p>Strong border, transparent background.</p>
</Card>

// Padding sizes
<Card variant="default" padding="sm">Small padding</Card>
<Card variant="default" padding="md">Medium padding</Card>
<Card variant="default" padding="lg">Large padding</Card>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'elevated' \| 'outlined'`	`'default'`	default uses an off-white fill + thin border. elevated adds a drop shadow on white. outlined uses a 2px border with a transparent background.
`padding`	`'sm' \| 'md' \| 'lg'`	`'md'`	Inner padding size. sm = 16px, md = 24px, lg = 40px.
`children`	`React.ReactNode`	`—`	Content rendered inside the card. Required.
`className`	`string`	`—`	Additional CSS class names merged into the element.