Card

Cards are flexible content containers used to group related information. The Card component includes sections for images, titles, descriptions, and action buttons. It supports various layouts like side-by-side or stacked. You can customize borders, shadows, and padding to fit your specific design.

Basic Usage

html

Water bottle

Card Title

The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.

<div class="card shadow w-88">
  <figure>
    <img src="https://images.unsplash.com/photo-1700225195141-30a6a826cef8?q=80&w=480&height=240&auto=format&fit=crop" alt="Water bottle">
  </figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>

Card Colors

html

Default card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Primary card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Secondary card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Accent card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Info card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Success card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Warning card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Error card

A card component has a figure and a body part, which contains the title, description, and actions parts.

Neutral card

A card component has a figure and a body part, which contains the title, description, and actions parts.

<div class="card w-88">
  <div class="card-body">
    <h2 class="card-title">Default card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-primary w-88">
  <div class="card-body">
    <h2 class="card-title">Primary card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-secondary w-88">
  <div class="card-body">
    <h2 class="card-title">Secondary card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-accent w-88">
  <div class="card-body">
    <h2 class="card-title">Accent card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-info w-88">
  <div class="card-body">
    <h2 class="card-title">Info card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-success w-88">
  <div class="card-body">
    <h2 class="card-title">Success card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-warning w-88">
  <div class="card-body">
    <h2 class="card-title">Warning card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-error w-88">
  <div class="card-body">
    <h2 class="card-title">Error card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-neutral w-88">
  <div class="card-body">
    <h2 class="card-title">Neutral card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

Pricing Card

html

Most Popular

Startup

$49/mo

25 websites
150 templates
Advanced eCommerce
eCommerce features
Unlimited storage space
Priority support

<div class="card card-outline w-88">
  <div class="card-body">
    <span class="badge badge-xs badge-warning">Most Popular</span>
    <div class="flex justify-between items-center">
      <h2 class="text-3xl font-bold">Startup</h2>
      <span class="text-xl">$49/mo</span>
    </div>
    <ul class="mt-6 flex flex-col gap-2 text-xs">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>25 websites</span>
      </li>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>150 templates</span>
      </li>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>Advanced eCommerce</span>
      </li>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>eCommerce features</span>
      </li>
      <li class="opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span class="line-through">Unlimited storage space</span>
      </li>
      <li class="opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span class="line-through">Priority support</span>
      </li>
    </ul>
    <div class="mt-6">
      <button type="button" class="btn btn-primary btn-block">Choose plan</button>
    </div>
  </div>
</div>

Card Styles

Outline Card

html

Product Card

Highlight product descriptions, prices, and call-to-action buttons in an attractive, responsive card format.

<div class="card card-outline w-88">
  <div class="card-body">
    <h2 class="card-title">Product Card</h2>
    <p>
      Highlight product descriptions, prices, and call-to-action buttons in an attractive, responsive card format.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-sm btn-primary">Check out</button>
    </div>
  </div>
</div>

Dashed Card

html

Testimonial Card

Display client feedback or reviews on a tiny card to boost your site's reputation and trust.

<div class="card card-dashed w-88">
  <div class="card-body">
    <h2 class="card-title">Testimonial Card</h2>
    <p>
      Display client feedback or reviews on a tiny card to boost your site's reputation and trust.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-sm btn-primary">View all reviews</button>
    </div>
  </div>
</div>

Image Placement

Top Image

html

Shoes

Blog Post Card
NEW

For rapid access to complete articles and simple browsing, present blog summaries with titles, photos, and quotes.

Fashion

Products

<div class="card w-88 shadow-sm">
  <figure>
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=400&height=200&auto=format&fit=crop" alt="Shoes">
  </figure>
  <div class="card-body">
    <h2 class="card-title">
      Blog Post Card
      <div class="badge badge-xs badge-secondary">NEW</div>
    </h2>
    <p>
      For rapid access to complete articles and simple browsing, present blog summaries with titles, photos, and quotes.
    </p>
    <div class="flex gap-3 justify-end">
      <div class="badge badge-sm">Fashion</div>
      <div class="badge badge-sm">Products</div>
    </div>
  </div>
</div>

Bottom Image

html

PageSpeed Insight
NEW

Frutjam.com is built with the Frutjam UI library and achieves excellent Google PageSpeed Insights scores, showing fast load times, strong accessibility, adherence to best practices, and full SEO compliance.

Fashion

Products

PageSpeed Insight

<div class="card w-88 shadow-sm">
  <div class="card-body">
    <h2 class="card-title">
      PageSpeed Insight
      <div class="badge badge-xs badge-secondary">NEW</div>
    </h2>
    <p>
      Frutjam.com is built with the Frutjam UI library and achieves excellent Google PageSpeed Insights scores, showing fast load times, strong accessibility, adherence to best practices, and full SEO compliance.
    </p>
    <div class="flex gap-3 justify-end">
      <div class="badge badge-sm">Fashion</div>
      <div class="badge badge-sm">Products</div>
    </div>
  </div>
  <figure>
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=400&height=200&auto=format&fit=crop" alt="PageSpeed Insight">
  </figure>
</div>

Responsive Card Layout

html

A responsive figure example — A responsive image with a caption

Responsive card title
NEW

On desktop, the image and content are displayed side by side (image on the left), but on mobile, they are stacked vertically. The photos used for desktop and mobile views are different.

Fashion

Products

<div class="card w-160 shadow-sm">
  <div class="grid grid-cols-12">
    <div class="col-span-12 lg:col-span-5">
      <figure>
        <picture>
          <!--  Image for devices 768px and wider -->
          <source media="(min-width: 768px)" srcset="https://images.unsplash.com/photo-1518365050014-70fe7232897f?q=80&w=400&height=400&auto=format&fit=crop"></source>
          <!-- Image for devices less than 768px -->
          <img src="https://images.unsplash.com/photo-1545334894-9c7a7ccefaf8?q=80&w=400&height=400&auto=format&fit=crop" alt="A responsive figure example">
        </picture>
        <figcaption class="mt-1 text-xs p-2">A responsive image with a caption</figcaption>
      </figure>
    </div>
    <div class="col-span-12 lg:col-span-7">
      <div class="card-body">
        <h2 class="card-title">
          Responsive card title
          <div class="badge badge-xs badge-secondary">NEW</div>
        </h2>
        <p>On desktop, the image and content are displayed side by side (image on the left), but on mobile, they are stacked vertically. The photos used for desktop and mobile views are different.</p>
        <div class="flex gap-3 justify-end">
          <div class="badge badge-accent badge-sm">Fashion</div>
          <div class="badge badge-accent badge-sm">Products</div>
        </div>
      </div>
    </div>
  </div>
</div>