Card Patterns

Flex layouts and text-align within Phase 3 rules

1. Media cards

Centered text and images inside equal-width cards

Hands shaping wet clay on a wheel

Studio Day

Throwing bowls before lunch

Ink brushes beside paper sheets

Ink Set

Four tones for sketch notes

Folded linen cloth on a wood table

Linen Stack

Soft cloth for props

2. Split card

One card uses flex + space-between for image and copy

Sunlit desk with notebook and pen

Morning Desk

A quiet layout for writing and review

  • Natural light from the left
  • Notebook stays in reach
  • One clear call to action

3. Stat cards

Large numbers, centered, with justify-content space-between on the row

Projects

24

Active this month

Reviews

91%

Positive feedback

Hours

128

Logged this week

4. Pricing cards

Three plans; featured plan uses a darker background

Starter

$0

  • 3 boards
  • Basic export

Pro

$12

  • Unlimited boards
  • Shared links

Team

$28

  • 5 seats
  • Admin tools

5. List card and form card

Side-by-side with space-between

Checklist

  • Wire structure
  • Add flex rows
  • Test overflow sizes

Quick note

Title
Owner email

6. Dark banner card

Full-width card with centered copy and centered actions

Ship the pattern library

Reuse these cards across login, shop, and settings screens

7. justify-content demos

Same chips, different main-axis distribution

flex-start

A
B
C

center

A
B
C

flex-end

A
B
C

space-between

A
B
C

space-around

A
B
C

space-evenly

A
B
C

Important CSS

Flex lays out card rows and action groups.

.card .actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}