Card UI Design: 12 Best Practices to Build Cards Users Love
Cards are everywhere. From Stripe’s dashboard to Shopify product grids and Medium article previews, the card UI design pattern has become the backbone of modern web and mobile interfaces. But while cards look simple, designing them well is harder than it seems. Bad spacing, weak hierarchy or clumsy hover states can quickly turn a clean layout into visual noise.
In this guide, we break down what makes a great card, with real examples from SaaS, e-commerce and editorial sites, plus clear dos and don’ts you can apply today.
What Is a Card in UI Design?
A card is a self-contained, flexible container that groups related information and actions about a single subject. Think of it as a digital playing card: scannable, tappable and easy to rearrange in a grid. Cards work because they chunk content into digestible units, which helps users scan faster and act with confidence.
You’ll typically find cards used for:
- Product listings on e-commerce sites (Amazon, Shopify stores)
- Dashboard widgets in SaaS apps (Stripe, Linear, Notion)
- Article previews on blogs and news sites (Medium, The Verge)
- Profile and contact tiles in social or CRM tools
- Pricing tables on landing pages
The 12 Best Practices for Card UI Design
1. Establish a Clear Content Hierarchy
Every card should answer one question first: what is this? Make the primary element (a product name, article title or metric) the most prominent. Then layer in supporting info like price, author or date.
A solid hierarchy follows this order:
- Visual anchor (image, icon or illustration)
- Title or primary value
- Supporting metadata
- Description or snippet
- Call to action
Example: Airbnb listing cards lead with the photo, then the location, then price, then rating. Each element earns its place.
2. Use Generous and Consistent Spacing
Padding inside the card matters as much as the gap between cards. Cramped cards feel cheap; airy cards feel premium.
| Element | Recommended Spacing |
|---|---|
| Internal padding | 16px to 24px |
| Gap between title and body | 8px to 12px |
| Gap between cards | 16px to 32px |
| Distance to CTA button | 16px minimum |
3. Keep Card Dimensions Predictable
Variable heights in a grid break the visual rhythm. Either constrain content length (truncate with ellipsis) or align cards using CSS grid with equal row heights. Predictability helps the eye scan rows without re-anchoring.
4. Design Meaningful Hover and Focus States
A card should react when users interact with it. Subtle is better than dramatic.
- Do: Lift the card with a soft shadow (box-shadow blur 12 to 24px) and a 2 to 4px translate-Y on hover
- Do: Add a visible focus ring for keyboard users (accessibility matters)
- Don’t: Animate every element inside the card at once. It feels chaotic
- Don’t: Rely only on color change. Some users won’t perceive it
5. Choose the Right Card Style for the Context
Not all cards need a heavy shadow and border. Match the style to the surrounding UI.
| Style | Best For |
|---|---|
| Elevated (shadow) | SaaS dashboards, hero sections |
| Outlined (border only) | Settings panels, dense data UIs |
| Filled (background color) | Pricing tiers, feature highlights |
| Flat (no border, no shadow) | Editorial layouts, minimal blogs |
6. Make the Entire Card Clickable When Possible
If the card represents one entity (a product, an article), wrap it in a single link. Don’t force users to aim for a tiny “Read more” button. Just make sure secondary actions inside (like a bookmark icon) use proper event handling so they don’t trigger the parent link.
7. Use Images and Media Intentionally
Visuals are the first thing users see. A few rules:
- Maintain a consistent aspect ratio (16:9, 4:3 or 1:1) across the grid
- Use lazy loading for image-heavy pages
- Always include a fallback or skeleton state during loading
- Avoid stock-photo overload, especially in B2B SaaS contexts
8. Limit Actions Per Card
One primary action per card is the gold standard. Add at most one or two secondary actions (like “Save” or a kebab menu). More than that and you’re building a toolbar, not a card.
9. Respect Typography Scale
Use no more than three font sizes inside a card. A typical scale:
- Title: 16 to 20px, semibold
- Body: 14px, regular
- Metadata: 12px, regular, muted color
10. Design for Empty, Loading and Error States
A card grid isn’t done until you’ve designed what happens when data is missing. Use skeleton loaders that mirror the card structure, not generic spinners. Empty states should explain why and offer a next step.
11. Optimize for Mobile First
On mobile, cards usually stack to a single column. Test your card at 360px width. Watch for:
- Touch targets at least 44x44px
- Truncated titles still readable
- Images that don’t dominate the viewport
12. Test for Accessibility
Ensure color contrast meets WCAG AA (4.5:1 for text). Use semantic HTML: an <article> tag often makes more sense than a <div>. Keyboard users should be able to tab to each card and trigger its primary action with Enter.
Real Examples Across Industries
SaaS: Linear’s Issue Cards
Linear uses dense, outlined cards with clear status indicators. The title is bold, metadata sits on a single row with icons, and hover reveals quick actions. There’s almost no decoration, which fits the productivity context.
E-commerce: Allbirds Product Cards
Allbirds uses large square product images, generous white space, a clear product name, color swatches and a single price. There’s no button, the whole card is the link. Hover swaps the image to a second angle, a subtle but effective trick.
Blog: Medium Article Cards
Medium pairs a small thumbnail with a strong title, author, reading time and claps count. The hierarchy is text-first because the value is the writing, not the image. It’s a great example of matching card design to content type.
Common Card UI Mistakes to Avoid
| Don’t | Do Instead |
|---|---|
| Stack 4 buttons inside one card | One primary CTA, one optional secondary |
| Use heavy drop shadows everywhere | Match elevation to interactivity |
| Mix card widths in the same grid | Use a consistent grid system |
| Forget the loading state | Build matching skeleton cards |
| Cram 6 lines of description | Truncate to 2 to 3 lines max |
Quick Checklist Before Shipping Your Cards
- Hierarchy reads in under 2 seconds
- Spacing is consistent across breakpoints
- Hover, focus and active states are defined
- Empty, loading and error states exist
- Color contrast passes WCAG AA
- Touch targets are at least 44px on mobile
- Only one primary action per card
- Cards align to the same baseline grid
FAQ
What is the ideal card size in UI design?
There’s no universal size, but most product cards fall between 280px and 360px wide on desktop, with internal padding of 16 to 24px. The right size depends on your grid and content density.
Should cards have rounded corners?
Rounded corners (8 to 16px radius) feel friendlier and more modern. Sharp corners can work for editorial or enterprise UIs that want a more serious tone. Stay consistent across the product.
How many cards should appear per row?
On desktop, 3 to 4 cards per row is the sweet spot for product grids. Dashboards often use 2 to 3 larger cards. On tablet, drop to 2. On mobile, stack to 1.
Are cards still a modern design pattern in 2026?
Yes. Cards remain one of the most flexible and accessible patterns for grouping content. What’s evolving is the styling: flatter shadows, larger radii, more whitespace and stronger typography rather than heavy decoration.
What’s the difference between a card and a tile?
The terms are often interchangeable, but tiles tend to be more uniform and grid-locked (think Windows Start menu), while cards are more content-driven and varied in height. Cards usually carry more textual information.
Final Thoughts
Great card UI design isn’t about visual flair. It’s about clarity, rhythm and giving users exactly the information they need to make a decision. Start with hierarchy, respect spacing, design every state and resist the urge to add one more button. Do that consistently and your interface will feel polished, no matter the industry.