Card

A card brings a heading and the text related to it together on a separate surface. Choose it for short explanations, choices and small groups of links; put several cards in a grid.

Example

:::card
### A portable project

Markdown and JSON can live next to the code and be reviewed through Git.
:::

Markup

:::card
### A clear heading

Short related content.
:::

• Start the card with a heading: it names the card’s content.
• Inside is plain Markdown. Docara blocks (:::) do not nest inside a card.

Variants

Look

variant=plain removes the border, background and padding: this way the card fits into another surface, for example a band or a grid with a shared background.

:::card
### Styled

A surface, a border and inner padding.
:::

:::card {variant=plain}
### Unstyled

Only the content, without its own surface.
:::

Accessibility

• A card is a landmark region (section) with its own heading: screen readers move through it like a section of the page.
• Choose the heading level by its place on the page: ### for a card inside a ## section.
• Do not make a card just for a border around long text: a long article reads better without it.

Parameters

See also

• Grid — several cards in a row
• Surface — a background for a group of blocks
• Landing blocks — feature cards