# Card

A surface that groups related content.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Title rendered as the card header. Optional. |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Inner padding preset. |
| `elevated` | `boolean` | `false` | Apply a soft drop shadow for higher elevation. |
| `children` \* | `ReactNode` | — | Card body content. |

## Basic

**`Basic.stories.tsx`**

```tsx
import { Card } from '../../../src/pixie/Card.js';
import { Button } from '../../../src/pixie/Button.js';

export default () => (
  <Card title="Bookmark">
    <p style={{ margin: '0 0 0.75rem' }}>
      The full Markbook source lives at github.com/doidor/markbook.
    </p>
    <Button>Open</Button>
  </Card>
);
```

## Elevated

**`Elevated.stories.tsx`**

```tsx
import { Card } from '../../../src/pixie/Card.js';

export default () => (
  <Card title="Elevated" elevated>
    <p style={{ margin: 0 }}>
      Cards with the <code>elevated</code> flag get a soft drop shadow for higher visual emphasis.
    </p>
  </Card>
);
```

## Padding sizes

**`PaddingSizes.stories.tsx`**

```tsx
import { Card } from '../../../src/pixie/Card.js';
import styles from './PaddingSizes.module.css';

export default () => (
  <div className={styles.row}>
    <Card title="sm" padding="sm">
      Tight
    </Card>
    <Card title="md" padding="md">
      Default
    </Card>
    <Card title="lg" padding="lg">
      Roomy
    </Card>
  </div>
);
```

**`PaddingSizes.module.css`**

```css
.row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
```