Tailwind CSS Cards

Use responsive cards component with helper examples for cards ui, horizontal cards, card height, cards with image & more. Free download, open-source license.

Basic examples

Simple

Use the following simple card component with a title and description.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML
javascript

<div
  class="block rounded-lg bg-white p-6 text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
  <p class="mb-4 text-base">
    Some quick example text to build on the card title and make up the
    bulk of the card's content.
  </p>
  <button
    type="button"
    class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
    data-twe-ripple-init
    data-twe-ripple-color="light">
    Button
  </button>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Image

You can use the following example of a card element with an image for blog posts, user cards, and many more.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML
javascript

<div
  class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark">
  <a href="#!">
    <img
      class="rounded-t-lg"
      src="https://tecdn.b-cdn.net/img/new/standard/nature/184.jpg"
      alt="" />
  </a>
  <div class="p-6 text-surface dark:text-white">
    <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
    <p class="mb-4 text-base">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
    <button
      type="button"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Button
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Image with ripple

Indicate the point of touch with user input to screen reactions using ripple on card image.

Click the image to see the effect

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML
javascript

<div
  class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark">
  <div
    class="relative overflow-hidden bg-cover bg-no-repeat"
    data-twe-ripple-init
    data-twe-ripple-color="light">
    <img
      class="rounded-t-lg"
      src="https://tecdn.b-cdn.net/img/new/standard/nature/186.jpg"
      alt="" />
    <a href="#!">
      <div
        class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsla(0,0%,98%,0.15)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
    </a>
  </div>
  <div class="p-6 text-surface dark:text-white">
    <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
    <p class="mb-4 text-base">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
    <button
      type="button"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Button
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Header and footer

Add optional header and footer sections to the card.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

2 days ago

HTML
javascript

<div
  class="block rounded-lg bg-white text-center text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div
    class="border-b-2 border-neutral-100 px-6 py-3 dark:border-white/10">
    Featured
  </div>
  <div class="p-6">
    <h5 class="mb-2 text-xl font-medium leading-tight ">
      Special title treatment
    </h5>
    <p class="mb-4 text-base ">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Button
    </button>
  </div>
  <div
    class="border-t-2 border-neutral-100 px-6 py-3 text-surface/75 dark:border-white/10 dark:text-neutral-300">
    2 days ago
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a card is the div with p-6 class. Use it whenever you need a padded section within a card.

This is some text within a card body.

HTML

<div
  class="block w-full rounded-lg bg-white text-left text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div class="p-6">
    <p class="text-base">This is some text within a card body.</p>
  </div>
</div>

Titles, text and links

Tailwind CSS classes beautifully style card titles, text, and links, creating a captivating and user-friendly experience.

Special title treatment

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Link Another Link

HTML

<div
  class="block max-w-[18rem] rounded-lg bg-white text-left text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div class="p-6">
    <h5 class="mb-1 text-xl font-medium leading-tight ">
      Special title treatment
    </h5>
    <h6
      class="mb-2 text-base font-medium leading-tight text-surface/75 dark:text-neutral-300">
      Card subtitle
    </h6>
    <p class="mb-4 text-base leading-normal">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
    <a
      type="button"
      href="#"
      class="pointer-events-auto me-5 inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:text-primary-400">
      Card Link
    </a>
    <a
      type="button"
      href="#"
      class="pointer-events-auto inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:text-primary-400">
      Another Link
    </a>
  </div>
</div>

Images

The following example illustrates the card using Tailwind CSS classes, resulting in image being positioned at the top of each card.

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML

<div
  class="block max-w-[18rem] rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div class="relative overflow-hidden bg-cover bg-no-repeat">
    <img
      class="rounded-t-lg"
      src="https://tecdn.b-cdn.net/img/new/standard/nature/182.jpg"
      alt="" />
  </div>
  <div class="p-6">
    <p class="text-base">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
  </div>
</div>

List groups

Create lists of content in a card with a flush list group.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

HTML

<div
  class="block w-full max-w-[18rem] rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <ul class="w-full">
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 p-4  dark:border-white/10">
      Cras justo odio
    </li>
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 p-4  dark:border-white/10">
      Dapibus ac facilisis in
    </li>
    <li class="w-full p-4">Vestibulum at eros</li>
  </ul>
