HTML & CSS Card Components
Basic content cards, profile cards and pricing cards — each shown in the base style and 10 design aesthetics, ready to copy.
33 components · live preview · copy as HTML or JSX · free for commercial use
Base cards (3)
Basic Card
Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-sm rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<h3 class="text-base font-bold text-slate-900 mb-1">Card Title</h3>
<p class="text-sm text-slate-500">A short description of this card's content goes here.</p>
</div>Profile Card
Cards
JD
Jane Doe
Product Designer
<div class="max-w-sm rounded-2xl border border-slate-200 bg-white p-5 shadow-sm flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 flex items-center justify-center text-white font-bold">JD</div>
<div>
<p class="text-sm font-bold text-slate-900">Jane Doe</p>
<p class="text-xs text-slate-500">Product Designer</p>
</div>
</div>Pricing Card
Cards
Pro
$19/mo
<div class="max-w-sm rounded-2xl border-2 border-indigo-500 bg-white p-6 shadow-md">
<p class="text-xs font-bold text-indigo-600 uppercase tracking-wide mb-2">Pro</p>
<p class="text-3xl font-extrabold text-slate-900 mb-4">$19<span class="text-sm font-medium text-slate-400">/mo</span></p>
<button class="w-full px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition-colors">
Choose Plan
</button>
</div>Minimal cards
Basic Card
Minimal · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-5 ">
<h3 class="text-sm font-semibold text-slate-900 mb-1">Card Title</h3>
<p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>Profile Card
Minimal · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-5 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm font-semibold">JD</div>
<div>
<p class="text-sm font-semibold text-slate-900">Jane Doe</p>
<p class="text-xs text-slate-500">Product Designer</p>
</div>
</div>Pricing Card
Minimal · Cards
Pro
$19/mo
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-6 ">
<p class="text-xs font-semibold text-slate-900 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-semibold text-slate-900 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
<button class="w-full bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
Choose Plan
</button>
</div>Neumorphism cards
Basic Card
Neumorphism · Cards
Card Title
A short description of this card's content goes here.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-5 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
<h3 class="text-sm font-bold text-slate-600 mb-1">Card Title</h3>
<p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>
</div>Profile Card
Neumorphism · Cards
JD
Jane Doe
Product Designer
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-5 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff] flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] flex items-center justify-center text-slate-600 text-sm font-bold">JD</div>
<div>
<p class="text-sm font-bold text-slate-600">Jane Doe</p>
<p class="text-xs text-slate-500">Product Designer</p>
</div>
</div>
</div>Pricing Card
Neumorphism · Cards
Pro
$19/mo
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-6 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
<p class="text-xs font-bold text-slate-600 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-bold text-slate-600 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
<button class="w-full bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] transition-all">
Choose Plan
</button>
</div>
</div>Glassmorphism cards
Basic Card
Glassmorphism · Cards
Card Title
A short description of this card's content goes here.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-5 shadow-lg">
<h3 class="text-sm font-bold text-white mb-1">Card Title</h3>
<p class="text-xs text-white/80">A short description of this card's content goes here.</p>
</div>
</div>Profile Card
Glassmorphism · Cards
JD
Jane Doe
Product Designer
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-5 shadow-lg flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white text-sm font-bold">JD</div>
<div>
<p class="text-sm font-bold text-white">Jane Doe</p>
<p class="text-xs text-white/80">Product Designer</p>
</div>
</div>
</div>Pricing Card
Glassmorphism · Cards
Pro
$19/mo
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-6 shadow-lg">
<p class="text-xs font-bold text-white uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-bold text-white mb-4">$19<span class="text-sm text-white/80">/mo</span></p>
<button class="w-full bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 transition-all">
Choose Plan
</button>
</div>
</div>Neubrutalism cards
Basic Card
Neubrutalism · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-5 shadow-[6px_6px_0px_#000]">
<h3 class="text-sm font-black text-black mb-1">Card Title</h3>
<p class="text-xs text-slate-700">A short description of this card's content goes here.</p>
</div>Profile Card
Neubrutalism · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-5 shadow-[6px_6px_0px_#000] flex items-center gap-4">
<div class="w-12 h-12 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] flex items-center justify-center text-black text-sm font-black">JD</div>
<div>
<p class="text-sm font-black text-black">Jane Doe</p>
<p class="text-xs text-slate-700">Product Designer</p>
</div>
</div>Pricing Card
Neubrutalism · Cards
Pro
$19/mo
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-6 shadow-[6px_6px_0px_#000]">
<p class="text-xs font-black text-black uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-black text-black mb-4">$19<span class="text-sm text-slate-700">/mo</span></p>
<button class="w-full bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] transition-all">
Choose Plan
</button>
</div>Material cards
Basic Card
Material · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-white rounded-lg p-5 shadow-md">
<h3 class="text-sm font-medium text-slate-900 mb-1">Card Title</h3>
<p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>Profile Card
Material · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-white rounded-lg p-5 shadow-md flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-blue-600 shadow-md flex items-center justify-center text-white text-sm font-medium">JD</div>
<div>
<p class="text-sm font-medium text-slate-900">Jane Doe</p>
<p class="text-xs text-slate-500">Product Designer</p>
</div>
</div>Pricing Card
Material · Cards
Pro
$19/mo
<div class="max-w-xs bg-white rounded-lg p-6 shadow-md">
<p class="text-xs font-medium text-slate-900 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-medium text-slate-900 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
<button class="w-full bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium hover:shadow-lg transition-all">
Choose Plan
</button>
</div>Gradient cards
Basic Card
Gradient · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-5 shadow-lg shadow-purple-500/40">
<h3 class="text-sm font-bold text-white mb-1">Card Title</h3>
<p class="text-xs text-white/80">A short description of this card's content goes here.</p>
</div>Profile Card
Gradient · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-5 shadow-lg shadow-purple-500/40 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md flex items-center justify-center text-white text-sm font-bold">JD</div>
<div>
<p class="text-sm font-bold text-white">Jane Doe</p>
<p class="text-xs text-white/80">Product Designer</p>
</div>
</div>Pricing Card
Gradient · Cards
Pro
$19/mo
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-6 shadow-lg shadow-purple-500/40">
<p class="text-xs font-bold text-white uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-bold text-white mb-4">$19<span class="text-sm text-white/80">/mo</span></p>
<button class="w-full bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 transition-all">
Choose Plan
</button>
</div>Cyberpunk cards
Basic Card
Cyberpunk · Cards
Card Title
A short description of this card's content goes here.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-5 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
<h3 class="text-sm font-bold text-cyan-300 mb-1">Card Title</h3>
<p class="text-xs text-cyan-300/70">A short description of this card's content goes here.</p>
</div>
</div>Profile Card
Cyberpunk · Cards
JD
Jane Doe
Product Designer
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-5 shadow-[0_0_15px_rgba(34,211,238,0.6)] flex items-center gap-4">
<div class="w-12 h-12 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] flex items-center justify-center text-fuchsia-400 text-sm font-bold">JD</div>
<div>
<p class="text-sm font-bold text-cyan-300">Jane Doe</p>
<p class="text-xs text-cyan-300/70">Product Designer</p>
</div>
</div>
</div>Pricing Card
Cyberpunk · Cards
Pro
$19/mo
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-6 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
<p class="text-xs font-bold text-cyan-300 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-bold text-cyan-300 mb-4">$19<span class="text-sm text-cyan-300/70">/mo</span></p>
<button class="w-full bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] transition-all">
Choose Plan
</button>
</div>
</div>Retro cards
Basic Card
Retro · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-5 ">
<h3 class="text-sm font-black text-orange-700 mb-1">Card Title</h3>
<p class="text-xs text-orange-600">A short description of this card's content goes here.</p>
</div>Profile Card
Retro · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-5 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 flex items-center justify-center text-white text-sm font-black">JD</div>
<div>
<p class="text-sm font-black text-orange-700">Jane Doe</p>
<p class="text-xs text-orange-600">Product Designer</p>
</div>
</div>Pricing Card
Retro · Cards
Pro
$19/mo
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-6 ">
<p class="text-xs font-black text-orange-700 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-black text-orange-700 mb-4">$19<span class="text-sm text-orange-600">/mo</span></p>
<button class="w-full bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
Choose Plan
</button>
</div>Corporate cards
Basic Card
Corporate · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-5 shadow-sm">
<h3 class="text-sm font-semibold text-slate-800 mb-1">Card Title</h3>
<p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>Profile Card
Corporate · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-5 shadow-sm flex items-center gap-4">
<div class="w-12 h-12 rounded-md bg-slate-700 flex items-center justify-center text-white text-sm font-semibold">JD</div>
<div>
<p class="text-sm font-semibold text-slate-800">Jane Doe</p>
<p class="text-xs text-slate-500">Product Designer</p>
</div>
</div>Pricing Card
Corporate · Cards
Pro
$19/mo
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-6 shadow-sm">
<p class="text-xs font-semibold text-slate-800 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-semibold text-slate-800 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
<button class="w-full bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 transition-all">
Choose Plan
</button>
</div>Playful cards
Basic Card
Playful · Cards
Card Title
A short description of this card's content goes here.
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-5 ">
<h3 class="text-sm font-bold text-yellow-800 mb-1">Card Title</h3>
<p class="text-xs text-yellow-700">A short description of this card's content goes here.</p>
</div>Profile Card
Playful · Cards
JD
Jane Doe
Product Designer
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-5 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-yellow-200 border-2 border-yellow-400 flex items-center justify-center text-yellow-800 text-sm font-bold">JD</div>
<div>
<p class="text-sm font-bold text-yellow-800">Jane Doe</p>
<p class="text-xs text-yellow-700">Product Designer</p>
</div>
</div>Pricing Card
Playful · Cards
Pro
$19/mo
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-6 ">
<p class="text-xs font-bold text-yellow-800 uppercase tracking-wide mb-2">Pro</p>
<p class="text-2xl font-bold text-yellow-800 mb-4">$19<span class="text-sm text-yellow-700">/mo</span></p>
<button class="w-full bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
Choose Plan
</button>
</div>Designing with cards
Cards group related content — a title, a short description, an avatar or image, and one or two actions — into a single scannable block. They shine in grids and dashboards where users compare items side by side, such as pricing tiers, team members or blog posts. Keep each card focused on one subject and avoid more than two actions per card.
The examples use max-w-xs so they size well on their own. In a responsive layout, place cards in grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 and let the grid control the width instead of the card.
Accessibility and layout tips
Use a heading element for the card title so screen-reader users can jump between cards. If the whole card should be clickable, make the title a link and stretch its hit area with a pseudo-element rather than wrapping the entire card in an <a>, which produces long, confusing link text. On pricing cards, make the recommended plan stand out with more than color alone.
Frequently Asked Questions
How do I make cards the same height in a row?↓
Put the cards in a CSS grid or a flex row (items stretch by default), make each card flex flex-col, and push the action area to the bottom with mt-auto.
How do I make a card responsive?↓
Let the parent grid decide the width: grid-cols-1 on mobile and more columns at the sm, md or lg breakpoints. Remove fixed widths such as max-w-xs if the card should fill its grid cell.
Are these card components free for commercial use?↓
Yes. Every card on this page is free to copy into personal or commercial projects, with no attribution required.
Last updated: