Champagne Paper

Components / Cards

Cards

The container surface. Three tiers of elevation communicate importance: Standard (shadow-sm), Featured (shadow-burg, burgundy glow), and Plain (no shadow). Featured cards should be used sparingly — one per section maximum.

Preview

Apex Accelerators
Corporate L&D Solutions

Tailored organizational transformation and rapid team upskilling.

Variants

Standard

.com
Xuperson Institute
Leadership & Strategy

Standard shadow-sm elevation for default content cards.

shadow-sm · border-border

Featured

Most Popular
XPS Associate
$299 / year

Featured tier with burgundy glow. One per section maximum.

shadow-burg · border-primary/30

Plain

XPS Affiliate
Free forever

No shadow, border only. For supporting or list items.

shadow-none · border-border

Dark Surface

Deep Research
Xuperson Review

Cards on dark surfaces use white/5 background with white/10 border.
Featured · Dark
Burgundy glow on dark

Burgundy glow works on dark surfaces. Reduce opacity to 0.15.

Usage Guidelines

✓ One featured per section

The burgundy glow featured card draws the eye. Use it once per section to mark the primary offering.

✓ Consistent padding within grids

All cards in a grid row use the same padding. Mix p-5 and p-8 only across different sections, not the same grid.

✗ Nested cards

Cards should not contain other cards. Use a different surface pattern (muted bg, inset border) for nested content.

✗ Cards without clear hierarchy

Every card set should have one standard, one featured, or all plain — never random elevation mixing.

← Buttons Badges →