Pricing · DESIGN EDITION
Index design membership pricing
A design membership pricing section with a typographic introduction, asymmetric plan layout and explicit monthly and annual billing.
Small vanilla JavaScript enhancement · MIT codeFree HTML pricing table and service package snippets
Compare responsive pricing sections for service packages, memberships and software plans. Download HTML/CSS, billing toggle examples and Astro components.
- HTML + Astro components
- Open code and individual downloads
- MIT code · scoped styles
6 designs
Pricing · HTML + ASTRO
Agency service package pricing
Three plain service-package cards with defined scope, one-off prices and enquiry links.
No JavaScript required · MIT code
Pricing · HTML + ASTRO
Membership row pricing
A horizontal membership rate list with inclusions, monthly prices and individual action links.
No JavaScript required · MIT code
Pricing · HTML + ASTRO
Software pricing with billing switch
A software pricing section with monthly and annual options, explicit annual totals and live price announcements.
Small vanilla JavaScript enhancement · MIT code
Pricing · HTML + ASTRO
Feature comparison pricing table
A semantic feature comparison table with plan headers, row labels and included/not-included text.
No JavaScript required · MIT code
Pricing · HTML + ASTRO
Professional service rate card
A restrained service rate card with fixed-scope items, starting prices and an enquiry column.
No JavaScript required · MIT codeCHOOSING A SECTION
Using these pricing
A pricing section should make the differences between options easy to understand. Use cards for a few packages, rows for memberships or service rates, and a real comparison table for a detailed feature matrix. The examples here include both one-off and recurring prices. All figures are editable sample content; replace them with your actual currency, scope and billing terms. The software example shows monthly prices, annual totals and a calculated monthly equivalent without inventing a discount.
- Place the currency, billing period and relevant tax note beside the price.
- Use specific inclusions rather than vague claims about value.
- Keep comparison tables scrollable within their own region on narrow screens.