# Card

> A bordered surface that holds one piece of content: a title, a description, a body and a footer. `elevation="hard"` lifts it with a hard shadow, and `lift` makes it rise on hover or focus.

Source: https://ritla.app/ui/card

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add card
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/card
```

## Usage

```tsx
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

<Card elevation="hard" lift render={<a href="/statements" />}>
  <CardHeader>
    <CardTitle>Statements</CardTitle>
  </CardHeader>
  <CardDescription>Download a month as a PDF.</CardDescription>
</Card>
```

## API reference

### `Card`

Any other `div` prop passes through.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `elevation` | `"none" \| "hard"` | `"none"` | Figma's Elevation: `hard` is a brand outline and a 6px hard shadow toward the inline end and down. |
| `surface` | `"page" \| "band"` | `"page"` | What the card sits on: `band` is the sky band, where the shadow is one step darker. |
| `lift` | `boolean` | `false` | Figma's State = Hover: rises 3px toward the inline start and up, its shadow growing to 9px, on hover or focus. For a card that is a link. |
| `render` | `ReactElement` | None | Another element with the card's look, usually a link; it keeps its own semantics. |

### `CardTitle`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"h2" \| "h3" \| "h4"` | `"h3"` | The heading level in the page's outline. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: To the card when it is a link.

ARIA:

- The card itself is a `div` with no role; its title is a real heading (`h3` by default).
- A `lift` card is one link: its name is all its text, so put the title first.
- The movement on hover does not run when the reader asks for reduced motion; the shadow stays.

## Arabic and RTL notes

Mirrors:

- The hard shadow falls bottom-left in Arabic, bottom-right in English.
- When it lifts, the card moves toward the inline start: to the right in Arabic.
- The title at the start, the action at the header's end.

Does not mirror:

- The upward movement doesn't change.

Numerals: Numbers in your content follow the numerals setting through `formatNumber`.

Arabic typography: Title `body-14` Semibold, description `body-14`.

Mixed-direction text: Isolate amounts and Latin identifiers inside Arabic text.