Pricing Page
定价页
Aliases:价格方案页面定价页套餐价格页收费方案花多少钱的页面订阅方案页价格表
What is it
A commercial page that makes the offer legible: it opens with a headline and billing-period toggle, the body is a row of tier cards (price, feature list, action button) with the recommended tier visually emphasized, and a comparison table plus FAQ resolve remaining doubts. The order is fixed — pick a period, pick a tier, remove hesitation.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Subscription products or tiered offers
- Visitors must compare plans before buying
- Guiding upgrades from free to paid tiers
✕ When not to use
- One fixed price — fold it into the landing page
- Fully custom quoting — a contact-sales page fits better
- Logged-in billing management — that belongs to settings
Variants
Simple Tiers
简单分层
Three or four tier cards side by side, the classic
Billing Toggle
月年切换
Monthly/annual toggle with a discount hint
Feature Comparison
功能对比
Tier cards plus a full feature matrix
Freemium
免费增值
Free tier forever, paid tiers carry the pitch
Page structure
- 01
Header
The page proposition and positioning before any numbers.
- 02
Billing toggle
Monthly/annual toggle with the annual discount surfaced.
- 03
Tier cards
Two to four tiers, one visually recommended, each listing key differences.
- 04
Feature comparison
Item-by-item feature comparison, with secondary rows collapsible.
- 05
FAQ
Addresses billing, refund and upgrade concerns.
Implementation
flexgridgrid-template-columns: repeat(auto-fit, minmax(220px, 1fr))transform: scale(1.05)Lay tier cards in an equal-height grid; emphasize the recommended tier with an accent border, slight scale or a badge. The billing toggle is controlled state that switches prices with a number transition. The comparison table scrolls horizontally on desktop and collapses into an accordion on mobile; FAQ uses native details or an accordion.
Related concepts
A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsContainsA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsContainsA vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.
ComponentsContainsA two-dimensional grid aligning data in rows and columns — one record per row, one field per column — built for column-by-column comparison, sorting and high-volume browsing. Rows highlight on hover and support selection; column headers usually carry sort controls.
ComponentsContains