Canvas Pricing Blocks: 11 Layouts for Plans and Packages

Canvas HTML Template ships a dedicated pricing block demo that gives you 11 production-ready layouts covering subscription tiers, one-time packages, annual toggles, feature comparison rows, and highlighted “most popular” treatments — all built on Bootstrap 5’s grid with no third-party dependencies beyond Canvas’s own plugins.min.js and functions.bundle.js.

Why Pricing Layout HTML Is a Conversion Variable, Not a Design Detail

Conversion research consistently shows that the visual hierarchy of a pricing page — not just the price itself — determines whether a visitor upgrades or bounces. A card that buries the price below a list of bullet points performs measurably worse than one that leads with a large, bold figure. Canvas’s pricing blocks are architected with this in mind: price and plan name are always the visual anchors, feature lists follow, and call-to-action buttons close the card. That sequence mirrors the mental model a buyer uses: “What am I paying? What do I get? How do I start?”

If your project is a SaaS dashboard, a consultancy rate card, or a subscription box service, the right layout pattern can double the clarity of your offer. The wrong one — too many columns, no visual differentiation between tiers — forces the visitor to do cognitive work you should be doing for them.

Overview of the 11 Layouts in the Canvas Pricing Block Demo

The Canvas pricing block demo organises its 11 layouts into logical groupings. Here is what each category delivers:

• Simple card rows — Two or three Bootstrap columns, each holding a plan card. Minimal chrome. Ideal for agencies or freelancers with straightforward service tiers.
• Highlighted tier cards — The “Advanced Plan / $49.00 per Month” card receives a coloured background or border accent using --cnvs-themecolor, making the recommended tier visually dominant without extra markup.
• Subscription Plan header variant — Introduces a section heading (“Subscription Plan”) above the card row, giving context before the viewer reads price details. Useful on landing pages where pricing is one of many page sections.
• Icon-enriched cards — Adds a small icon above the plan name to reinforce tier identity (e.g., a shield for an enterprise plan).
• Feature list comparison blocks — Vertical lists of features with checkmark or cross indicators per tier, letting the visitor compare at a glance.
• Boxed table layout — A full-width comparison table format where features run as rows and plans run as columns. Best used when plans differ across many dimensions.
• Dark background pricing section — The same card data rendered inside a dark-themed wrapper, suitable for sections that break up a light-dominant page.
• Compact one-row layout — All tiers displayed horizontally in a single Bootstrap row with reduced padding; works well for widgets embedded in a sidebar or modal.
• Toggle / switch variant — A monthly/annual toggle above the cards; switching it updates visible prices. Built with Canvas’s existing JS without custom scripting.
• Outline card style — Cards use a border rather than a filled background, creating a lightweight visual feel appropriate for minimal or editorial designs.
• FAQ-appended block — A pricing card row with a collapsible FAQ section beneath it, reducing support queries by answering common objections inline.

Anatomy of a Canvas Pricing Card

Every layout shares a consistent HTML structure. Understanding it lets you extend or restyle any block without breaking the responsive behaviour. Below is a representative “Advanced Plan” card — the pattern that recurs across multiple visual treatments in the demo:

<div class="col-md-4">
  <div class="pricing-box">
    <div class="pricing-title">
      <h3>Advanced Plan</h3>
      <span>For growing teams</span>
    </div>
    <div class="pricing-price">
      <span class="price-unit">$</span>
      <span class="price-amount">49</span>
      <span class="price-tenure">/ Month</span>
    </div>
    <div class="pricing-features">
      <ul>
        <li>10 Projects</li>
        <li>50 GB Storage</li>
        <li>Priority Support</li>
      </ul>
    </div>
    <div class="pricing-action">
      <a href="#" class="button button-rounded">Get Started</a>
    </div>
  </div>
</div>

The .pricing-box wrapper is what Canvas’s CSS targets for border, shadow, and background rules. The highlighted-tier treatment simply adds a utility class (e.g., .best-price) to that wrapper, applying background-color: var(--cnvs-themecolor) and inverting text colour — no separate stylesheet required.

Theming Pricing Blocks with CSS Custom Properties

Canvas uses --cnvs-themecolor as the single source of truth for accent colour across all blocks, including pricing. To adapt any pricing layout to a client’s brand palette, you override this variable once at the :root level — or scope it to a specific section:

<section style="--cnvs-themecolor: #7b2ff7;">
  <!-- All pricing cards inside inherit the purple accent -->
</section>

This means you can run the same block-content-pricing-1.html layout across a SaaS product (blue), a fintech service (green), and a creative agency (purple) without touching a single class name or recompiling SCSS. For a deeper comparison of Canvas’s CSS variable approach versus SCSS compilation workflows, the post on SCSS vs CSS Variables for Theming Bootstrap 5 covers the trade-offs in detail.

Pairing Pricing Blocks with CTA Sections

Pricing tables work best when they are preceded by a benefit summary and followed by a trust signal — a testimonial row, a logo bar, or a guarantee statement. Canvas’s block library makes this straightforward because each block is a self-contained section you drop into page order. A common pattern seen in high-converting Canvas builds:

1. Hero or feature summary section
2. Pricing block (one of the 11 layouts)
3. Social proof row (testimonials or client logos)
4. CTA section with a single button

If you need guidance on designing those surrounding sections, the article on 12 CTA Section Designs to Boost Your Landing Page Conversions outlines patterns that pair well with pricing blocks specifically. For fintech or advisory projects where pricing is a central trust signal, see also The Canvas Finance Demo for Fintech and Advisory Sites, which demonstrates pricing integrated inside a full-page financial product layout.

When Not to Use a Three-Column Pricing Layout

Three-column pricing (Basic / Advanced / Enterprise) is the default mental model, but it is not always correct. Consider these situations where you should choose a different layout from the 11 available:

• Single-product businesses — One plan with optional add-ons is better served by the compact one-row layout or a feature checklist card, not three parallel columns implying choice where little exists.
• Mobile-first audiences — Three Bootstrap columns collapse to a stacked list on small screens. If most of your traffic is mobile, the two-column or single-card layout preserves comparison clarity without requiring the user to scroll through three full cards.
• Complex enterprise pricing — If plans differ across 15 or more features, the boxed table layout is the correct choice. Card-based layouts with truncated feature lists force the visitor to contact sales for information they should be able to self-serve.
• Service agencies billing hourly — Package cards (“Starter / Growth / Scale”) imply fixed deliverables. If your pricing is actually project-based, a simple rate card or call-to-action-only block avoids creating false expectations.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.