DEV Community

Cover image for TW Elements - Cards. Free UI/UX design course
Keep Coding
Keep Coding

Posted on • Originally published at tw-elements.com

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.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

JAVASCRIPT

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

initTWE({ Ripple });
Enter fullscreen mode Exit fullscreen mode

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

Image description

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>
Enter fullscreen mode Exit fullscreen mode

JAVASCRIPT

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

initTWE({ Ripple });
Enter fullscreen mode Exit fullscreen mode

Header and footer

You can also add optional header and footer sections to the card.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)