Annual Toggle Two Tier

About this block

Annual Toggle Two Tier opens with a centered heading and a short subline, then a billing period row: a "Monthly" label, a toggle switch, an "Annual" label, and a small pill badge that reads "save 20%". Below that, two plan cards sit in a two-column grid. Each card shows the plan name, a one-line description, a large price that updates when the toggle switches, a billing cadence note, a full-width CTA button, and a checklist of feature lines with check icons. The Business card carries a primary-tinted border ring that distinguishes it as the featured tier.

The heading and subline are independent copy you can rewrite freely. The two plans are driven by a plain data array, so you can adjust names, prices, feature lists, and CTA labels without touching the layout. The "featured" flag on any plan controls the highlighted border, so you can shift emphasis by moving it to the other card or removing it entirely.

When to use

Reach for this block when you need a concise pricing section that surfaces two tiers and lets visitors commit to an annual rate without leaving the page. It works well on a logistics or delivery platform where operators compare a starter team plan against a business-grade plan with automations, and where an annual commitment is worth calling out clearly. It is a better fit than a three-tier layout when the product truly has two meaningful price points, because the side-by-side comparison stays tight and the toggle carries most of the decision weight.

A natural flow around it on a Marketing Pro page:

Before

• Feature sections to show what each plan unlocks before the visitor reaches the price
• How It Works to walk through onboarding steps so the CTA feels earned

After

• FAQs to address billing and cancellation questions that follow naturally after seeing a price
• Testimonials to reinforce the decision with social proof close to the CTA

What you can customize

Both cards share the same structure, so most changes apply symmetrically across tiers:

• Plan names and descriptions. Swap "Team" and "Business" for labels that match your product tier vocabulary, and update each one-line description to reflect what that tier is really for.
• Monthly and annual prices. Update the two price values per plan and the savings badge text to reflect your actual rate card; the toggle reads directly from those values.
• Feature lists. Add or remove checklist items per card to reflect what each tier genuinely includes; the list grows or shrinks without breaking the card layout.

Tip: keep the feature lists unequal in length between tiers so the Business card visibly offers more, which reinforces the upgrade argument.