> ## Documentation Index
> Fetch the complete documentation index at: https://www.usenotra.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards and columns

> Link to other pages with cards, and lay them out in a grid.

Cards link to other pages with a title, a short text and an optional image, and `CardGroup` lays them out in a grid.

## Card

```mdx theme={"system"}
<Card title="Read the docs" href="https://acme.com/docs" cta="Open the docs">
  Guides and API reference for Acme Flow.
</Card>
```

A card with `href` is a link, where full URLs get a ↗ after the title and paths like `/blog/launch` get a →.

<ResponseField name="title" type="string">
  The card's headline.
</ResponseField>

<ResponseField name="href" type="string">
  Turns the whole card into a link, with a full URL or a path like `/blog/launch`.
</ResponseField>

<ResponseField name="img" type="string">
  An image shown across the top of the card, cropped to 16:9, as a path like `/images/cover.png` or a full URL.
</ResponseField>

<ResponseField name="cta" type="string">
  A short line at the bottom, like "Read more", which is text rather than a separate link.
</ResponseField>

Links inside a card that has an `href` show as plain text, because a link can't contain another link.

## CardGroup

`CardGroup` puts cards side by side, and `Columns` is the same component under another name.

```mdx theme={"system"}
<CardGroup cols={3}>
  <Card title="Plan" href="/blog/plan">Shape the release.</Card>
  <Card title="Ship" href="/blog/ship">Publish everywhere.</Card>
  <Card title="Measure" href="/blog/measure">See what worked.</Card>
</CardGroup>
```

<Frame caption="How it looks on your site">
  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/cards-light.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=369832fd8b7bad6d9cd85fee7cee09d2" alt="Three cards in a CardGroup on a Notra site" className="block dark:hidden" width="1824" height="816" data-path="images/sites/components/cards-light.webp" />

  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/cards-dark.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=d944073d0ef4341fb65d8009bb0ce887" alt="Three cards in a CardGroup on a Notra site" className="hidden dark:block" width="1824" height="816" data-path="images/sites/components/cards-dark.webp" />
</Frame>

<ResponseField name="cols" type="number" default="2">
  Columns from 1 to 4 on wide screens, while cards always stack on phones.
</ResponseField>

## Styling

Cards carry the class `card` and groups carry `card-group` and `columns`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.