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 card with a title:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Card with Icon
Add an icon:
<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 to show that the card is a link. External links get the arrow automatically. Turn it on for internal links with arrow={true}:
<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 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:
<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=mvplejaa">
A card featuring an image header.
</Card>Card Grid with Columns
Arrange cards in a responsive grid with Columns:
<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. Shows only when href is set.
Columns Props
Number of columns in the grid. Accepts 1, 2, 3, or 4.