</div>

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

HTML

<div
  class="block w-full max-w-[18rem] rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div
    class="border-b-2 border-neutral-100 border-opacity-100 p-4  dark:border-white/10">
    Featured
  </div>
  <ul class="w-full">
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3  dark:border-white/10">
      Cras justo odio
    </li>
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3  dark:border-white/10">
      Dapibus ac facilisis in
    </li>
    <li class="w-full px-4 py-3">Vestibulum at eros</li>
  </ul>
</div>

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card footer

HTML

<div
  class="block w-full max-w-[18rem] rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <ul class="w-full">
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3  dark:border-white/10">
      Cras justo odio
    </li>
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3  dark:border-white/10">
      Dapibus ac facilisis in
    </li>
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3  dark:border-white/10">
      Vestibulum at eros
    </li>
  </ul>
  <div
    class="rounded-lg border-neutral-100 bg-zinc-50 p-4 dark:border-white/10 dark:bg-neutral-700">
    Card footer
  </div>
</div>

Kitchen sink

Mix and match multiple content types to create the card you need, or throw everything in there.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card Link Another Link

HTML

<div
  class="block max-w-[18rem] rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div class="relative overflow-hidden bg-cover bg-no-repeat">
    <img
      class="rounded-t-lg"
      src="https://tecdn.b-cdn.net/img/new/standard/city/062.jpg"
      alt="" />
  </div>
  <div class="p-6">
    <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
    <p class="text-base">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
  </div>
  <ul class="w-full">
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-6 py-3  dark:border-white/10">
      Cras justo odio
    </li>
    <li
      class="w-full border-b-2 border-neutral-100 border-opacity-100 px-6 py-3  dark:border-white/10">
      Dapibus ac facilisis in
    </li>
    <li
      class="w-full border-neutral-100 border-opacity-100 px-6 py-3  dark:border-white/10">
      Vestibulum at eros
    </li>
  </ul>
  <div class="p-6">
    <a
      type="button"
      class="pointer-events-auto me-5 inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:text-primary-400">
      Card Link
    </a>
    <a
      type="button"
      class="pointer-events-auto inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:text-primary-400">
      Another Link
    </a>
  </div>
</div>

Header and footer

Add an optional header and/or footer within a card.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div
    class="border-b-2 border-neutral-100 px-6 py-3 dark:border-white/10">
    Featured
  </div>
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

An example that demonstrates a well-designed card header.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <h5
    class="border-b-2 border-neutral-100 px-6 py-3 text-xl font-medium leading-tight dark:border-white/10">
    Featured
  </h5>
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title

HTML

<div
  class="block rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div
    class="border-b-2 border-neutral-100 px-6 py-3 dark:border-white/10">
    Quote
  </div>
  <div class="p-6">
    <blockquote>
      <p class="text-xl">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
        posuere erat a ante.
      </p>
    </blockquote>
    <figcaption class="text-md text-neutral-500">
      - Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
  </div>
</div>

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

2 days ago

HTML
javascript

<div
  class="block rounded-lg bg-white text-center shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div
    class="border-b-2 border-neutral-100 px-6 py-3 dark:border-white/10">
    Featured
  </div>
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
  <div
    class="border-t-2 border-neutral-100 px-6 py-3 dark:border-white/10 text-surface/75 dark:text-neutral-300">
    2 days ago
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with Tailwind CSS classes like w-* or max-w-*.

Using grid markup

Using the grid, wrap cards in columns and rows as needed.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div class="grid grid-cols-1 grid-rows-1 md:grid-cols-2">
  <div
    class="me-4 block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
    <div class="p-6">
      <h5
        class="mb-2 text-xl font-medium leading-tight">
        Special title treatment
      </h5>
      <p class="mb-4 text-base">
        With supporting text below as a natural lead-in to additional
        content.
      </p>
      <button
        type="button"
        href="#"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Go somewhere
      </button>
    </div>
  </div>

  <div
    class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
    <div class="p-6">
      <h5
        class="mb-2 text-xl font-medium leading-tight">
        Special title treatment
      </h5>
      <p class="mb-4 text-base">
        With supporting text below as a natural lead-in to additional
        content.
      </p>
      <button
        type="button"
        href="#"
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Go somewhere
      </button>
    </div>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Using utilities

