A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.
Demo
Note
- Also called 'Grid Tiles'.
- Cards are often placed in a 2x2 grid for desktop layouts.
States & Variations
Standard
xxxxxxxxxx<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8"> <a class="grid-tile-c card lazyload " data-background="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3NjaWYuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" href="https://science.howstuffworks.com/engineering/structural/scif.htm" style="background-image: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3NjaWYuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=); "> <p class="text-3xl leading-tight mb-0 text-white md:font-bold font-headline z-10">SCIFs Are Spy-proof Places for America's Top Secrets</p> <span class="btn z-10 self-start text-sm py-3 px-7 mt-8">FIND OUT MORE</span> </a> </div>Small Grid Tiles
It's a Manatee's Life: Swim, Eat, Rest, Repeat
You're Grounded: Cats May Soon Have Curfews in Iceland
Utahraptor: The Salty Saga of a Killer Dinosaur
Billions of Brood X Cicadas Are About to Get Loud
xxxxxxxxxx<div class="grid grid-cols-1 grid-rows-4 sm:grid-cols-2 sm:grid-rows-2 lg:grid-cols-3 lg:grid-rows-1 xl:grid-cols-4 gap-4 mb-8"> <a class="grid-tile-b flex flex-col text-white group transition-none bg-gray " href="https://animals.howstuffworks.com/mammals/manatees.htm"> <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL21hbmF0ZWUuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL21hbmF0ZWUuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" alt="It's a Manatee's Life: Swim, Eat, Rest, Repeat" class="lazyload block object-cover w-100 group-hover:opacity-75 group-focus:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;"> <h3 class="flex-1 overflow-hidden text-lg font-bold font-headline bg-accent-2 mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-3">It's a Manatee's Life: Swim, Eat, Rest, Repeat</span></h3> </a> <a class="grid-tile-c flex flex-col text-white group transition-none bg-gray " href="https://animals.howstuffworks.com/pets/cat-curfew.htm"> <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhdC1jdXJmZXcuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhdC1jdXJmZXcuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" alt="You're Grounded: Cats May Soon Have Curfews in Iceland" class="lazyload block object-cover w-100 group-hover:opacity-75 group-focus:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;"> <h3 class="flex-1 overflow-hidden text-lg font-bold font-headline bg-accent-2 mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-3">You're Grounded: Cats May Soon Have Curfews in Iceland</span></h3> </a> <a class="grid-tile-d flex flex-col text-white group transition-none bg-gray " href="https://animals.howstuffworks.com/dinosaurs/utahraptor.htm"> <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3V0YWhyYXB0b3IuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3V0YWhyYXB0b3IuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" alt="Utahraptor: The Salty Saga of a Killer Dinosaur" class="lazyload block object-cover w-100 group-hover:opacity-75 group-focus:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;"> <h3 class="flex-1 overflow-hidden text-lg font-bold font-headline bg-accent-2 mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-3">Utahraptor: The Salty Saga of a Killer Dinosaur</span></h3> </a> <a class="grid-tile-e flex flex-col text-white group transition-none bg-gray lg:hidden xl:flex" href="https://animals.howstuffworks.com/insects/brood-x-cicadas.htm"> <img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NpY2FkYS01LmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" data-src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NpY2FkYS01LmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" alt="Billions of Brood X Cicadas Are About to Get Loud" class="lazyload block object-cover w-100 group-hover:opacity-75 group-focus:opacity-75 mx-auto loaded" width="550" height="309.375" style="min-height: 10.9375rem; height: 8.75rem; transition: opacity 0.25s ease-in-out;"> <h3 class="flex-1 overflow-hidden text-lg font-bold font-headline bg-accent-2 mb-0 py-2 px-3 group-hover:text-white md:leading-tight"><span class="line-clamp-3">Billions of Brood X Cicadas Are About to Get Loud</span></h3> </a></div>Anatomy
- Card
- Card Heading
- Card Button
