Cards are the building blocks of modern web design. Nielsen Norman Group defines them as containers that group related information into scannable, flexible units. We design card systems that help users browse, compare, and decide — whether you're showing 6 services or 6,000 products.
PATTERN VARIANTS
Showcase your business offerings in a scannable grid. Each card includes an icon, title, short description, and CTA.
The workhorse of e-commerce. Image, title, price, rating, and add-to-cart CTA. Designed for rapid scanning.
Introduce your team with photo, name, role, and optional bio or social links.
Showcase work with a dominant image, project title, client name, and category tag. Image does most of the selling.
Compare tiers side by side. Each card includes plan name, price, feature list, and CTA.
Display client quotes with avatar, name, role, company, and the testimonial text.
Preview blog posts with featured image, title, excerpt, author, date, and category tag.
Asymmetric card grid where cards have different sizes — some take 2 columns, some are tall, some are wide.
ANIMATIONS & EFFECTS
Cards appear one by one with a slight delay between each, creating a cascade effect as the user scrolls.
When to use: Any card grid where content loads as the user scrolls. Creates rhythm and draws attention.
Card elevates (translateY -4px to -8px) and shadow deepens on hover, simulating physical depth.
When to use: Any clickable card. The most common and expected card interaction.
The card image scales up slightly (1.05-1.1x) on hover while the container clips the overflow.
When to use: Portfolio cards, product cards, blog cards — anywhere the image is the primary visual element.
A semi-transparent overlay slides in on hover, revealing additional information hidden in the default state.
When to use: Portfolio grids where you want a clean visual grid but need to show details on interaction.
Pinterest-style layout where cards of different heights fit together without gaps. New cards load dynamically.
When to use: Image galleries, blog archives, user-generated content feeds with naturally different heights.
Card rotates 180 degrees on hover to reveal a back face with different content.
When to use: Team cards (front: photo, back: bio), pricing cards (front: features, back: comparison). Use sparingly.
BEST PRACTICES
AWARD-WINNING EXAMPLES
Feature cards on a dark background with subtle gradient borders. Minimalist, information-dense, and technically precise. Each card communicates one feature.
Bento grid layout with cards of different sizes. Glassmorphic effects and subtle animations make dense financial data feel approachable.
Product cards perfected. Image carousel per card, price overlay, rating, and heart icon. Shows exactly enough information to decide whether to click.
Clean card grid with consistent heights, clear categories, and preview thumbnails. Hover reveals a "Use template" CTA. Scales flawlessly.
OUR PROCESS
Inventory all items that will appear as cards. Define the data model: which fields exist and their content length constraints.
Define column count per breakpoint (4 desktop, 2 tablet, 1 mobile). Set gap spacing, padding, and border-radius.
Design the card in Figma as a reusable component with variants: default, hover, active, loading, empty state.
Define hover effects, scroll-triggered reveals, and transition timing. Keep total animation time under 500ms.
Build with CSS Grid or Flexbox. Component-based architecture. GSAP for scroll animations, CSS for hover effects.
Test with real data, edge cases, cross-browser, touch interaction on mobile, and accessibility audit.
RELATED PATTERNS
The section that introduces your content before the card grid.
Learn more →A specialized card pattern for comparing service tiers.
Learn more →Testimonial cards and logo grids that build trust.
Learn more →Article cards and content discovery layouts.
Learn more →FAQ
Cards work best for browsing diverse collections (products, services, portfolio). Lists work better for ranked or sequential content. Tables work better for data-heavy comparisons. The layout should match the user's intent.
3-4 on desktop (1280px+), 2 on tablet (768px), 1 on mobile (375px). More than 4 per row makes individual cards too small to scan.
Yes, always. Mixed aspect ratios create uneven card heights that break the grid. Use object-fit: cover to crop images consistently.
Define a fixed card height per row. Truncate long text with CSS line-clamp. Design for the worst case and ensure shorter content still looks balanced.
We'll audit your current layout, identify opportunities for card-based design, and propose a system that scales.