Use handful of available tailwind sizing utilities to quickly set a card’s width.

Card title

With supporting text below as a natural lead-in to additional content.

Card title

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="block w-3/4 rounded-lg bg-white p-6 shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <h5
    class="mb-2 text-xl font-medium leading-tight">
    Card title
  </h5>
  <p class="mb-4 text-base">
    With supporting text below as a natural lead-in to additional content.
  </p>
  <button
    type="button"
    class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
    data-twe-ripple-init
    data-twe-ripple-color="light">
    Button
  </button>
</div>

<div
  class="mt-4 block w-1/2 rounded-lg bg-white p-6 shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <h5
    class="mb-2 text-xl font-medium leading-tight">
    Card title
  </h5>
  <p class="mb-4 text-base">
    With supporting text below as a natural lead-in to additional content.
  </p>
  <button
    type="button"
    class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
    data-twe-ripple-init
    data-twe-ripple-color="light">
    Button
  </button>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Using custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="me-4 block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface"
  style="width: 18rem;">
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Text alignment

You can quickly change the text alignment of any card using dedicated Tailwind CSS classes (text-left, text-center, text-right).

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="block max-w-[18rem] rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

<div
  class="block max-w-[18rem] rounded-lg bg-white text-center shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

<div
  class="block max-w-[18rem] rounded-lg bg-white text-right shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Add some navigation to a card’s header (or block) with Tailiwnd Elements pills or tabs components.

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="block w-full rounded-lg bg-white text-center text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div
    class="border-b-2 border-neutral-100 px-3 pt-3 dark:border-white/10">
    <!--Tabs navigation-->
    <ul
      class="-mb-0.5 flex list-none flex-row flex-wrap border-b-0 ps-0"
      role="tablist"
      data-twe-nav-ref>
      <li role="presentation">
        <a
          href="#!"
          class="block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-[#3c3c3c] dark:data-[twe-nav-active]:text-primary"
          data-twe-nav-active
          role="tab"
          aria-controls="tabs-home"
          aria-selected="true"
          >Active</a
        >
      </li>
      <li role="presentation">
        <a
          href="#!"
          class="block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[twe-nav-active]:border-primary data-[twe-nav-active]:text-primary dark:text-white/50 dark:hover:bg-[#3c3c3c] dark:data-[twe-nav-active]:text-primary"
          role="tab"
          aria-controls="tabs-profile"
          aria-selected="false"
          >Link</a
        >
      </li>
      <li role="presentation">
        <a
          href="#tabs-contact"
          class="disabled pointer-events-none block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
          role="tab"
          aria-controls="tabs-contact"
          aria-selected="false"
          >Disabled</a
        >
      </li>
    </ul>
  </div>

  <div class="p-6">
    <h5 class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Special title treatment

With supporting text below as a natural lead-in to additional content.

HTML
javascript

<div
  class="block w-full rounded-lg bg-white text-center text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div class="border-b-2 border-neutral-100 p-3 dark:border-white/10">
    <!--Pills navigation-->
    <ul
      class="flex list-none flex-col flex-wrap ps-0 md:flex-row"
      id="pills-tab"
      role="tablist"
      data-twe-nav-ref>
      <li role="presentation">
        <a
          href="#!"
          class="block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-[#3c3c3c] dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
          id="pills-home-tab"
          data-twe-nav-active
          role="tab"
          aria-controls="pills-home"
          aria-selected="true"
          >Home</a
        >
      </li>
      <li role="presentation">
        <a
          href="#!"
          class="block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[twe-nav-active]:!bg-primary-100 data-[twe-nav-active]:text-primary-700 dark:bg-[#3c3c3c] dark:text-white/50 dark:data-[twe-nav-active]:!bg-slate-900 dark:data-[twe-nav-active]:text-primary-500 md:me-4"
          id="pills-profile-tab"
          role="tab"
          aria-controls="pills-profile"
          aria-selected="false"
          >Link</a
        >
      </li>
      <li role="presentation">
        <a
          href="#"
          class="pointer-events-none block rounded bg-zinc-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:text-neutral-500 dark:bg-[#3c3c3c]"
          id="pills-disabled-tab"
          role="tab"
          aria-controls="pills-disabled"
          aria-selected="false"
          >Disabled</a
        >
      </li>
    </ul>
  </div>

  <div class="p-6">
    <h5 class="mb-2 text-xl font-medium leading-tight">
      Special title treatment
    </h5>
    <p class="mb-4 text-base">
      With supporting text below as a natural lead-in to additional
      content.
    </p>
    <button
      type="button"
      href="#"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
      data-twe-ripple-init
      data-twe-ripple-color="light">
      Go somewhere
    </button>
  </div>
