Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Three-Tier Pricing — Free Website Section Template
Pricing · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Three-Tier Pricing — Free Pricing Table Template With Toggle
Three-Tier Pricing is the pricing layout most SaaS products use: three plan cards side by side, the middle one highlighted with a "Most popular" badge, and a monthly/yearly switch above them. Each card has a plan name, a line about who it's for, the price, a button and a checklist of what's included.
A billing switch that feels good
Click Yearly and every price changes at once. The highlight pill slides across with GSAP Flip, and the new prices roll into place. It's built for real use: the buttons say which option is selected (aria-pressed), it works without GSAP (prices still switch instantly) and the animation is skipped for people who prefer reduced motion. Turn the switch off for one-price plans.
Plans you can edit
Plans are a list: add a fourth, remove one, reorder or duplicate them. Type the monthly and yearly price for each, its features one per line, and its button text and link. Any plan with a badge gets the highlighted border and the filled button; the others get outline buttons. A price note such as "free forever" or "tailored to your team" replaces the /month suffix for free and custom plans.
Theme, motion and exports
Colours, fonts and corner radius come from the shared theme, so the table matches your hero and features. The heading reveals with SplitText and the cards stagger in on scroll. Export a single HTML file, a ZIP, a React or Vue component (the switch and its animation included), or fork into My Code.
Why use it
Why Use the Three-Tier Pricing
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, monthly / yearly switch, plans and note under the plans in the panel. Switch the monthly / yearly switch on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
Got questions?
Frequently Asked Questions
Clicking Yearly adds an is-yearly class to the section, and CSS shows the yearly prices instead of the monthly ones. GSAP Flip slides the highlight pill to the clicked option and the new prices roll in. Without GSAP the prices still switch, just without animation.
Yes. Switch off the Monthly / yearly switch group and only the monthly price and suffix are shown.
Type anything in a plan’s Highlight badge field, such as "Most popular" or "Best value". That plan gets the brand border, the badge and a filled button.
Yes. The exported component includes the switch script and loads GSAP and the Flip plugin from a CDN after it mounts.
It saves an editable copy of your Three-Tier 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. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.