# Cards

A grid of links that sends readers to the right page.

Cards turn a home page or a section's first page into a set of clear choices. Each card has a title, a line of text and, usually, a link.

## Two columns

<CardGroup cols={2}>
<Card title="Callouts" href="https://justdocs.qdev.tech/docs/writing/callouts">
Six kinds of note, from a tip to a warning.
</Card>
<Card title="Code groups" href="https://justdocs.qdev.tech/docs/writing/code-groups">
One example in several languages.
</Card>
</CardGroup>

## Three columns

<CardGroup cols={3}>
<Card title="Images" href="https://justdocs.qdev.tech/docs/writing/images">
Screenshots with captions.
</Card>
<Card title="Diagrams" href="https://justdocs.qdev.tech/docs/writing/diagrams">
Flowcharts drawn from text.
</Card>
<Card title="Maths" href="https://justdocs.qdev.tech/docs/writing/maths">
Formulas, typeset properly.
</Card>
</CardGroup>

## When to use cards

- On home pages and section starts, where readers choose where to go.
- Keep the text to one line, so the cards line up.
- Two columns for a few big choices, three for more, shorter ones.