</div>

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps” - images at the top or bottom of a card.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

HTML

<div
  class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div class="relative overflow-hidden bg-cover bg-no-repeat">
    <img
      class="rounded-t-lg"
      src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
      alt="" />
  </div>
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Card title
    </h5>
    <p class="mb-4 text-base">
      This is a wider card with supporting text below as a natural
      lead-in to additional content. This content is a little bit
      longer.
    </p>
    <p class="text-base text-surface/75 dark:text-neutral-300">
      <small
        >Last updated 3 mins ago</small
      >
    </p>
  </div>
</div>

<div
  class="block rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark dark:text-white text-surface">
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight">
      Card title
    </h5>
    <p class="mb-4 text-base">
      This is a wider card with supporting text below as a natural
      lead-in to additional content. This content is a little bit
      longer.
    </p>
    <p class="text-base text-surface/75 dark:text-neutral-300">
      <small
        >Last updated 3 mins ago</small
      >
    </p>
  </div>
  <div class="relative overflow-hidden bg-cover bg-no-repeat">
    <img
      class="rounded-b-lg"
      src="https://tecdn.b-cdn.net/img/new/slides/042.webp"
      alt="" />
  </div>
</div>

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Note: Content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

HTML

<div class="relative">
  <div
    class="block rounded-lg bg-white text-white shadow-secondary-1 dark:bg-surface-dark">
    <img
      class="rounded-lg"
      src="https://tecdn.b-cdn.net/img/new/slides/017.webp"
      alt="" />
    <div class="absolute top-0 p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight ">
        Card title
      </h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
      <p class="text-base">
        <small>Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

Horizontal

Use card which has its child elements aligned horizontally.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

HTML

<div
  class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white md:max-w-xl md:flex-row">
  <img
    class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:!rounded-none md:!rounded-s-lg"
    src="https://tecdn.b-cdn.net/wp-content/uploads/2020/06/vertical.jpg"
    alt="" />
  <div class="flex flex-col justify-start p-6">
    <h5 class="mb-2 text-xl font-medium">Card title</h5>
    <p class="mb-4 text-base">
      This is a wider card with supporting text below as a natural lead-in
      to additional content. This content is a little bit longer.
    </p>
    <p class="text-xs text-surface/75 dark:text-neutral-300">
      Last updated 3 mins ago
    </p>
  </div>
</div>

Card styles

Cards include various options for customizing their backgrounds, borders, and color.

Background and color

Use bg-* and text-* classes to change the appearance of a card.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML

<div
    class="block max-w-[18rem] rounded-lg bg-primary text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3 text-white">
      Header
    </div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Primary card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-secondary text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Secondary card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-success text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Success card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-danger text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Danger card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-warning text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Warning card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-info text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3 ">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Info card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-neutral-50 text-black shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Light card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg bg-[#332D2D] text-white shadow-secondary-1">
    <div class="border-b-2 border-black/20 px-6 py-3">Header</div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Dark card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </p>
    </div>
  </div>

Border

