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.
<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.
// 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.
<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>
// 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.
<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>
// 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.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<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.
About author
Michal Szymanski
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.