Card Grid

A responsive grid of cards showing different content types. Demonstrates how Lexicon components compose inside Card containers. Three columns on desktop, two on tablet, one on mobile.

Design Tokens

419 tokens across colour, type, spacing, radii, shadows, and motion. One source of truth for every surface.

CSSTailwindFigma

JP

Jonathan Pace

Product Designer

Building design systems and developer tools at the pace.

Online

2,847

Downloads this week

+18.2%

Quick Actions

Common tasks you can do right now.

Recent Activity

Deployedv1.0.0 released to production

UpdatedToken documentation refreshed

ReviewPR #42 awaiting approval

Storage

68%

6.8 GB used10 GB total

Components used

• Card, Badge, Button
• Avatar, Progress Bar
• Status Indicator

Key implementation details

• CSS Grid with repeat(auto-fill, minmax(280px, 1fr)) for automatic responsive columns
• Each card demonstrates a different content pattern: media, profile, stat, action, activity, metric
• Cards use equal-height rows via grid stretching
• Content within cards uses flex layout for consistent spacing