UI Cards Catalog

Thirty-eight named, copy-pasteable card patterns (20 foundations + 18 modern extensions with state variants). Each section lists the stable name, CSS root class, and a live demo. See CATALOG.md for AI prompt recipes.

.card-product-stack

Product Stack Card

Classic e-commerce tile — vertical image-over-content stack.

Leather field notebook on a wooden desk

Field Notes Desk

$28

Compact hardcover notebook for sketches and trail plans.

.card-product-split

Product Split Card

Landscape product row — media left, details right. Variants: --flip, --sale, --dense, --featured.

Olive canvas backpack outdoors

Canvas Day Pack

SKU CDP-14 · ★ 4.8 (126)

$84

Ceramic pour-over kettle on a wood counter

Harbor Kettle

SKU HK-02 · ★ 4.9 (88)

$56

Sale Wool travel blanket folded on a bench

Trail Wool Throw

SKU TWT-09 · ★ 4.6 (54)

$48

$72

Compact stainless bottle

Field Flask 500

  • Insulated
  • Low stock

$32

Leather field journal with brass clasp

Editor’s pick

Brassbound Field Journal

Archival paper, linen wrap, and a clasp that survives a backpack tumble.

SKU BFJ-01 · ★ 5.0 (41)

$38

.card-pricing-plan

Pricing Plan Card

Standard plan picker. Variants: --annual, --compact, --enterprise.

Starter

$15/mo

  • Timeline views
  • Advanced search
  • Custom fields
  • Email support

Starter

$144/yr

Save 20%

Billed yearly · $12/mo effective

  • Timeline views
  • Advanced search
  • Custom fields
  • Email support

Solo

$9/mo

  • 1 project
  • Basic search
  • Community help

Enterprise

Custom

SSO, audit logs, and a shared success manager for larger orgs.

  • Everything in Team
  • SAML SSO
  • Dedicated support
  • Volume pricing on request
.card-kpi-stat

KPI Stat Card

Single analytics metric. Variants: --down, --flat, --dark, --progress.

Monthly revenue

$48.2k

12.4% vs last period

Churn rate

2.8%

0.6 pts vs last period

Open tickets

146

0.0% unchanged

Net promoter

64

3 vs last survey

Quota filled

72%

28% remaining this quarter

.card-sparkline-metric

Sparkline Metric Card

Metric plus mini chart. Variants: --warn, --dense, --fill, --dark.

Active users

7 days

12,480

8.2% vs prior week

Error rate

24 hrs

1.8%

0.4 pts

Sessions

Today

3,902

Conversion

30 days

4.6%

0.3 pts

Pipeline $

Q3

$1.2M

14% QoQ

.card-checklist-task

Checklist Task Card

To-do container with checkbox rows and status chips.

Today

  • Ship invoice draft

    Due 4:00 PM

    Due

  • Review sprint notes

    Done this morning

    Done

  • Call vendor

    Due tomorrow

    Soon
.card-notification-stack

Notification Stack Card

Activity feed with avatars, messages, and timestamps.

Notifications

  • Maya Chen

    Commented on your design brief.

    2m
  • Ops Bot

    Deploy finished for staging.

    1h
  • Jordan Lee

    Invited you to the Friday sync.

    3h
.card-profile-identity

Profile Identity Card

Vertical person intro. Variants: --compact, --verified, --dark, --status.

Portrait of Ava Morales

Ava Morales

Product designer

Builds clear interfaces for logistics and field tools.

Portrait of Jordan Lee

Jordan Lee

Research lead

Portrait of Sam Okonkwo

Sam Okonkwo

✓

Staff engineer

Ships accessible design systems for multi-brand storefronts.

Portrait of Riley Chen

Riley Chen

Online · Support

Helps teams adopt the catalog patterns in production.

.card-profile-banner

Profile Banner Card

Wide social profile strip. Variants: --compact, --scrim, --stack, --muted-stats.

Portrait of Noah Park

Noah Park

Frontend engineer · Seattle

128Posts
4.2kFollowers
318Following
Portrait of Mira Santos

Mira Santos

Content strategist · Lisbon

64Posts
1.1kFollowers
190Following
Portrait of Chris Adeyemi

Chris Adeyemi

Design ops · Lagos

210Posts
9.4kFollowers
402Following
.card-social-counters

Social Counters Card

Compact identity row with three inline counters.

Riley Quinn

@rileyq

86Posts
1.1kFollowers
204Following
.card-article-preview

Article Preview Card

Blog / news teaser with category overlay and footer meta.

Desk with laptop and notebook SEO

Top 10 ways to ace SEO for your business

Practical ranking habits that keep content discoverable without chasing every algorithm rumor.

Elena Brooks · 6 min read

.card-team-roster

Team Roster Card

Compact team member tile with social icon row.

Portrait of Casey Andrews

Casey Andrews

IT Specialist

.card-testimonial-quote

Testimonial Quote Card

Social proof quote with attribution — no CTA.

Excellent to work with and comfortable to customize. This is what I was looking for.

Marc Chiasson

UX designer, Adobe

.card-event-schedule

Event Schedule Card

Calendar meetup row with date badge and RSVP.

Sep 18

Design systems meetup

Harbor Studio, Floor 3

