Cards and columns

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

Card

<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 →.

string

The card’s headline.

string

Turns the whole card into a link, with a full URL or a path like /blog/launch.

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.

string

A short line at the bottom, like “Read more”, which is text rather than a separate link.

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.

<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>

Three cards in a CardGroup on a Notra site — How it looks on your site

number

default:"2"

Columns from 1 to 4 on wide screens, while cards always stack on phones.

Styling

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

Get started

Domains

Write content

Components

Customize

Publish

Reference

Card

CardGroup

Styling

​Card

​CardGroup

​Styling

Card

CardGroup

Styling