Install, configure, and publish your first page.
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 show features or to route readers to
other pages. The examples below cover a lone card, two- and three-column grids,
and the linked, icon-topped form.
Quick Start
One card with a title and a description.
Fast Builds
Turbopack-powered builds with sub-second hot reload.
content/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.
content/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.
→
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.
content/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
titlestringrequiredCard heading text, rendered as a small bold h3.
descriptionstringShort description below the title. Omit it and the card goes straight from the title to its children.
hrefstringWraps 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.
iconReactNodeNode rendered above the title in the brand color. An emoji, an arrow character, or a Lucide icon element all work.
childrenReactNodeExtra content below the description, in the same secondary text color.
Hovering tints the background and shifts the border toward the brand color, with
or without href.
CardGrid
cols2 | 3 | 4Default: 2Column 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.
childrenReactNoderequiredThe Card components to arrange in the grid, spaced 16px apart.
Column counts
2colsThe default. One column on a phone, two from the sm breakpoint up.
3colsOne column on a phone, two at sm, three at lg.
4colsOne column on a phone, two at sm, four at lg. Keep the descriptions short
at this width.
Related pages
Was this page helpful?