Cards – Design Portal

A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.

Demo

Virtual Influencers Are Unreal — Seriously, They Don't Physically Exist

FIND OUT MORE

SCIFs Are Spy-proof Places for America's Top Secrets

FIND OUT MORE

Why the 1933 London Tube Map Is Still Considered Design Genius

FIND OUT MORE

5 Fascinating Facts You May Not Know About Westminster Abbey

FIND OUT MORE

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8">										
  <a class="grid-tile-b card lazyload " data-background="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3ZpcnR1YWwtaW5mbHVlbmNlcnMuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" href="https://science.howstuffworks.com/virtual-influencers.htm" style="background-image: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3ZpcnR1YWwtaW5mbHVlbmNlcnMuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=); ">
    <p class="text-3xl leading-tight mb-0 text-white md:font-bold font-headline z-10">Virtual Influencers Are Unreal — Seriously, They Don't Physically Exist</p>
    <span class="btn z-10 self-start text-sm py-3 px-7 mt-8">FIND OUT MORE</span>
  </a>		
  <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>		
  <a class="grid-tile-d card lazyload " data-background="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2xvbmRvbi10dWJlMS0xLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19" href="https://science.howstuffworks.com/engineering/civil/london-tube-map.htm" style="background-image: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2xvbmRvbi10dWJlMS0xLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6NTUwfX19); ">
    <p class="text-3xl leading-tight mb-0 text-white md:font-bold font-headline z-10">Why the 1933 London Tube Map Is Still Considered Design Genius</p>
    <span class="btn z-10 self-start text-sm py-3 px-7 mt-8">FIND OUT MORE</span>
  </a>		
  <a class="grid-tile-e card lazyload " data-background="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3dhLTQuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=" href="https://science.howstuffworks.com/engineering/architecture/westminster-abbey.htm" style="background-image: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL3dhLTQuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo1NTB9fX0=); ">
    <p class="text-3xl leading-tight mb-0 text-white md:font-bold font-headline z-10">5 Fascinating Facts You May Not Know About Westminster Abbey</p>
    <span class="btn z-10 self-start text-sm py-3 px-7 mt-8">FIND OUT MORE</span>
  </a>		
</div>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

Note

Also called 'Grid Tiles'.
Cards are often placed in a 2x2 grid for desktop layouts.

States & Variations

Standard

SCIFs Are Spy-proof Places for America's Top Secrets

FIND OUT MORE

<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

<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