Skip to main content

Cards

2 min readStableBeginner

Card renders a bordered panel with a heading, and CardGrid arranges several of them into a responsive grid. Use them to showcase features or to route readers to other pages.

Quick Start

One card with a title and a description.

Fast Builds

Turbopack-powered builds with sub-second hot reload.

app/features/components/cards.mdx
MDX
<Card
  title="Fast Builds"
  description="Turbopack-powered builds with sub-second hot reload."
/>

Adding Options

Wrap cards in CardGrid. Left alone it lays out two columns; cols takes 2, 3, or 4. Cards in the same row stretch to match the tallest one, so ragged description lengths still line up.

Fast Builds

Turbopack-powered builds.

MDX Support

Markdown with every React component on this site.

Fast Builds

Turbopack-powered builds.

MDX Support

Markdown with React components.

Full-Text Search

Scored search with Cmd+K.

app/features/components/cards.mdx
MDX
<CardGrid>
  <Card title="Fast Builds" description="Turbopack-powered builds." />
  <Card
    title="MDX Support"
    description="Markdown with every React component on this site."
  />
</CardGrid>
 
<CardGrid cols={3}>
  <Card title="Fast Builds" description="Turbopack-powered builds." />
  <Card title="MDX Support" description="Markdown with React components." />
  <Card title="Full-Text Search" description="Scored search with Cmd+K." />
</CardGrid>

Advanced

Add href to turn the whole card into a link, icon for a mark above the heading, and children for extra detail under the description. cols={4} packs the densest row: four across on a large screen, two on a tablet, one on a phone. The last card here drops description and uses children alone.

→

Introduction

Get oriented with OwnDocs.

Install, configure, and publish your first page.

→

Code blocks

See syntax highlighting in action.

Line numbers, diffs, and copy buttons.

⌄

Accordion

Collapsible sections for FAQs.

🚀

Deployment

No href, so this one renders as a plain panel instead of a link.

app/features/components/cards.mdx
MDX
<CardGrid cols={4}>
  <Card
    title="Introduction"
    description="Get oriented with OwnDocs."
    href="/getting-started/introduction"
    icon="→"
  >
    Install, configure, and publish your first page.
  </Card>
  <Card
    title="Code blocks"
    description="See syntax highlighting in action."
    href="/features/code/code-blocks"
    icon="→"
  >
    Line numbers, diffs, and copy buttons.
  </Card>
  <Card title="Accordion" href="/features/components/accordion" icon="⌄">
    Collapsible sections for FAQs.
  </Card>
  <Card title="Deployment" icon="🚀">
    No `href`, so this one renders as a plain panel instead of a link.
  </Card>
</CardGrid>

Options

Card

titlestringrequired

Card heading text, rendered as a small bold h3.

descriptionstring

Short description below the title. Omit it and the card goes straight from the title to its children.

hrefstring

Wraps the card in a Next.js Link to this path and removes the underline. Without it the card is a plain panel, not a link.

iconReactNode

Node rendered above the title in the brand color. An emoji, an arrow character, or a Lucide icon element all work.

childrenReactNode

Extra content below the description, in the same secondary text color.

Every card fills the height of its grid row, so a short card and a long card in the same row end up the same height. Hovering tints the background and shifts the border toward the brand color, with or without href.

CardGrid

cols2 | 3 | 4Default: 2

Column count at the widest breakpoint. See the three values below. A value outside them produces a grid with no column classes, so the cards stack.

childrenReactNoderequired

The Card components to arrange in the grid, spaced 16px apart.

Column counts

2cols

The default. One column on a phone, two from the sm breakpoint up.

3cols

One column on a phone, two at sm, three at lg.

4cols

One column on a phone, two at sm, four at lg. Keep the descriptions short at this width.

Related pages

Accordion

Comparison Table

Badge

Image Zoom

Was this page helpful?