# Card

A card groups a heading and a few lines in a bordered block. Cards are usually placed in a
[grid](/grid).

## Live demo

<StoryEmbed slug="card" />

## Syntax

```md title="Markdown"
:::card
### 🚀 Lorem ipsum
- Dolor sit amet
- Consectetur adipiscing
:::
```

```mdx title="MDX"
<Card title="Lorem ipsum">Dolor sit amet.</Card>
```

## Attributes and props

| Prop        | Type     | Default | Description                  |
| ----------- | -------- | ------- | ---------------------------- |
| `title`     | `string` | —       | Optional heading (MDX only)  |
| `className` | `string` | —       | Extra CSS classes (MDX only) |

In Markdown, the first heading inside the card plays the role of the title.

## In other formats

<FormatSupport />