Pricing Table Component
Pricing tables are found on every SaaS website. This build creates a 3-tier pricing component with a highlighted recommended plan, feature checklists, responsive layout, and hover effects — using CSS Grid, Flexbox, and modern styling techniques.
Pricing Table Strategy
- Grid layout — 3-column grid with equal-width cards that stack on mobile
- Featured card — The recommended plan is visually elevated (scale, border, badge)
- Feature checklist — Clean list with checkmark icons using ::before pseudo-elements
- Responsive — Single column on mobile, 3 columns on desktop with auto-fit grid
- CTA button — Clear call-to-action with distinct styling on the featured plan
- Hover effects — Subtle lift and shadow on card hover. Scale on featured card
Mini-Build: Pricing Table
Tip
The featured pricing card uses transform: scale(1.05) + z-index: 1 to visually pop above adjacent cards. This pattern draws the eye to the recommended plan and is used on virtually every SaaS pricing page.
Flexbox is ideal for one-dimensional layouts (row or column)
Common Mistake
Fixed-width pricing cards that break on mobile. Always use grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) so cards stack to a single column naturally — no media query needed for the basic responsive behavior.
Practice Task
Enhance the pricing table: (1) Add a monthly/yearly toggle that changes prices, (2) Add hover: translateY(-4px) lift effect on non-featured cards, (3) Make the CTA button on featured plan filled, others outlined.
Quick Quiz
Key Takeaways
- Pricing tables are found on every SaaS website.
- Grid layout — 3-column grid with equal-width cards that stack on mobile
- Featured card — The recommended plan is visually elevated (scale, border, badge)
- Feature checklist — Clean list with checkmark icons using ::before pseudo-elements