Modify the border color of a card by utilizing the border-* classes. Additionally, you can add text-* classes to achieve a design to the one demonstrated below.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-primary bg-white shadow-secondary-1 dark:bg-surface-dark">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 text-surface dark:border-white/10 dark:text-white">
      Header
    </div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight text-primary">
        Primary card title
      </h5>
      <p class="text-base text-primary ">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-secondary-600 bg-white shadow-secondary-1 dark:bg-surface-dark">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 text-surface dark:border-white/10 dark:text-white">
      Header
    </div>
    <div class="p-6">
      <h5
        class="mb-2 text-xl font-medium leading-tight text-secondary-600">
        Secondary card title
      </h5>
      <p class="text-base text-secondary-600 ">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-success-600 bg-white shadow-secondary-1 dark:bg-surface-dark">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 text-surface dark:border-white/10 dark:text-white">
      Header
    </div>
    <div class="p-6">
      <h5
        class="mb-2 text-xl font-medium leading-tight text-success-600">
        Success card title
      </h5>
      <p class="text-base text-success-600">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-danger-600 bg-white shadow-secondary-1 dark:bg-surface-dark">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 text-surface dark:border-white/10 dark:text-white">
      Header
    </div>
    <div class="p-6">
      <h5
        class="mb-2 text-xl font-medium leading-tight text-danger-600">
        Danger card title
      </h5>
      <p class="text-base text-danger-600">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-warning-600 bg-white shadow-secondary-1 dark:bg-surface-dark">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 text-surface dark:border-white/10 dark:text-white">
      Header
    </div>
    <div class="p-6">
      <h5
        class="mb-2 text-xl font-medium leading-tight text-warning-600">
        Warning card title
      </h5>
      <p class="text-base text-warning-600">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-info-600 bg-white shadow-secondary-1 dark:bg-surface-dark">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 text-surface dark:border-white/10 dark:text-white">
      Header
    </div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight text-info-600">
        Info card title
      </h5>
      <p class="text-base text-info-600">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-neutral-50 bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 dark:border-white/10">
      Header
    </div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Light card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

<div class="flex justify-center">
  <div
    class="block max-w-[18rem] rounded-lg border border-[#332D2D] bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
    <div
      class="border-b-2 border-neutral-100 px-6 py-3 dark:border-white/10">
      Header
    </div>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">
        Dark card title
      </h5>
      <p class="text-base">
        Some quick example text to build on the card title and make up
        the bulk of the card's content.
      </p>
    </div>
  </div>
</div>

Mixins utilities

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

HTML

<div
  class="block max-w-[18rem] rounded-lg border border-success-600 bg-transparent text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white">
  <div class="border-b-2 border-success-600 px-6 py-3">Header</div>
  <div class="p-6">
    <h5 class="mb-2 text-xl font-medium leading-tight text-success-600">
      Success card title
    </h5>
    <p class="text-base text-success-600">
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </p>
  </div>
  <div class="border-t-2 border-success-600 px-6 py-3">Footer</div>
</div>

Card deck layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Cards group

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use class flex to become attached with uniform dimensions starting at the sm breakpoint.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

HTML

<div class="sm:flex sm:justify-center">
  <div
    class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0 sm:rounded-e-none">
    <a href="#!">
      <img
        class="rounded-t-lg sm:rounded-tr-none"
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
        alt="Hollywood Sign on The Hill" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
      <p class="mb-4 text-base text-surface/75 dark:text-neutral-300">
        <small>Last updated 3 mins ago</small>
      </p>
    </div>
  </div>

  <div
    class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0 sm:rounded-none">
    <a href="#!">
      <img
        class="rounded-t-lg sm:rounded-none"
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
        alt="Palm Springs Road" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This card has supporting text below as a natural lead-in to
        additional content.
      </p>
      <p class="mb-4 text-base text-surface/75 dark:text-neutral-300">
        <small>Last updated 3 mins ago</small>
      </p>
    </div>
  </div>

  <div
    class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0 sm:rounded-s-none">
    <a href="#!">
      <img
        class="rounded-t-lg sm:rounded-tl-none"
        src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
        alt="Los Angeles Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This card has even longer content
        than the first to show that equal height action.
      </p>
      <p class="mb-4 text-base text-surface/75 dark:text-neutral-300">
        <small>Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

When using card groups with footers, their content will automatically line up after adding mt-auto class.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

HTML

