webdevpuneet.com

Single Plan Pricing

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

5 sectionsView all →
Pricing

Single Plan Pricing

Responsive · Animated
Pricing

Three-Tier Pricing

Responsive · Animated
Pricing

Pricing List Rows

Responsive · Animated
Pricing

Dark Glow Pricing

Responsive · Animated
Pricing

Pricing Comparison Table

Responsive · Animated

Single Plan Pricing — Free Website Section Template

Pricing · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryPricing
Tagspricingsingle planone priceguaranteeindiecoursebilling togglelight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Two columns: everything-included checklist and one price card
Included items typed one per line, shown in two columns
Plan name, sub-line, price, big button and guarantee line
Monthly/yearly switch with GSAP Flip, or switch it off
Shield icon guarantee line that hides when empty
Stacks into one column on narrow widths
SplitText heading, fading checklist and rising price card
Export HTML, a ZIP, React or Vue

About this section

Single Plan Pricing — Free One-Price Section Template

Single Plan Pricing: Pricing for products with one plan: on the left a heading, intro and a two-column "everything included" checklist; on the right a price card with the plan name, a monthly/yearly switch, the price, a button and a money-back guarantee line. Simple pricing, presented with confidence.

Single Plan Pricing is for products that don't need tiers. Instead of three cards that make visitors compare, it puts everything that's included in a two-column checklist on the left and one confident price card on the right, with the plan name, a monthly/yearly switch, the price, a large button and a money-back guarantee.

Built to convert

One price removes the "which plan?" hesitation. The checklist shows the full value at a glance, the guarantee line lowers the risk and the large button makes the next step obvious. Leave the guarantee empty to hide it, or switch off the billing toggle for a single price.

Edit in seconds

Type the included items one per line and they flow into two columns (one on phones). Set the plan name, the line under it, both prices, the button text and its link to your checkout page. The monthly/yearly switch slides with GSAP Flip and the price rolls over when it changes.

Theme and motion

It ships in a calm teal theme; switch presets, set exact colours or apply your brand kit. The heading reveals with SplitText, the checklist fades up and the price card rises in on scroll.

Export it

Download HTML or a ZIP, copy a React or Vue component with the switch included, or fork it into My Code. Need tiers after all? Try Three-Tier Pricing.

Why use it

Why Use the Single Plan Pricing

1
No comparison needed
One plan removes decision fatigue, so visitors focus on whether they want it, not which version.
☑
Shows the full value
A long, scannable list of what is included makes a single price feel generous.
🛡
Lowers the risk
The guarantee line right under the button answers the last objection before checkout.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, what’s included, price card and monthly / yearly switch in the panel. Switch the monthly / yearly switch on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🛠️
Indie product or tool
Solo founders with one plan can list every feature, show the monthly and yearly price and link straight to checkout.
🎓
Online course
List the modules, bonuses and community access as included items and use the guarantee line for your refund policy.
👥
Community or membership
Show what members get, such as events, resources and a private forum, with monthly or yearly membership pricing.
🚀
Launch or lifetime deal
Turn off the billing switch, set a one-off price and use the sub-line for "Launch price, ends Friday".

In real websites

Website Templates That Use the Single Plan Pricing Section

The Single Plan Pricing section is part of 2 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Online Course Website, Product Landing Page Store. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

Yes. Switch off the Monthly / yearly switch group, set the monthly price to your one-off price and change the price suffix to something like "one-time payment".

As many as you like; type one per line. Eight items fill two balanced columns, and the list drops to one column on phones.

Usually to your checkout page, such as Stripe Checkout, Lemon Squeezy, Gumroad or Paddle, or to your sign-up page for a free trial.

Yes. HTML, ZIP, React and Vue exports all include the small switch script, and GSAP with the Flip plugin loads from a CDN for the animation.

It saves an editable copy of your Single Plan Pricing in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.