Card Rails Components
A card is a flexible and extensible content container with multiple variants and options.
Examples
Basic Card
A simple card component with shadow and rounded corners, perfect for containing any type of content.
Basic Card
This is a basic card component with a simple shadow and rounded corners. It can contain any content you need.
<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-neutral-900 dark:text-white">Basic Card</h3>
<div class="mt-2 max-w-xl text-sm text-neutral-600 dark:text-neutral-400">
<p>This is a basic card component with a simple shadow and rounded corners. It can contain any content you need.</p>
</div>
<div class="mt-3">
<button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
Action Button
</button>
</div>
</div>
</div>Card with Header
A card with a distinct header section separated by a divider for better content organization.
Card with Header
This card has a header section separated by a divider
The header section helps organize content and provides a clear title for the card. The divider creates visual separation between the header and body content.
<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden divide-y divide-black/10 dark:divide-white/10">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-neutral-900 dark:text-white">
Card with Header
</h3>
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
This card has a header section separated by a divider
</p>
</div>
<div class="px-4 py-5 sm:p-6">
<p class="text-neutral-700 dark:text-neutral-300">
The header section helps organize content and provides a clear title for the card. The divider creates visual separation between the header and body content.
</p>
<div class="mt-4">
<a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>Card with Footer
A card with a footer section for actions, links, or additional information.
Card with Footer
This card includes a footer section that can contain actions, links, or additional information. The footer provides a natural place for CTAs or metadata.
<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-neutral-900 dark:text-white mb-2">Card with Footer</h3>
<p class="text-neutral-700 dark:text-neutral-300">
This card includes a footer section that can contain actions, links, or additional information. The footer provides a natural place for CTAs or metadata.
</p>
</div>
<div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-4 sm:px-6 border-t border-black/10 dark:border-white/10">
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
View details<span class="sr-only"> about card with footer</span>
</a>
</div>
</div>
</div>Card with Header and Footer
A complete card structure with header, body, and footer sections.
Complete Card
Header, body, and footer sections
This card demonstrates a complete structure with header, body, and footer sections. Each section serves a specific purpose:
- Header: Title and description
- Body: Main content area
- Footer: Actions and links
<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
<div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-5 sm:px-6 border-b border-black/10 dark:border-white/10">
<h3 class="text-lg leading-6 font-medium text-neutral-900 dark:text-white">
Complete Card
</h3>
<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
Header, body, and footer sections
</p>
</div>
<div class="px-4 py-5 sm:p-6">
<div class="text-neutral-700 dark:text-neutral-300">
<p class="mb-4">This card demonstrates a complete structure with header, body, and footer sections. Each section serves a specific purpose:</p>
<ul class="list-disc list-inside space-y-1 text-sm">
<li>Header: Title and description</li>
<li>Body: Main content area</li>
<li>Footer: Actions and links</li>
</ul>
</div>
</div>
<div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-4 sm:px-6 border-t border-black/10 dark:border-white/10">
<div class="flex justify-between">
<button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
Cancel
</button>
<button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
Save Changes
</button>
</div>
</div>
</div>Edge-to-Edge on Mobile
A responsive card that extends to full width on mobile devices and returns to standard appearance on larger screens.
Edge-to-Edge on Mobile
This card extends to the full width of the viewport on mobile devices, removing rounded corners and side margins. On larger screens, it returns to the standard card appearance with rounded corners and shadows.
Resize your browser to see the responsive behavior
<div class="bg-white dark:bg-neutral-800 border-y sm:border border-black/10 dark:border-white/10 overflow-hidden shadow-xs sm:rounded-xl">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-neutral-900 dark:text-white mb-2">Edge-to-Edge on Mobile</h3>
<p class="text-neutral-700 dark:text-neutral-300">
This card extends to the full width of the viewport on mobile devices, removing rounded corners and side margins. On larger screens, it returns to the standard card appearance with rounded corners and shadows.
</p>
</div>
<div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-4 sm:px-6 border-t border-black/10 dark:border-white/10">
<div class="text-sm text-neutral-500 dark:text-neutral-400">
Resize your browser to see the responsive behavior
</div>
</div>
</div>Well Card
A subtle container with background color and no shadow, ideal for secondary content areas.
Well Card
A well is a simple container with a subtle background color and no shadow. It's perfect for grouping related content without the visual weight of a full card.
<div class="bg-neutral-50 dark:bg-neutral-900/50 rounded-xl px-6 py-5 border border-black/10 dark:border-white/10">
<h3 class="text-lg font-medium leading-6 text-neutral-900 dark:text-white mb-2">Well Card</h3>
<p class="text-neutral-700 dark:text-neutral-300">
A well is a simple container with a subtle background color and no shadow. It's perfect for grouping related content without the visual weight of a full card.
</p>
</div>Card with Image
A content card with a featured image, perfect for blog posts, articles, or media-rich content.
Article
5 min read
Card with Featured Image
This card includes a featured image at the top, perfect for blog posts, articles, or any content that benefits from visual representation. The image uses aspect ratio utilities for consistent sizing.
John Doe
September 16, 2025
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xs overflow-hidden border border-black/10 dark:border-white/10">
<div class="aspect-w-16 aspect-h-9 bg-neutral-200 dark:bg-neutral-700">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="Card image" class="w-full h-full object-center object-cover">
</div>
<div class="px-6 py-4">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
Article
</span>
<span class="ml-2 text-sm text-neutral-500 dark:text-neutral-400">5 min read</span>
</div>
<h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
Card with Featured Image
</h3>
<p class="text-neutral-700 dark:text-neutral-300 text-sm">
This card includes a featured image at the top, perfect for blog posts, articles, or any content that benefits from visual representation. The image uses aspect ratio utilities for consistent sizing.
</p>
</div>
<div class="px-6 py-4 bg-neutral-50 dark:bg-neutral-900/50 border-t border-black/10 dark:border-white/10">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Author">
<div class="ml-3">
<p class="text-sm font-medium text-neutral-900 dark:text-white">John Doe</p>
<p class="text-xs text-neutral-500 dark:text-neutral-400">September 16, 2025</p>
</div>
</div>
<button type="button" class="text-neutral-400 hover:text-neutral-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
</svg>
</button>
</div>
</div>
</div>Stats Card
A card designed for displaying statistics, metrics, and progress indicators in dashboards.
12.5%
from last month
Progress to goal
72%
<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 overflow-hidden rounded-xl shadow-xs">
<div class="px-4 py-5 sm:p-6">
<dt class="text-sm font-medium text-neutral-500 dark:text-neutral-400 truncate">
Total Revenue
</dt>
<dd class="mt-1 text-3xl font-semibold text-neutral-900 dark:text-white">
$71,897
</dd>
<div class="mt-4">
<div class="flex items-baseline">
<span class="text-sm font-medium text-green-600 dark:text-green-400">
<svg class="self-center inline-block w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
12.5%
</span>
<span class="ml-2 text-sm text-neutral-500 dark:text-neutral-400">
from last month
</span>
</div>
<div class="mt-3">
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div>
<span class="text-xs font-semibold inline-block text-neutral-600 dark:text-neutral-400">
Progress to goal
</span>
</div>
<div class="text-right">
<span class="text-xs font-semibold inline-block text-neutral-600 dark:text-neutral-400">
72%
</span>
</div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-neutral-200 dark:bg-neutral-700">
<div style="width:72%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
</div>
</div>
</div>
</div>
</div>
</div>