Summarize this article with:
Cards are everywhere. Netflix, Airbnb, Amazon, Twitter. Open any modern website and you’ll find content organized into these neat rectangular containers.
This collection of CSS cards examples gives you working code for every card type you’ll need.
Basic text cards, image cards, profile cards, product cards, pricing tables. Hover effects that actually feel good. Layouts that work on mobile without breaking.
You’ll learn card anatomy, styling techniques, and how to pick between Flexbox and Grid for your layouts.
Each example includes complete HTML and CSS you can copy directly into your projects.
What is a CSS Card
A CSS card is a rectangular container component that groups related content into a single visual block.
Cards display images, text, and buttons together. You see them everywhere: e-commerce sites, social media feeds, dashboard widgets.
The card component design pattern became popular because it works. Users understand it instantly.
Each card acts as a self-contained unit. One topic, one action, one focus.
Modern frontend frameworks like Bootstrap and Tailwind CSS include card components by default. That tells you something about how common this pattern has become.
How CSS Cards Work in Web Layouts
Cards sit inside grid systems or flexbox containers that control their arrangement.
The parent container handles spacing, alignment, and how cards wrap on smaller screens. The card itself just needs to look good at any width.
CSS Card Anatomy and Structure
A typical card has three parts: header area, body content, footer with actions.
The HTML structure uses semantic elements. A wrapper div, optional image, heading, paragraph text, and button links.
CSS handles the visual styling: border radius, box shadow, padding, and background colors.
Material Design – Responsive Card
See the Pen
Material Design – Responsive card by David Foliti (@marlenesco)
on CodePen.
Color Palette Trading Cards
See the Pen
Color Palette Trading Cards by Mike Mangialardi (@mikemang)
on CodePen.
Layout Practice Using Grid
See the Pen
Layout practice, using grid by Bart Veneman (@bartveneman)
on CodePen.
F1 Player Hexagon Card Responsive
See the Pen
F1 Player Hexagon Card Responsive by Shireen Taj (@TajShireen)
on CodePen.
Responsive News Card Slider
See the Pen
Responsive News Card Slider by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.
Modern CSS Cards Design
See the Pen
Modern css cards design by FlorinCornea (@FlorinCornea)
on CodePen.
Sneaker Product Cards
See the Pen
Sneaker Product Cards by ayush gupta (@ayushgptaa)
on CodePen.
Recipe Card
See the Pen
Recipe Card by Ahmad Nasr (@ahmadnasr)
on CodePen.
Fairly Colourful Profile Card
See the Pen
Fairly Colourful Profile Card by Takane Ichinose (@takaneichinose)
on CodePen.
Holiday Feature Folding Cards
See the Pen
Holiday Feature Folding Cards [Pure CSS] by Madalena (@Maza-designDev)
on CodePen.
Skewed eCommerce Cards
See the Pen
Responsive skewed eCommerce CSS Grid by Andy Barefoot (@andybarefoot)
on CodePen.
Card Animation
See the Pen
Card Animation by Jon Yablonski (@jonyablonski)
on CodePen.
Parallax Card
See the Pen
Parallax Card by Hakkam Abdullah (@hkmDesigner)
on CodePen.
CSS Card Grid
See the Pen
CSS Grid: Makeup Palettes by Olivia Ng (@oliviale)
on CodePen.
Comment Card Animation
See the Pen
Comment Card Animation by Shaw (@shshaw)
on CodePen.
Keyboard Love
See the Pen
Keyboard accessible animated card by Cristian Diaz (@ItsCrisDiaz)
on CodePen.
Shadow Play
See the Pen
CSS cards with drop-shadow effect by Jaroslaw Hubert (@jhkepa)
on CodePen.
Comic Nerd Alert!
See the Pen
Marvel Corner Box Art by Aryan Tayal (@aryancodeworm)
on CodePen.
Keep it Flippy
See the Pen
flippyCards by Kayleigh Foley (@kayfo23)
on CodePen.
Flip Out
See the Pen
UI – Flip Card (using :focus-within for a11y) by Abubaker Saeed (@AbubakerSaeed)
on CodePen.
Glassy Dreams
See the Pen
Glass Card by Marcello Lopes (@marcell0lopes)
on CodePen.
Stretch it Out
See the Pen
Expanding Card Grid With Flexbox by Naila Ahmad (@nailaahmad)
on CodePen.
Nostalgic Pixels
See the Pen
Polaroid Memories – CSS only by Nico (@nicokoenig)
on CodePen.
Get Inspired
See the Pen
Inspiration Card by Dannie Vinther (@dannievinther)
on CodePen.
Go Digital, Go Bold
See the Pen
Digital Business Card by Will Johnson (@willalanjohnson)
on CodePen.
Dance of the Cards
See the Pen
Card Stack by Lane Olson (@Lane)
on CodePen.
Peek-a-Boo Magic
See the Pen
Simple Animated Card by Josh (@jepooley)
on CodePen.
Chic Grid Vibes
See the Pen
Isometric Card Grid by Jon Kantner (@jkantner)
on CodePen.
Bones of Design
See the Pen
Card UI Skeleton Screen by Max Böck (@mxbck)
on CodePen.
Becoming One with the Background
See the Pen
Expanding card page transition effect by Rachel Smith (@rachsmith)
on CodePen.
Meet the Two-Faced Card
See the Pen
Pure CSS Card Flip by Eddy Sims (@edeesims)
on CodePen.
The Shopper’s Delight
See the Pen
Playing card CSS Grid eCommerce layout by Andy Barefoot (@andybarefoot)
on CodePen.
Taking Flight in 3D
See the Pen
3D Perspective cards with depth [CSS] by Fernando Cohen (@designfenix)
on CodePen.
Figure it Out
See the Pen
A <figure> with a <figcaption>… and .date that all:hovers by Joshua Ward (@joshuaward)
on CodePen.
Eco Warrior Alert!
See the Pen
Environment Impact Cards (GSAP) by Anton Mudrenok (@mudrenok)
on CodePen.
Reality Flip
See the Pen
Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme by Nicola Mihaita (@nicolamihaita)
on CodePen.
Cut it Out, But in 3D!
See the Pen
3D Cutout Card by Dannie Vinther (@dannievinther)
on CodePen.
The Ultimate Caption Move
See the Pen
CSS-only Slide-up Caption Hover Effect by Mojtaba Seyedi (@seyedi)
on CodePen.
Materialize Your Dreams
See the Pen
Web Material Card Concept by Mason Fox (@masonfox)
on CodePen.
Black & White to Life
See the Pen
Profile Card hover over it once by Atul Prajapati (@atulcodex)
on CodePen.
Draggin’ Feels Real
See the Pen
Hearthstone Card CSS 3D Click/Drag by Jack Rugile (@jackrugile)
on CodePen.
Doorbell Ringer
See the Pen
Delivery Card Animation by Nikolay Talanov (@suez)
on CodePen.
Types of CSS Cards
Card layouts come in many forms. The type you pick depends on what content you’re displaying.
Basic Cards
Text-only cards with a heading, description, and maybe a link. No images, no fancy effects.
Perfect for feature lists, service descriptions, or simple content blocks where visuals would distract.
Image Cards
A featured image sits at the top, content below. The most common card pattern on the web.
Works great for blog posts, portfolios, and any content where visuals matter. The image grabs attention, the text provides context.
Profile Cards
User avatar, name, bio, social links. You know the format from every team page and author bio section.
Bootstrap profile components follow this exact pattern.
Product Cards
E-commerce staple: product image, title, price, rating stars, add-to-cart button.
Check out dedicated product card design examples for more patterns. These cards need to convert browsers into buyers.
Pricing Cards
Subscription tiers laid out side by side. Plan name, price, feature list, signup button.
The middle option usually gets highlighted. That’s visual hierarchy doing its job.
Blog Post Cards
Article preview with featured image, title, excerpt, author name, publish date.
Users scan these quickly. The title and image do most of the heavy lifting.
Horizontal Cards
Image on one side, content on the other. Side-by-side layout instead of stacked.
Takes up more horizontal space but works well for featured content or when you need fewer cards per row.
Overlay Cards
Text sits directly on top of the background image. Gradient overlays keep text readable.
Looks dramatic but harder to get right. Color contrast becomes critical here.
How to Create a CSS Card
Building cards from scratch takes about 20 lines of CSS. Here’s the process.
Card HTML Structure
Start with a container div. Add an image element, heading, paragraph, and link inside.
Keep it semantic. Use appropriate heading levels. The card wrapper can be an article element if each card represents standalone content.
Card CSS Styling
Set a background color and border-radius for rounded corners. Add padding inside so content doesn’t touch edges.
Control width with max-width or let the grid container handle sizing. Either approach works.
Adding Shadows and Borders
Box shadows add depth. A subtle shadow makes cards look elevated above the page.
Use our CSS Box Shadow Generator to get the values right. Too strong looks dated, too subtle looks flat.
Borders work as an alternative. A 1px border in a light gray creates definition without the shadow effect.
Making Cards Responsive
Media queries adjust card layouts at different breakpoints.
On desktop: 3-4 cards per row. Tablet: 2 cards. Mobile: single column stack.
The card itself stays flexible. The container grid does the responsive work.
CSS Card Layout Options
Two main approaches: Flexbox or CSS Grid. Both work, each has strengths.
Flexbox Card Grids
Flexbox card grid layouts handle dynamic card counts well. Cards wrap naturally when they run out of horizontal space.
Set display: flex, flex-wrap: wrap, and a gap value. Give cards a flex-basis width.
Simple, flexible, well-supported in all browsers.
CSS Grid Card Layouts
CSS Grid gives you explicit control over columns and rows. Define exactly how many cards per row at each breakpoint.
Use grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) for responsive grids that adjust automatically.
Grid handles equal-height cards better than flexbox without extra hacks.
Masonry Card Layouts
Pinterest-style grids where cards have different heights. Items fill gaps in the layout.
CSS masonry is getting native browser support but JavaScript solutions still work more reliably.
Great for image galleries and content with varying lengths.
CSS Card Hover Effects
CSS card hover effects add interactivity. Users get feedback that cards are clickable.
Keep effects subtle. Performance matters, especially on pages with many cards.
Scale and Transform Effects
Cards grow slightly on hover using transform: scale(1.02).
Add transition: transform 0.2s ease for smooth animation. Small scale values work best.
Shadow Depth Changes
Increase box shadow on hover to make cards look like they’re lifting off the page.
This effect combines well with subtle scale transforms. The CSS shadow effects guide covers more techniques.
Color Transitions
Background color shifts, border color changes, or text color updates on hover.
Transition properties smooth out the change. Avoid jarring instant color switches.
Image Zoom Effects
The card image scales up inside its container while overflow: hidden crops the edges.
Creates movement without changing the card’s footprint. Works especially well for CSS image effects on product and portfolio cards.
Button Reveal Animations
Call-to-action buttons slide in from below or fade in on hover.
Keeps the default card state clean. The action appears only when users show interest by hovering.
CSS Card Best Practices
Cards look simple but the details matter. Get spacing, typography, and accessibility right.
Card Spacing and Padding Guidelines
Inside padding: 16-24px works for most cards. Consistent white space between elements creates visual calm.
Gap between cards: 16-32px depending on card size. Tighter gaps for small cards, larger gaps for feature cards.
Typography in Cards
Card headings: 18-24px, bold weight. Body text: 14-16px, regular weight.
Limit text to 2-3 lines for descriptions. Truncate with ellipsis if content varies. Accessible typography means readable font sizes and sufficient line height.
Mobile Card Design Considerations
Single-column layouts on mobile. Full-width cards with reduced padding.
Touch targets need minimum 44x44px for buttons. Mobile-first design means building the small screen version first, then expanding for desktop.
Accessibility Requirements for Cards
Cards need proper heading hierarchy, ARIA labels for interactive elements, keyboard navigation support.
If the whole card is clickable, wrap it in an anchor tag or use JavaScript with proper focus states. Check the web accessibility checklist for full requirements.
FAQ on CSS Cards
What is a CSS card?
A CSS card is a rectangular UI component that groups related content like images, headings, text, and buttons into a single container. Cards create scannable content blocks used on dashboards, e-commerce sites, and social media feeds.
How do I make a simple card in CSS?
Create a div container, add padding, set a background color, apply border-radius for rounded corners, and use box-shadow for depth. Style the inner elements with appropriate spacing. Takes about 15-20 lines of CSS.
Should I use Flexbox or CSS Grid for card layouts?
Use Flexbox for simple, single-row layouts with wrapping. Use CSS Grid for precise control over columns and rows. Grid handles equal-height cards better. Both work well with responsive design patterns.
How do I make cards the same height?
CSS Grid automatically creates equal-height cards in the same row. With Flexbox, set align-items: stretch on the container. Avoid fixed heights; let content determine card size while the layout equalizes them.
What’s the best hover effect for cards?
Subtle scale transforms (1.02-1.05) combined with increased box shadow work best. Add transition: transform 0.2s ease for smooth animation. Avoid dramatic effects that distract from content or cause layout shifts.
How do I add images to CSS cards?
Place an img tag inside the card container before the content area. Set width: 100% and object-fit: cover on the image. Use border-radius on top corners to match the card shape.
Are CSS cards responsive by default?
Individual cards can be fluid, but the card grid layout needs viewport-based adjustments. Use CSS Grid’s auto-fill with minmax() or Flexbox with flex-wrap to create responsive card arrangements automatically.
How do I create a flip card effect?
Use CSS transforms with rotateY(180deg) on hover. The card needs front and back faces with backface-visibility: hidden. Check CSS flip cards for complete code examples and variations.
What padding should I use inside cards?
Standard card padding ranges from 16px to 24px. Smaller cards work with 12-16px. Keep padding consistent across all cards in a layout. Use CSS custom properties to maintain uniform spacing throughout your design.
How do I make cards accessible?
Use semantic HTML, proper heading hierarchy, and sufficient accessible forms if cards contain inputs. Add focus states for keyboard users. Clickable cards need clear interactive indicators and proper link structure.
Conclusion
These CSS cards examples cover everything from basic card components to advanced hover animations and glassmorphism effects.
Pick the card type that fits your project. Copy the code. Customize the styling.
Cards work because users instantly understand them. A well-designed card component improves usability and helps visitors scan content quickly.
Start with semantic HTML structure. Add CSS for visual polish. Test on mobile devices.
Whether you build cards from scratch or use Bootstrap form components alongside card layouts, the principles stay the same: clear hierarchy, consistent spacing, readable typography.
Bookmark this guide. Come back when you need a specific card pattern for your next user interface project.
