Skip to main content

​
Overview

Flexible card component for content containers. Cards provide a consistent way to display grouped content with proper spacing and styling.

​
Card Base

Card Base

.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px;
}

​
Examples

​
Basic Card

<div class="card">
  <h3 class="text-xl font-semibold mb-4">Card Title</h3>
  <p class="text-gray">Card content goes here.</p>
</div>

​
Bordered Card

<div class="card border border-gray-light">
  <h3 class="text-xl font-semibold mb-4">Bordered Card</h3>
  <p class="text-gray">Card with border</p>
</div>

​
Card with Button

<div class="card p-6">
  <h3 class="text-xl font-semibold mb-4">Card with Button</h3>
  <p class="text-gray mb-4">Card content with action button</p>
  <button class="btn btn-blue">Action</button>
</div>

​
Common Patterns

​
Card Grid

<div class="flex flex-wrap gap-6">
  <div class="w-1-3">
    <div class="card p-6">
      <h3 class="text-xl font-semibold mb-4">Card Title</h3>
      <p class="text-gray mb-4">Card content</p>
      <button class="btn btn-blue">Learn More</button>
    </div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">
      <h3 class="text-xl font-semibold mb-4">Card Title</h3>
      <p class="text-gray mb-4">Card content</p>
      <button class="btn btn-blue">Learn More</button>
    </div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">
      <h3 class="text-xl font-semibold mb-4">Card Title</h3>
      <p class="text-gray mb-4">Card content</p>
      <button class="btn btn-blue">Learn More</button>
    </div>
  </div>
</div>

​
Card with Accent Border

<div class="card border-l-4 border-blue p-6">
  <h3 class="text-xl font-semibold mb-2">Card Title</h3>
  <p class="text-gray">Card content with blue accent border</p>
</div>

​
Card with Image

<div class="card p-0 overflow-hidden">
  <img src="image.jpg" class="w-full h-48 object-cover" alt="Card image">
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-4">Card Title</h3>
    <p class="text-gray">Card content with image</p>
  </div>
</div>

​
Best Practices

  • Consistent padding: Use consistent padding values (p-4, p-6) for card content
  • Clear hierarchy: Use headings and spacing to create visual hierarchy
  • Combine with utilities: Use border, background, and spacing utilities to customize cards
  • Responsive design: Use flexbox and width utilities for responsive card grids

Button

Button component

Container

Container component

Borders

Border utilities

Components Overview

Complete components overview