Card
Cards are versatile components for highlighting content, creating navigation links, or organizing information into distinct sections.
The <Card> component gives you a clickable, styled container for linking to other pages, showcasing features, or grouping related content. Pair cards with <Columns> to build grid layouts.
Usage
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Basic Card
A simple card with a title:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Card with Icon
Add an icon to make cards more visually distinctive:
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Card with Link
Cards can link to other pages:
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Card with Arrow
Add an arrow indicator to show the card links somewhere. Arrows appear automatically for external links, but you can enable them for internal links too:
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>External links show the arrow automatically:
<Card title="External Resource" href="https://example.com">
This card links to an external site.
</Card>Card with CTA
Add a call-to-action text below the card content:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Combine arrow and CTA for maximum emphasis:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Card with Image
Display an image at the top of the card:
<Card title="Visual Guide" img="/_jd/images/hero.png?v=mml1g89b">
A card featuring an image header.
</Card>Card Grid with Columns
Use Columns to arrange multiple cards in a responsive grid:
<Columns cols={2}>
<Card title="Quickstart" icon="rocket" href="/quickstart">
Get up and running in minutes.
</Card>
<Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
Step-by-step learning paths.
</Card>
<Card title="Examples" icon="flask" href="/components/overview">
Real-world code examples.
</Card>
</Columns>Three Column Layout
<Columns cols={3}>
<Card title="Docs" icon="book">
Documentation
</Card>
<Card title="API" icon="code">
API Reference
</Card>
<Card title="Blog" icon="newspaper">
Latest updates
</Card>
</Columns>Props
The title displayed at the top of the card.
Font Awesome icon name (e.g., "book", "code", "rocket"). Icons use the Light variant to match the documentation's clean style.
URL the card links to. Can be internal (/docs/intro) or external (https://example.com).
Path to an image displayed at the top of the card.
Shows an arrow indicator (↗) in the top-right corner. Automatically enabled for external links (URLs starting with http:// or https://). Set to true to show on internal links, or false to hide on external links.
Custom call-to-action text displayed below the card content. Only visible when href is also provided.
Columns Props
Number of columns in the grid. Accepts 1, 2, 3, or 4.