06 — Components
Cards & Lists
Four card variants for different content needs, plus standings and activity list patterns. Cards use border-radius: 16px, 1px borders, and subtle box shadows for elevation.
Card Variants
Four surface patterns — default border, elevated shadow, score (dark header), and horizontal thumbnail. All use border-radius: 16px.
Default
Charlotte FC Preview
Match preview ahead of Saturday's clash at Bank of America Stadium.
Elevated
Featured Match
Promoted content, pinned items, or featured stories.
CPSL League · FT
CC
Charlotte3–1
WIN
RA
RaleighSat, Feb 22 · Bank of America
Horizontal
Player Profile
Compact cards with side thumbnails. Great for player lists.
Standings List
Compact league standings — rank badge, team avatar, and six stat columns. Leader row highlighted blue.
TeamPWDLGDPts
1
181422+2444CC
Charlotte FC2
181143+1437RA
Raleigh Athletic3
181035+833DU
Durham UnitedActivity List
Event feed for live match updates. Icon background uses the event color at 13% alpha.
⚽
Goal — Thompson, R.
Charlotte FC vs Raleigh · 67'
🟨
Yellow card — Davies, M.
Raleigh Athletic · 54'
🔄
Substitution — Barnes for Cole
Charlotte FC · 45'