6:30 PM – 8:30 PM

.card-file-asset

File Asset Card

Downloadable file row with type icon and meta.

Q3-brand-guidelines.pdf

2.4 MB · PDF document

↓
.card-cart-line

Cart Line Card

Single cart/order line with quantity stepper and total.

Ceramic mug

Harbor Mug

Matte slate · 12 oz

2

$36

.card-condition-status

Condition Status Card

Weather or system status panel with tinted background.

Conditions

Mostly clear

72°

Portland, OR · Updated 10 min ago

.card-feature-benefit

Feature Benefit Card

Marketing “why us” tile — icon, title, one sentence.

Lightning Speed

Present everything you need in one place within minutes and grow from there.

.card-location-map

Location Map Card

Place card with map placeholder, address, and directions CTA.

.card-product-overlay

Product Overlay Card

Full-bleed storefront tile with scrim text. Variant: --hover-reveal.

Ceramic pour-over set

Harbor Pour Set

$64

Linen tote bag

Linen Market Tote

$42

.card-spec-sheet

Spec Sheet Card

Key/value comparison sheet. Variant: row --highlight.

Atlas Laptop 14″

Technical specifications

Display
14″ Liquid
Memory
16 GB
Storage
512 GB SSD
Weight
1.4 kg
.card-empty-state

Empty State Card

Zero-data surface with dual actions.

No projects yet

Create your first project to track tasks, files, and teammates in one place.

.card-progress-step

Progress Step Card

Onboarding step with bar. Variant: --complete.

Step 2 of 4

Invite your team

Add teammates now or skip and invite them later from settings.

Complete

Workspace ready

You’re all set. Open the dashboard to start shipping.

.card-settings-form

Settings Form Card

Dense settings surface with sticky-feeling action footer.

Profile settings

.card-alert-banner

Alert Banner Card

Status banner. Variants: --success, --warning, --danger.

Payment received

Invoice #1042 was paid in full.

Storage almost full

You have used 92% of your plan quota.

Deploy failed

Staging build exited with code 1.

.card-media-player

Media Player Card

Video/podcast poster tile. Variant: --playing.

Design systems in the wild

12:40

Shipping accessible forms

5:08 / 18:22
.card-comment-thread

Comment Thread Card

Discussion root with nested reply.

Maya Chen

2h ago

Love the spacing on the new dashboard header — feels calmer without losing density.

Noah Park

1h ago

Agreed — we tightened the gap tokens after the last review.

.card-kanban-task

Kanban Task Card

Pipeline board tile. Variant: --priority-high.

Draft onboarding email sequence

Content Q3
Sep 20

Fix checkout tax calculation

High Bug
Today
.card-booking-slots

Booking Slots Card

Availability picker. Slot variant: --sold-out.

Studio consult

$45

.card-invoice-summary

Invoice Summary Card

Receipt-style totals. Badge variants: --due, --paid.

Invoice #1042

Due
  • Design audit$800
  • Prototype kit$240
Subtotal$1,040
Tax$83.20
Total$1,123.20

Invoice #1038

Paid
  • Retainer — August$2,000
Subtotal$2,000
Tax$0
Total$2,000
.card-preference-toggle

Preference Toggle Card

Settings row with CSS-only switch — on and off demos.

Email digests

Weekly summary of project activity.

Marketing emails

Product news and occasional offers.

.card-skeleton-pulse

Skeleton Pulse Card

Loading placeholders. Variants: --stack, --kpi.

.card-glass-cluster

Glass Stat Cluster Card

Modern frosted KPI cluster over a photo backdrop.

128k

Users

$2.4M

Revenue

98%

Uptime

.card-float-cap

Float Cap Card

Portrait floats on the top center edge — half outside the card. Variants: --square, --dark.

Portrait of Mira Solen

Studio lead

Mira Solen

Brand systems · Lisbon

Ships calm product narratives for travel and field brands.

Ceramic pour-over set

Limited drop

Harbor Pour Set

Stoneware · Matte clay

A two-piece pour-over kit with a soft square silhouette.

Portrait of Theo Lang

Speaker

Theo Lang

Motion craft · Berlin

Keynote on deliberate motion for storefront heroes.

.card-edge-bleed

Edge Bleed Card

Photo hangs off the side edge — part inside, part outside. Variants: --flip, --tall.

Trail daypack against a stone wall

Ridge Day Pack

Canvas · 18L

Slim field bag with a floating photo that breaks the card edge.

$96

Brass desk lamp on oak

Brass Arc Lamp

Edition 04

Media flipped to the right edge for opposite-layout grids.

$148

Portrait bottle of coastal perfume

Coastal No. 7

Fragrance · 50ml

Pill-shaped media for tall product silhouettes.

$72

.card-corner-tuck

Corner Tuck Card

Photo tucked into a corner with a slight tilt — half outside. Variants: --start, --top.

Mountain trail at dusk

Weekend trip

Cascade Ridge Loop

A two-day trail with soft evening light and a tucked cover photo.

Ceramic bowls on linen

Kitchen edit

Linen Nest Bowls

Media tucked to the start corner for mirrored layouts.

Architect sketchbook spread

Workshop

Field Sketch Clinic

Photo peeks from the top-end corner above the body copy.