Features Pricing Pattern
A three-column pricing comparison layout with engagement model cards.
Structure
- Section: Light beige background with generous padding
- Header: Centered eyebrow + headline
- Grid: 3 equal columns (stacks on mobile)
- Cards: White background with shadow, rounded corners
Card Components
- Title: Card heading (h3)
- Description: Brief explanation of the model
- Price Block: "Starting at" pill + large price figure
- Ideal For: Target audience description
- Timeline: Expected duration
- Features List: Checkmark items (accessible)
Accessibility Notes
- Checkmark icons use
aria-hidden="true" to prevent screen readers from announcing decorative symbols
- All text has sufficient color contrast
- Semantic HTML structure with proper heading hierarchy
Customization
- Edit card titles, descriptions, and prices directly in the editor
- Add/remove feature list items as needed
- Background color uses
var(--base-light)