❮ Previous Next ❯

Card Components

  • Build reusable card UI components.

  • Why Cards Are Important in UI

    Cards help users:

    • Scan information quickly

    • Understand relationships

    • Focus on one unit at a time

    • Navigate complex layouts

    Without cards:

    • UI looks cluttered

    • Content feels overwhelming

    • Layout lacks hierarchy

    Cards bring order and clarity.

    Common Use Cases of Cards

    Cards are used for:

    • Product cards (e-commerce)

    • Blog/article previews

    • User profile cards

    • Dashboard stats

    • Feature highlights

    • Pricing plans

    Cards are reusable building blocks.

    Basic Structure of a Card

    A typical card includes:

    • Container

    • Content area

    • Optional image/icon

    • Title

    • Description

    • Optional actions (button, link)

    Not all cards need all parts.

Basic Card Component Styling

This card uses Tailwind for clean layout, spacing, border, and shadow to create a simple UI component. 

<div
  class="bg-white
         border border-gray-200
         rounded-lg
         p-4
         shadow-sm"
>
  <h3 class="text-lg font-semibold text-gray-800">
    Card Title
  </h3>
  <p class="mt-2 text-sm text-gray-600">
    Card description goes here.
  </p>
</div>

  • Why This Card Works

    • White background → clarity

    • Border → separation

    • Rounded corners → modern feel

    • Padding → breathing space

    • Subtle shadow → depth

    This is industry-standard card styling.

Card with Image Layout

This card includes an image with content below, using Tailwind for layout, spacing, and clean UI design. 

<div class="bg-white border rounded-lg overflow-hidden shadow-sm">
  <img src="image.jpg" class="w-full h-40 object-cover" />
  <div class="p-4">
    <h3 class="text-lg font-semibold">Product Name</h3>
    <p class="text-sm text-gray-600 mt-1">
      Short product description
    </p>
  </div>
</div>

  • Key Points

    • overflow-hidden keeps rounded corners clean

    • Image stays inside card boundary

    • Content is clearly separated

Card with Action Button

This card includes a call-to-action button styled with Tailwind for better interaction and usability. 

<div class="bg-white border rounded-lg p-4 shadow-sm">
  <h3 class="text-lg font-semibold">Feature</h3>
  <p class="text-sm text-gray-600 mt-2">
    Feature description text.
  </p>
  <button
    class="mt-4 px-4 py-2
           bg-blue-500 text-white
           rounded-md
           hover:bg-blue-600
           transition"
  >
    Learn More
  </button>
</div>

  • Cards often lead to actions.

Card Hover Shadow Effect

This card increases shadow on hover to indicate interactivity using Tailwind’s transition utilities. 

<div
  class="bg-white border rounded-lg p-4
         shadow-sm
         hover:shadow-lg
         transition-shadow"
>
</div>

  • Hover effect should be:

    • Subtle

    • Smooth

    • Non-distracting

Responsive Card Grid Layout

This grid layout displays cards responsively using Tailwind’s column system and spacing utilities. 

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Card -->
</div>

  • This creates:

    • Responsive layouts

    • Clean spacing

    • Balanced UI

      Different Types of Cards

      1. Information Card

      • Title + description

      • No action

      • Used in dashboards

      2. Action Card

      • Content + button

      • Used in features

      3. Media Card

      • Image + content

      • Used in blogs/products

      4. Statistic Card

      • Number + label

      • Used in analytics dashboards

      Common Mistakes

      • Too much shadow

      • Inconsistent card sizes

      • Overloaded content

      • No spacing between cards

      • Hover effects without purpose

      If cards feel “heavy” → styling is wrong.

    ❮ Previous Next ❯