webdevpuneet.com

Pricing List Rows

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

Related Section Templates

5 sectionsView all →
Pricing

Pricing List Rows

Responsive · Animated
Pricing

Three-Tier Pricing

Responsive · Animated
Pricing

Single Plan Pricing

Responsive · Animated
Pricing

Dark Glow Pricing

Responsive · Animated
Pricing

Pricing Comparison Table

Responsive · Animated

Pricing List Rows — Free Website Section Template

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

CategoryPricing
Tagspricinglistrowspackagesagencyservicesbilling 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, 7 days free), 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

Plans as horizontal rows: name, chips, price and button
Featured row with a badge and brand border
Highlights typed one per line, shown as chips
Price notes such as "one-off" or "per project"
Up to 6 rows: add, duplicate, reorder and remove
Monthly/yearly switch beside the heading, animated with GSAP Flip
Aligned columns on desktop; stacks on tablets and phones
Export HTML, a ZIP, React or Vue

About this section

Pricing List Rows — Free Horizontal Pricing Section Template

Pricing List Rows: Plans and packages as horizontal rows instead of cards: each row shows the plan name and description, a few highlight chips, the price and a button, with one featured row picked out by a badge. A left-aligned heading sits beside the monthly/yearly switch. Rows stack neatly on phones.

Pricing List Rows lays plans out as horizontal rows instead of side-by-side cards. Each row has the plan name and description, a few highlight chips, the price and a button, so there's room for longer names, bigger prices and more plans than a card grid can hold comfortably. One featured row gets a badge and a brand border.

Made for packages

It suits agencies, freelancers and service businesses particularly well: one-off packages like "Launch" and "Growth" can show "one-off" instead of "/month", while a retainer or care plan uses the monthly/yearly switch. Highlights are typed one per line and appear as chips.

Up to six rows

Add, duplicate, reorder or remove rows. Columns line up from row to row on desktop; on tablets the chips and button move below the name and price, and on phones everything stacks.

Billing switch and motion

The switch sits beside the left-aligned heading and slides with GSAP Flip, rolling in the yearly prices. The heading reveals with SplitText and the rows stagger in on scroll. Switch the toggle off if every price is one-off.

Export it

Download HTML or a ZIP, copy a React or Vue component, or fork into My Code. For product plans as cards, see Three-Tier Pricing.

Why use it

Why Use the Pricing List Rows

☰
Room for detail
Rows give long names, large prices and highlight chips space that narrow cards can’t.
↕
Scales to more plans
Five or six packages read comfortably as a list, where five cards would be cramped.
🧾
One-off and recurring
Mix fixed-price packages and monthly plans in one list with price notes.

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, monthly / yearly switch and plan rows 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

🎨
Agency packages
List launch, growth and care-plan packages with what each includes as chips and a "Book a call" button on every row.
🧑‍🏫
Coaching or consulting
Offer a single session, a monthly programme and a VIP day as rows, with session counts and extras as highlights.
🔌
Add-ons and extras
Show optional add-ons such as extra storage, seats or priority support as rows under your main plans.
📸
Photography or events
Price half-day, full-day and wedding packages with hours, photos delivered and extras shown as chips.

In real websites

Website Templates That Use the Pricing List Rows Section

The Pricing List Rows 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: Photographer Website, Restaurant Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

When plans have long names or prices, when you have more than four options, or when you sell packages and services rather than software tiers. Rows also read well on phones.

Yes. Add a price note such as "one-off" or "per project" and it replaces the /month suffix for that row, in both monthly and yearly views.

Type text such as "Best value" in the row’s Highlight badge field; the row gets the badge, a brand border and a filled button.

Each row becomes a card with the name and description, then the price, the highlight chips and a full-width button.

It saves an editable copy of your Pricing List Rows 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.