TaskBuild a 3-tier pricing layout. .pricing has display: grid, grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)), gap: var(--space-md). Each .tier has padding var(--space-lg), background var(--surface), border 1px solid var(--border), border-radius var(--radius-lg). .tier.featured has scale(1.02), border-color var(--primary), box-shadow var(--shadow-lg), position: relative. .tier.featured::before has content 'Most popular', position absolute, top: -10px, padding: 4px 12px, background: var(--primary), color: white, font-size: 11px, border-radius: var(--radius-pill). .tier h3 = plan name, .tier .price = big font-size 36px, .tier ul = features list with no list-style, .tier .cta = button. Three plans: Free, Pro $12, Team $39. Pro is featured.
Capstone 7: Pricing page (Stripe-style)
250 XP16 min
Theory
A pricing page that converts
Three tiers side-by-side. The middle tier β the one you want people to pick β is visually elevated: bigger, brighter border, "Most popular" ribbon, subtle drop-shadow. This isn't decoration; it's a proven conversion pattern. Users default to the tier that reads as "the sensible middle choice", and every SaaS pricing page you've seen exploits it.
Layout tricks
- auto-fit grid β
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)). Three cards on desktop, two on tablet, one on phone. Zero media queries. If a card can't fit at least 260px, the grid drops it to the next row. - align-items: start on the grid so the featured card can
transform: scale(1.02)without stretching the neighbours vertically. - Absolute-positioned ribbon β the "Most popular" chip lives at
top: -10px, left: 50%, transform: translateX(-50%)so it visually punches out of the card border.
Content shape (repeat per tier)
- Plan name (
h3). - Big price (
.priceβ 36px+). - Feature list (bulleted, no default list marker β replace
li::beforewith"β "in brand colour). - CTA button (filled for the featured tier, outlined for the others).
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 15 lessons in each track are free. No card needed for those.