Card

A card is a titled surface around any content. Use it to group related blocks, to give a sidebar a boundary, or to make a call to action stand out. The bracketed argument is the title; tone picks one of five semantic tones and compact tightens the padding. Cards nest, with a longer outer fence.

In the downgrade the title becomes a heading one level below the current section, so the document outline stays intact.

Attributes

The argument is the title and may contain inline markup. Content is anything at all, including nothing.

Downgrade: the title becomes a heading one level below the current section, capped at six, and the body follows as ordinary blocks. The current level is that of the most recent heading in the output, so a card inside a section does not flatten the outline.

Watch for: a setext heading or an indented code block directly after the opening fence. Both read differently once the fence is gone, and the validator warns. A blank line after the fence avoids it.

Examples

The bracketed argument is the title and tone picks one of five semantic tones. Neither names a color.

:::card[Pricing tiers]{tone=info}
Content here.
:::

# Pricing tiers

Content here.

All five tones side by side. What each one looks like is the theme's decision, not the document's.

:::card{tone=danger}
:::

:::card{tone=success}
:::

(empty)

Any block content is allowed, including none. A card is a boundary, not a content type.

:::card
# H

- a

```
code
```
:::

code

# H

- a

```
code
```

The rule that matters when nesting: the outer fence must be longer than the inner one, exactly as with code fences.

::::card[Outer]
:::card[Inner]
x
:::
::::

# Outer

## Inner

x

What the validator catches

Every error below is specified; nothing degrades silently.

:::card{tone=purple}
x
:::

:::card{compact=yes}
:::

:::card{tone=x size=y}
:::

All 16 cases for card are in the conformance browser. The normative text is spec §4.