Card
StableThree B2B card variations — Product, Category, and Account/Supplier — designed for enterprise catalogue and relationship management UIs.
Usage
Cards group related content into scannable, actionable units. Three visual variants and three sizes let you match card weight and density to context.
Default choice for feeds, dashboards, and listing pages. Subtle border and a light shadow give cards definition without competing with page content.
Border-only, no shadow. Use on elevated surfaces — panels, modals, or tinted backgrounds — where an added shadow would create visual noise.
High-emphasis shadow that deepens on hover. Reserve for one or two featured or promoted items per layout so the elevation cue stays meaningful.
Small — sm
240 px. Compact — image, badge, title, and read link only. Ideal for sidebars, related-article strips, and 4-column grids where space is tight.
Medium — md
310 px. Full content — image, badge, title, description, author row, and CTA. The default size for editorial feeds, category pages, and dashboards.
Large — lg
Full grid width. Horizontal layout — image fills the left 44%, all content on the right. Use for featured slots, hero strips, or the first item in a mixed-size feed.
Standard
White surface with border/default and Shadows/sm. The right choice for most editorial, product, and content grids.
Small · Standard
240 px compact card — image, badge, title, meta, and read CTA. No description or author row.
Accessibility Patterns Every B2B Team Should Know
Token-Driven Spacing in Enterprise Dashboards
User Interview Synthesis for Design System Teams
Medium · Standard
310 px full-content card — description and author row included. The default editorial card.
Component API Design for Scalable Design Systems
Explore strategies for prop naming, variant modelling, and backwards-compatible API evolution across product teams.
Alex Chen
Content Hierarchy in Card-Based Layouts
How progressive disclosure, type scale, and whitespace shape scanning patterns in feed UIs.
Sam Rivera
Token Aliasing — Semantic Layers in Practice
A walkthrough of how semantic aliases decouple component styles from primitive colour values in Figma.
Jamie Park
Large · Standard
Full-width horizontal card — image pane left, all content right. Spans the full page column.
Building Accessible Enterprise Dashboards: A Token-Driven Approach
This in-depth guide walks through ARIA patterns, focus management, colour-contrast token mapping, and keyboard navigation strategies for complex data-dense UIs used by thousands of internal users daily.
Alex Chen
Frontend Lead
Outline
Border only — no box shadow. Use on elevated surfaces (panels, modals, tinted backgrounds) where layering an extra shadow would add visual noise.
Small · Outline
Accessibility Patterns Every B2B Team Should Know
Design Token Auditing at Scale
Remote Synthesis Methods for Distributed Teams
Medium · Outline
Accessibility Patterns Every B2B Team Should Know
A practical walkthrough of ARIA roles, keyboard navigation, and colour-contrast requirements for enterprise dashboards.
Jamie Park
Mixed-Method Research for Product Teams
Combining usability testing, diary studies, and analytics into a cohesive evidence base for design decisions.
Lee Morgan
Platform Thinking in Design Systems
How to evolve a component library into a full product platform with shared tooling, governance, and documentation.
Sam Rivera
Large · Outline
Scaling a Component Library Across 12 Product Teams
How the design platform team adopted a governance model that keeps components coherent without becoming a bottleneck — practical advice on versioning, contribution guides, and token migrations.
Lee Morgan
Engineering Lead
Lifted
Shadows/md at rest — deepens to Shadows/lg and lifts 2 px on hover. Reserve for one or two featured items per layout so the elevation signal stays meaningful.
Small · Lifted
Hover any card to see the shadow deepen.
Accessibility Patterns Every B2B Team Should Know
Colour System Fundamentals
Onboarding Flows for Enterprise SaaS
Medium · Lifted
Primary editorial card — hover to see the lift transition (shadow + 2 px translateY).
Jobs-to-Be-Done in Design System Adoption
Framing component usage decisions around what teams are trying to accomplish, not what components exist.
Sam Rivera
Atomic Design at Enterprise Scale
Lessons from applying Brad Frost's methodology across a 60-person product org, including where atoms need to grow.
Alex Chen
Dark Mode Tokens — Mapping Light to Dark
How to build a dark-mode token layer that is semantic, not mechanical, and why inverting hex values always fails.
Jamie Park
Large · Lifted
Featured hero card. Hover to see the lift transition.
The Complete Guide to Design Token Architecture in 2026
Covers primitive vs semantic tokens, multi-brand theming, dark mode mapping, Tokens Studio JSON structure, and how to keep tokens in sync between Figma and your codebase — end to end.
Jamie Park
UX Lead
Sizes
Three sizes scale dimensions, content density, and typography simultaneously. All spacing, radius, and shadow tokens remain consistent.
Small vs Medium side by side
sm omits description and author to stay compact. md adds both, along with the publication date in the meta row.
Accessibility Patterns Every B2B Team Should Know
Accessibility Patterns Every B2B Team Should Know
A practical walkthrough of ARIA roles, keyboard navigation, and colour-contrast requirements for enterprise dashboards.
Jamie Park
Large — full-width featured
lg is always width: 100% with a horizontal image pane. The image fills the left 44%, content fills the right.
Information Architecture for Navigation-Heavy Enterprise Products
How to apply card sorting, tree testing, and mental-model interviews to define IA that scales across three product lines and 40+ distinct user roles.
Lee Morgan
UX Researcher
Anatomy
The medium card is the reference anatomy. All labelled parts appear in md. The sm card omits description and author; lg reuses the same parts in a horizontal layout.
Accessibility Patterns Every B2B Team Should Know
A practical walkthrough of ARIA roles, keyboard navigation, and colour-contrast requirements for enterprise dashboards.
Jamie Park
Image area
background/subtle · w-full · flex-shrink-0 · height via scale/*
Badge
background/state/info/subtle · text/brand · border/* · radius/sm
Bookmark
background/page overlay · text/secondary → brand/default on active
Meta row
text/tertiary · Clock icon · font/size/12 · scale/8 gap
Title
text/primary · font/weight/semibold · font/size/15 · leading-snug
Description
text/secondary · font/size/13 · leading-relaxed · md + lg only
Author divider
border/subtle · 1px solid · padding-top scale/12
Avatar
background/brand/primary · text/inverse · radius/full · 26 × 26 px
Author name
text/primary · font/weight/medium · font/size/12
Read CTA
text/brand · ArrowRight icon · font/weight/medium
Card radius
radius/lg (sm · md) · radius/xl (lg)
Card shadow
Shadows/sm (standard) · Shadows/md (lifted) · none (outline)
States
Cards expose three states: default (resting), hover (lifted shadow on the lifted variant), and saved (bookmark active). Disabled mutes the surface and removes interaction.
Default · Hover · Saved
Hover the middle card to see the lifted shadow. Click the bookmark icon to toggle saved state.
Default — resting state
Resting state with standard shadow and border. Ready to receive hover or interaction.
Jamie Park
Hover — try hovering this card
Shadow deepens to Shadows/lg and the card lifts 2 px on hover. Click the bookmark icon to save.
Alex Chen
Outline — border only
No shadow. The bookmark and read CTA still respond to interaction normally.
Sam Rivera
Disabled
50% opacity, pointer-events removed. Communicates unavailability without removing the card from layout flow.
Disabled card
Opacity 50%, pointer events removed. Use only to signal content that is temporarily unavailable.
Jamie Park
Disabled · sm
Design tokens
All visual properties map to Figma variables. CSS custom properties follow the same naming convention as the token collections in the Figma file.
| Token | Value | Description |
|---|---|---|
background/page | #ffffff | Card fill — standard · outline · lifted |
background/subtle | #f9fafb | Image placeholder · disabled card surface |
background/inset | #f4f4f5 | Neutral badge background |
text/primary | #111827 | Title · author name |
text/secondary | #6b7280 | Description body · general icon colour |
text/tertiary | #9ca3af | Meta row (time · date) · author role · numbered anatomy labels |
text/inverse | #ffffff | Avatar initials text |
text/brand | #207264 | Read CTA · brand-tone badge foreground |
background/brand/primary | #33A992 | Avatar background · bookmark active colour |
background/brand/subtle | #edfaf7 | Brand-tone badge background |
background/state/info/subtle | #eff6ff | Info-tone badge background |
border/default | #e4e4e7 | Card border (standard · outline) · neutral badge border |
border/subtle | #f4f4f5 | Author row top divider |
radius/sm | 4px | Badge corner radius |
radius/lg | 12px | Card corner radius — sm · md |
radius/xl | 16px | Card corner radius — lg |
radius/full | 9999px | Avatar circular radius |
scale/8 | 8px | sm card body gap · meta icon spacing |
scale/12 | 12px | sm card body padding · md card gap |
scale/16 | 16px | md card body padding |
scale/24 | 24px | lg card body padding |
Shadows/sm | 0 2px 8px rgba(0,0,0,0.06) | Standard card resting shadow |
Shadows/md | 0 8px 24px -4px rgba(0,0,0,0.10) | Lifted card resting shadow |
Shadows/lg | 0 16px 48px -8px rgba(0,0,0,0.16) | Lifted card hover shadow |
Props
All props are optional. Defaults produce a standard medium editorial card.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'standard' | 'outline' | 'lifted' | 'standard' | Visual style — controls border, shadow depth, and hover lift effect |
size | 'sm' | 'md' | 'lg' | 'md' | sm=240px compact · md=310px full · lg=100% width horizontal layout |
title | string | — | Card headline — displayed in all sizes |
description | string | — | Body copy — shown in md and lg only |
badge | { label: string; tone?: 'info' | 'brand' | 'neutral' } | null | null | Category chip in the top-left of the image zone. Pass null to hide. |
author | { name: string; role: string; initials: string } | null | null | Author row in the card footer — md and lg only. Pass null to hide. |
readTime | string | — | Reading time shown in the meta row — e.g. '5 min read' |
date | string | — | Publication date in the meta row — e.g. 'Mar 05, 2026' |
imageIndex | number | 0 | 0–4 — selects placeholder image palette (Design · Product · Strategy · Engineering · Research) |
disabled | boolean | false | Mutes card to 50% opacity and removes pointer events |
Content guidelines
Cards distil content to its most scannable form. These rules keep grids readable, accessible, and visually consistent.
- ✓Limit titles to 2 lines maximum — truncate at 3 with ellipsis for dynamic content
- ✓Use lifted sparingly — one per section maximum — so the elevation cue stays meaningful
- ✓Match badge tone to content category consistently across a page
- ✓Use lg only in full-width featured slots or at the top of a mixed-size feed
- ✓Supply author metadata for editorial or opinion-driven content
- ✓Maintain consistent image heights across cards in the same grid row
- ✕Mix variants within the same grid unless intentionally creating hierarchy
- ✕Use lifted for every card — the shadow stops communicating importance when overused
- ✕Place more than one badge on a card — it fragments the visual hierarchy
- ✕Use lg in a three-column grid — it's designed for single-column featured slots
- ✕Disable cards to restrict access — hide them instead or add a permission gate overlay
- ✕Override card width with a fixed px value inside a fill grid — use width: 100% instead
View in Figma
Card page — Card/Content/minimal · Card/Content/standard · Card/Content/complex