Card
Learn to use the Card component to build clickable, styled containers with icons, images, links, and CTAs in grid layouts.
The <Card> component is a clickable, styled container. Use it to link to other pages or group 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/card-example.webp?v=mrtvmucv">
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"). Renders in the Solid variant by default; add a style prefix like light/book to change the weight. See Icons.
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.