TW Elements - Cards. Free UI/UX design course
Tags: webdev, tailwindcss, tutorial, learning
Published: 2024-05-15 11:00:00

## 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.

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

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.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo5af1hvpuh8w496r1qr.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="#!" 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.

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

**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](https://www.designtoolshub.com/tailwind-css/card-generator)._