# Card

A padded block that groups related content, such as a summary metric or a set of settings. It has no border or background of its own unless it is a link.

```tsx
// demo.tsx
import {Card} from '@earendil-works/elanor-react';

export default function CardDemo() {
  return <Card label="Active projects" value="12" description="Across three teams" />;
}
```

## Usage

```tsx
import {Card} from '@earendil-works/elanor-react';

<Card label="Active projects" value="12" description="Across three teams" />;
```

`label`, `value`, and `description` lay out a summary metric. Children replace that layout.

## Custom content

```tsx
// custom-content.tsx
import {Card, Heading, Link, Stack, Text} from '@earendil-works/elanor-react';

export default function CardCustomContent() {
  return (
    <Card>
      <Stack gap="small">
        <Heading level={3}>Workspace settings</Heading>
        <Text>Manage members, billing, and security for your workspace.</Text>
        <Link href="#">Open settings</Link>
      </Stack>
    </Card>
  );
}
```

## Link

Use `render={<a href="…" />}` to make the whole card a link. Linked cards get a border, so the whole target is visible.

```tsx
// link.tsx
import {Card, Heading, Text} from '@earendil-works/elanor-react';

export default function CardLink() {
  return (
    <Card render={<a href="#" />}>
      <Heading level={3}>Workspace settings</Heading>
      <Text>Manage members, billing, and security for your workspace.</Text>
    </Card>
  );
}
```

The link's accessible name is all of the card's text, so keep it short. Don't put other links or buttons inside; use [custom content](#custom-content) with a separate link instead.

## API

### `Card`

A padded block for related content. Renders a `div` by default; render an `<a>` to make the whole card a link, which gets hover and focus styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | - | Names the metric, such as "Active projects". Ignored when `children` is set. |
| `value` | `ReactNode` | - | The metric, such as a count. Ignored when `children` is set. |
| `description` | `ReactNode` | - | Supporting text below the metric. Ignored when `children` is set. |
| `padded` | `boolean` | `true` | Adds inner padding. Set `false` for edge-to-edge content. |
| `children` | `ReactNode` | - | Custom content, replacing the metric layout. |

Renders `<div>`. Also accepts its HTML attributes, `ref`, and `render`.