Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Cards

Cards are one of most popular components. These are very flexible "content containers" with extensible options for headers, footers, images, and a wide variety of content.

Basic example

This is a simple card with a title, text, and button.

Card title

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

You already know most of these classes from previous lessons. The card is a simple component and there is not much to explain here.

What may be noticeable, especially if you've used libraries like Bootstrap before, is that we don't have classes like .card or .card-body here. The entire card is composed of utilities classes, and shadows are added using arbitrary values.

HTML

<div
  class="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
  <h5
    class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
    Card title
  </h5>
  <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
    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 motion-reduce:transition-none 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>

And since we're using a ripple effect button in the card, we also need to add a piece of Ripple initialization JavaScript in our project. You already know it too from the previous lesson.

JavaScript

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

initTWE({ Ripple });

Card with an image

You can very easily add an image to your card by adding a plain <img> element, wrapped within <a> element (to be clickable). Notice that we need to add .rounded-t-lg class to the image, to add rounded corners only to the top of the card.

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 rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
  <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">
    <h5
      class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
      Card title
    </h5>
    <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
      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 motion-reduce:transition-none 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>

JavaScript

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

initTWE({ Ripple });

Image with ripple

To add a ripple effect you need to add ripple attributes to the <a> element wrapping the image (click on 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

<div
  class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
  <a href="#!" data-twe-ripple-init data-twe-ripple-color="light">
    <img
      class="rounded-t-lg"
      src="https://tecdn.b-cdn.net/img/new/standard/nature/181.jpg"
      alt="" />
  </a>
  <div class="p-6">
    <h5
      class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
      Card title
    </h5>
    <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
      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 motion-reduce:transition-none 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>

JavaScript

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

initTWE({ Ripple });

Header and footer

You can also 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

<div class="card text-center">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">
      With supporting text below as a natural lead-in to additional content.
    </p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

Note: Cards have tons of available options. We won't cover it all in this lesson, because we have to finish our project. However, if you want to learn more about card have a look at cards documentation page.

Note 2: You can also try our Card generator.

Ask question

Prev Next

About author

Michal Szymanski

@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.

Basics

Tailwind CSS

TW Elements

MDB GO

Create a Blog

Create an eCommerce

Create an Admin Dashboard

Cards

Basic example

Card title

Card with an image

Card title

Image with ripple

Card title

Header and footer

Special title treatment

Michal Szymanski