Skip to main content
The Card component is a versatile container for displaying content with support for icons, header images, links, and call-to-action buttons. It automatically handles external link detection and provides hover effects.

​
Basic Usage

<Card title="Default Card">
  This is a basic card with just a title and content.
</Card>

​
Props

​
title
ReactNode
The title displayed at the top of the card. Prefer using a string value for better compatibility with accessibility and semantic HTML.
​
icon
ReactNode | string
Icon to display in the card. Can be:
  • A string icon name (e.g., "cat", "bolt") from Font Awesome or Lucide
  • An image URL (will be rendered as an <img> tag)
  • A custom React component/element
​
iconType
IconType
Type of Font Awesome icon. Options: "solid", "regular", "light", "duotone", "thin", "sharp-solid", "brands"Only used when icon is a string and not an image URL.
​
iconLibrary
IconLibrary
Icon library to use. Options: "fontawesome", "lucide"Only used when icon is a string.
​
color
string
Custom color for the icon. Accepts any CSS color value (hex, rgb, etc.). When provided, overrides the default icon color.
​
img
string
URL of a header image to display at the top of the card, above the title and content.
​
horizontal
boolean
default:false
When true, displays the card content in a horizontal layout with the icon and text side by side.
​
href
string
URL to navigate to when the card is clicked. Makes the entire card clickable. External URLs automatically open in a new tab.
​
cta
string
Call-to-action text displayed at the bottom of the card with an arrow icon.
​
arrow
boolean
Controls display of the arrow icon in the top-right corner. By default, arrows are shown for external links. Set explicitly to true or false to override.
​
disabled
boolean
default:false
When true, disables the card link and shows reduced opacity for the CTA.
​
as
ElementType
Custom component to render as the root element. Useful for integrating with routing libraries like Next.js Link or React Router Link.
​
className
string
Additional CSS classes to apply to the card container.
​
children
ReactNode
The main content to display inside the card.

​
Examples

​
Icons

<Card title="Card with Icon" icon="heart" iconType="solid">
  This card uses a Font Awesome solid icon.
</Card>

​
Layouts

<Card title="Vertical Card" icon="bolt">
  This card displays content in a vertical layout.
</Card>

<Card title="Clickable Card" icon="cat" href="/docs/getting-started">
  This card is a link. Click it to navigate.
</Card>

​
Card States

Disabled Card
<Card 
  title="Disabled Card" 
  icon="heart" 
  href="/some-page" 
  cta="Try to click" 
  disabled={true}
>
  This card is disabled and cannot be clicked.
</Card>
Use the as prop to integrate with routing libraries:
Next.js Example
import Link from 'next/link';

<Card 
  as={Link} 
  href="/custom-route" 
  icon="bolt" 
  title="Using Custom Link Component"
>
  This card uses Next.js Link via the "as" prop.
</Card>
The as prop accepts any component that forwards standard link props including href.
<Card
  title="Premium Feature"
  icon="fire"
  color="#f59e0b"
  img="https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800"
  href="/premium"
  cta="Upgrade now"
  arrow={true}
>
  Get access to all premium features with our upgraded plan.
</Card>

​
Card Grid

<div className="grid grid-cols-2 gap-4">
  <Card cta="Begin" href="/start" icon="rocket" title="Getting Started">
    Start building with our platform.
  </Card>
  <Card cta="Explore" href="/features" icon="fire" title="Features">
    Discover all the powerful features.
  </Card>
  <Card cta="Join" href="/community" icon="users" title="Community">
    Join our growing community.
  </Card>
  <Card cta="Get Help" href="/support" icon="circle-check" title="Support">
    Get help when you need it.
  </Card>
</div>

​
Styling

The Card component automatically adapts to light and dark themes. Customize the appearance using the className prop: 
<Card
  title="Card with Custom Styles"
  icon="heart"
  className="shadow-lg border-4 border-blue-500"
>
  This card has custom styling applied via the className prop.
</Card>

​
Hover Effects

Cards with an href prop automatically receive hover effects:
  • Primary color border on hover
  • Primary color CTA text on hover (when not disabled)
  • Focus ring for keyboard navigation
External links (URLs starting with http:// or https://) automatically open in a new tab with target="_blank" and rel="noreferrer" for security.

​
Accessibility

The Card component includes built-in accessibility features:
  • Semantic HTML structure with proper heading hierarchy
  • Focus indicators for keyboard navigation
  • Support for screen readers with proper alt text for images
  • Disabled state properly communicated to assistive technologies

Build docs developers (and LLMs) love

Get started for freeTalk to us