Product Card

Stable

Standard (vertical) and Horizontal product card layouts with availability pill, sale badge, star ratings, price display, and optional Add to Cart CTA — all token-bound.

View in Figma

Examples

The Card component has 6 variants across 3 sizes and 2 styles. All use a 12px corner radius, white background, and a primary CTA button.

Border vs Elevated

Border uses a 1px stroke (border/default). Elevated uses a drop shadow with no stroke. Both have the same internal structure.

IMAGE

Accessibility Patterns for B2B Teams

A practical guide to ARIA roles and keyboard navigation for enterprise dashboards.

IMAGE

Accessibility Patterns for B2B Teams

A practical guide to ARIA roles and keyboard navigation for enterprise dashboards.

Sizes — sm and md

sm (280px) is the compact default. md (380px) gives more room for richer content.

IMAGE

Accessibility Patterns for B2B Teams

A practical guide to ARIA roles and keyboard navigation for enterprise dashboards.

IMAGE

Design System Components

A structured library of reusable components built on semantic design tokens for consistency at scale.

Large (lg)

The lg card spans the full content width — ideal for hero or feature sections.

IMAGE

Enterprise Design Patterns

A comprehensive guide to scalable component architecture for large B2B applications and complex workflows.

Anatomy

IMAGE

Accessibility Patterns for B2B Teams

A practical guide to ARIA roles and keyboard navigation for enterprise dashboards.

imageArea

Placeholder frame — 168px (sm) · 228px (md) · 480px (lg)

Title

20–28px SemiBold · text/primary

Description

12–14px Regular · text/secondary

CTA Button

Primary · background/brand/primary · radius 8px

Design tokens

Token	Value	Description
`background/page`	`#ffffff`	Card background
`background/subtle`	`#f5f5f5`	Image area placeholder
`text/primary`	`#3b3b3d`	Title
`text/secondary`	`#4f5052`	Description
`border/default`	`#e5e7eb`	Border variant stroke
`background/brand/primary`	`#318272`	CTA button background
`text/inverse`	`#ffffff`	CTA button label
`radius/lg`	`12px`	Card corner radius
`shadows/md`	`0 8px 24px −4px`	Elevated variant shadow

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	sm=280px, md=380px, lg=1200px wide.
`variant`	`"border" \| "elevated"`	`"border"`	border=1px stroke, elevated=drop shadow.
`title`	`string`	—	Card heading text.
`desc`	`string`	—	Card body description.

Content guidelines

Use border on white/light backgrounds
Use elevated on tinted or coloured surfaces
Keep titles to 1–2 lines
Use imageArea for product or category images
Use sm for grids, md for featured, lg for hero

Don't

✕Don't use border and shadow on the same card
✕Don't nest cards inside cards
✕Don't use more than one CTA per card
✕Don't override the 12px corner radius
✕Don't use lg in multi-column grids

View in Figma: Card ComponentSet (526:14465)

←

Header