<div class="sm:flex sm:justify-center">
  <div
    class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0 sm:rounded-e-none">
    <a href="#!">
      <img
        class="rounded-t-lg sm:rounded-tr-none"
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
        alt="Hollywood Sign on The Hill" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
    <div
      class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center text-surface/75 dark:border-white/10 dark:text-neutral-300">
      <small>Last updated 3 mins ago</small>
    </div>
  </div>

  <div
    class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0 sm:rounded-none">
    <a href="#!">
      <img
        class="rounded-t-lg sm:rounded-none"
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
        alt="Palm Springs Road" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This card has supporting text below as a natural lead-in to
        additional content.
      </p>
    </div>
    <div
      class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center text-surface/75 dark:border-white/10 dark:text-neutral-300">
      <small>Last updated 3 mins ago</small>
    </div>
  </div>

  <div
    class="flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0 sm:rounded-s-none">
    <a href="#!">
      <img
        class="rounded-t-lg sm:rounded-tl-none"
        src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
        alt="Los Angeles Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This card has even longer content
        than the first to show that equal height action.
      </p>
    </div>
    <div
      class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center text-surface/75 dark:border-white/10 dark:text-neutral-300">
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Cards grid

Use the tailwind grid class and its grid-cols-* classes to control how many grid columns (wrapped around your cards) you show per row. For example, here's .grid-cols-1 laying out the cards on one column, and .md:grid-cols-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

HTML

<div class="grid-cols-1 sm:grid md:grid-cols-2 ">
  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
        alt="Hollywood Sign on The Hill" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
        alt="Palm Springs Road" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
        alt="Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
        alt="Los Angeles Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>
</div>

Change it to .grid-cols-3 and you'll see the fourth card wrap.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

HTML

<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
        alt="Hollywood Sign on The Hill" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
        alt="Palm Springs Road" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
        alt="Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
        alt="Los Angeles Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>
</div>

When you need equal height, remove the .self-start from the cards.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

HTML

<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
        alt="Hollywood Sign on The Hill" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
        alt="Palm Springs Road" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
        alt="Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content.
      </p>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
        alt="Los Angeles Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a longer card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
  </div>
</div>

Just like with card groups, card footers will automatically line up.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

HTML

<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
        alt="Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This content is a little bit
        longer.
      </p>
    </div>
    <div
      class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center text-surface/75 dark:border-white/10 dark:text-neutral-300">
      <small>Last updated 3 mins ago</small>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
        alt="Los Angeles Skyscrapers" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This card has supporting text below as a natural lead-in to
        additional content.
      </p>
    </div>
    <div
      class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center text-surface/75 dark:border-white/10 dark:text-neutral-300">
      <small>Last updated 3 mins ago</small>
    </div>
  </div>

  <div
    class="mx-3 mt-6 flex flex-col rounded-lg bg-white text-surface shadow-secondary-1 dark:bg-surface-dark dark:text-white sm:shrink-0 sm:grow sm:basis-0">
    <a href="#!">
      <img
        class="rounded-t-lg"
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
        alt="Palm Springs Road" />
    </a>
    <div class="p-6">
      <h5 class="mb-2 text-xl font-medium leading-tight">Card title</h5>
      <p class="mb-4 text-base">
        This is a wider card with supporting text below as a natural
        lead-in to additional content. This card has even longer content
        than the first to show that equal height action.
      </p>
    </div>
    <div
      class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center text-surface/75 dark:border-white/10 dark:text-neutral-300">
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Cards

Basic examples

Simple

Card title

Image

Card title

Image with ripple

Card title

Header and footer

Special title treatment

Content types

Body

Titles, text and links

Special title treatment

Card subtitle

Images

List groups

Kitchen sink

Card title

Header and footer

Special title treatment

Featured

Special title treatment

Special title treatment

Sizing

Using grid markup

Special title treatment

Special title treatment

Using utilities

Card title

Card title

Using custom CSS

Special title treatment

Text alignment

Special title treatment

Special title treatment

Special title treatment

Navigation

Special title treatment

Special title treatment

Images

Image caps

Card title

Card title

Image overlays

Card title

Horizontal

Card title

Card styles

Background and color

Primary card title

Secondary card title

Success card title

Danger card title

Warning card title

Info card title

Light card title

Dark card title

Border

Primary card title

Secondary card title

Success card title

Danger card title

Warning card title

Info card title

Light card title

Dark card title

Mixins utilities

Success card title

Card deck layout

Cards group

Card title

Card title

Card title

Card title

Card title

Card title

Cards grid

Card title