TW Elements - Cards. Free UI/UX design course

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.

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 element, wrapped within 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nkrq03rvzys9mwm6fqk.png

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 element wrapping the image (click on the image to see the effect).

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.

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.