Build a Webflow pricing table using a Grid or Flexbox container with Div Block cards for each tier. Use a combo class (e.g., 'card-highlighted') to visually elevate the recommended plan. Feature lists use unordered lists or stacked Div rows. The billing toggle (monthly/annual) requires Webflow Interactions with show/hide actions.
Build a Responsive Pricing Table in Webflow: Cards, Feature Lists, and Highlighted Plans
A pricing table is one of the most conversion-critical components on any SaaS or service website. In Webflow, it is built entirely in the visual editor using a combination of Flexbox layout, Div Block cards, and list elements — with a combo class technique to highlight the recommended plan. This tutorial walks through the complete build from structural setup to responsive mobile layout, including how to style a feature comparison list with checkmarks and how to add a monthly/annual billing toggle using Interactions.
Prerequisites
- Any Webflow plan (no CMS or code injection required for the basic layout)
- A class naming convention in mind (e.g., 'pricing-card', 'pricing-card-featured')
- Your pricing tiers defined: plan names, prices, and feature lists for each tier
Step-by-step guide
Create the pricing section container
Create the pricing section container
Add a Section element to your page (Add Elements panel, A key > Structure > Section). Inside it, add a Container (Add panel > Structure > Container) and give it the class 'pricing-container'. Set the Container: Style Panel (S) → Layout → Display: Flex, Direction: Horizontal, Justify: Center, Align: Stretch, Gap: 24px (column gap). Set Spacing: Padding top/bottom 80px. On the Container, also set Size → Max Width: 1100px so the layout stays centered on wide screens. This flex container will hold your pricing cards side by side.
Expected result: A centered section with a flex container ready to receive pricing cards. At this point it is empty, but the layout foundation is in place.
Build a single pricing card
Build a single pricing card
Inside the pricing-container, add a Div Block (Add panel > Basic > Div Block). Give it the class 'pricing-card'. Style it in the Style Panel: Size → Width: 100% (flex child will size it); Spacing → Padding: 32px all sides; Borders → 1px solid #E5E7EB, border-radius 16px; Backgrounds → white. Add Layout → Display: Flex, Direction: Column, Justify: Space Between (this pushes the CTA button to the bottom of every card regardless of content length). Inside 'pricing-card', add the card content: a Text element for the plan name (class: 'plan-name'), a Heading for the price (class: 'plan-price'), a Text element for the billing period ('/month'), a Divider, a List element for features, and a Button at the bottom.
Expected result: One styled pricing card appears in the flex container with a visible border, internal padding, and vertically spaced content sections.
Duplicate the card and create all tiers
Duplicate the card and create all tiers
Select the pricing-card Div Block in the Navigator panel (Z key). Right-click > Duplicate (or Cmd/Ctrl + D) twice to create three cards total. Edit the content of each card directly on the canvas: click each text/heading element and type the plan name, price, and feature list items. For the feature list: select the List element, set its list type to 'None' in Style Panel > Typography (remove default bullets). Add Text Link or Div elements inside each List Item for the feature text and icon. You now have three cards with identical styling and different content.
Expected result: Three pricing cards sit side-by-side in the flex container, all the same width and height (due to Align: Stretch), each showing different plan content.
Highlight the recommended plan with a combo class
Highlight the recommended plan with a combo class
Select the middle (recommended) pricing card. In the Style Panel Selector field (top), the class 'pricing-card' is shown. Click the '+' icon next to the class name to add a combo class. Type 'featured' and press Enter. The combo class 'pricing-card featured' is now applied — any styles added here override the base class only for this element. Style the highlighted card: Backgrounds → brand primary color or a rich dark background (e.g., #111827). Typography → change text colors to white (select child elements and update). Borders → remove border or use a brand-color border (2px solid #0057FF). Effects > Box Shadows → add a larger shadow (e.g., 0 20px 60px rgba(0,0,0,0.15)) for elevation. Optionally add a 'Most Popular' badge: add a Div Block above the plan name, position it with negative top margin or absolute positioning, style with brand accent color.
Expected result: The middle card visually stands out with a contrasting background, elevated shadow, and white text while maintaining the same dimensions and layout as the other cards.
Style the feature list with checkmark icons
Style the feature list with checkmark icons
For each feature row inside the List element, select a List Item and set it to Display: Flex, Align Items: Center, Gap: 10px. Add an SVG icon element (Add panel > Media > SVG or Embed element with inline SVG) for the checkmark. Style the icon: Size → Width: 18px, Height: 18px, color your brand primary (for SVGs using currentColor). Add a Text element for the feature description. To visually differentiate unavailable features: add a second version of the icon in gray/muted color and use it for 'not included' list items. For the highlighted card, update the icon colors to white or accent in the combo class context by selecting each icon inside the featured card and checking its inherited styles.
Expected result: Each feature row shows a checkmark icon followed by feature text. Icons are visually consistent and properly aligned with the text baseline.
Make the pricing table responsive for mobile
Make the pricing table responsive for mobile
Switch to the Tablet breakpoint (breakpoint bar, top of Designer). Select the pricing-container Div. In the Style Panel: Layout > Direction → change from Horizontal to Vertical (column). This stacks the cards vertically on tablet. Optionally: set Align Items to Stretch so cards take full width. Switch to Mobile Portrait breakpoint. Verify the cards look correct. Adjust card padding: Spacing → reduce padding to 24px if 32px feels too much on small screens. Size → set cards to Width: 100% if they're not already filling the column. If you have a 'Most Popular' badge using absolute positioning, verify it is not clipping outside the card on mobile — adjust badge positioning per breakpoint.
Expected result: On tablet and mobile viewports, cards stack vertically. Each card spans the full width of the container. The layout is readable and the featured card's visual treatment is preserved on mobile.
Add a monthly/annual billing toggle
Add a monthly/annual billing toggle
To build a toggle that switches between monthly and annual pricing: Step 1 — Create two price text elements inside each card: one for monthly (class: 'price-monthly') and one for annual (class: 'price-annual'). Initially hide the annual price: select all 'price-annual' elements > Style Panel > Layout > Display: None. Step 2 — Add a Toggle UI above the cards: a Div Block with two text labels ('Monthly' / 'Annual') and a toggle button styled with a pill shape. Step 3 — Select the toggle button > Interactions panel (H key) > Element trigger > Mouse Click (Tap). 1st Click animation: Show 'price-annual' elements (change Display to Flex, 0.2s fade), Hide 'price-monthly' elements (Display None). 2nd Click animation: reverse. Target by Class for all price elements to update simultaneously. Step 4 — Use trigger scope 'Class' to ensure all cards update at once.
Expected result: Clicking the billing toggle shows/hides the monthly vs. annual pricing across all three cards simultaneously. The interaction feels smooth without layout jumps.
Complete working example
1WEBFLOW PRICING TABLE — VISUAL STEPS SUMMARY231. SECTION + CONTAINER4 Section → Container (class: pricing-container)5 Style: Display Flex, Direction Horizontal, Align Stretch, Gap 24px6 Max Width 1100px, Padding 80px top/bottom782. PRICING CARD (base)9 Div Block (class: pricing-card)10 Style: Width 100%, Padding 32px, Border 1px solid #E5E7EB11 Border-radius 16px, Background white12 Layout: Flex Column, Justify Space Between13 Contents: plan-name (Text), plan-price (Heading), billing text,14 Divider, feature List, Button15163. DUPLICATE × 317 Navigator (Z) → select pricing-card → Cmd+D twice18 Edit content of each card on canvas19204. HIGHLIGHTED CARD (combo class)21 Select featured card → Style Panel selector → '+' → type 'featured'22 Combo class overrides: dark/brand background, white text, larger shadow23 No re-styling needed for inherited base styles (padding, radius, etc.)24255. FEATURE LIST ROWS26 List Item: Display Flex, Align Center, Gap 10px27 SVG checkmark icon + Text element per feature28296. RESPONSIVE (Tablet breakpoint)30 pricing-container: Direction → Vertical (stacks cards)31 Cards: Width 100%, reduce padding as needed32337. BILLING TOGGLE (optional)34 Add price-monthly + price-annual elements inside each card35 Hide price-annual: Display None (default)36 Toggle button → Interactions (H) → Mouse Click 1st/2nd Click37 1st Click: Show annual prices (by Class), Hide monthly prices38 2nd Click: reverse39 Scope: Class (updates all cards simultaneously)Common mistakes
Why it's a problem: Cards have different heights because feature lists are different lengths
How to avoid: Select the pricing-container flex parent → Style Panel → Layout → Align Items → change to Stretch. This forces all flex children (the cards) to grow to the tallest card's height. Combined with Flex Column + Justify Space Between on each card, buttons will align at the bottom of all cards.
Why it's a problem: Combo class styles on the featured card are overriding all text colors, but some nested text elements remain the wrong color
How to avoid: Combo class styles apply to the element the class is on, not its children automatically. For child elements (plan name, price, features text inside the featured card), select each child element individually and set their text color to white (or your desired color) directly in the Style Panel. These child styles are independent of the parent combo class.
Why it's a problem: Pricing table looks broken on tablet — cards overflow or are too narrow
How to avoid: On the Tablet breakpoint, change the pricing-container direction from Horizontal to Vertical: Style Panel (S) → Layout → Direction → Vertical. Set each pricing-card width to 100% on this breakpoint so cards fill the available width when stacked.
Why it's a problem: Billing toggle interaction updates only one card's price instead of all three
How to avoid: In the Interactions panel, when targeting the price elements, change the target scope from 'Selected element' to 'Class' — this updates all elements sharing the same class ('price-monthly', 'price-annual') simultaneously with one interaction trigger.
Best practices
- Use combo classes for the featured card — never create a completely separate class with all styles duplicated, as this creates a maintenance burden when the base card style changes
- Set Justify Content: Space Between on the card's flex direction to push CTA buttons to the same vertical position regardless of feature count differences
- Always test the highlighted card's text contrast against its background using a WCAG contrast checker — white text on a dark background needs 4.5:1 ratio minimum
- Keep feature list copy concise — long feature descriptions wrap awkwardly inside narrow cards, especially on mobile
- Add a subtle 'scale up' transform (Scale Y: 1.02 or Scale: 1.03) to the featured card on Desktop to make it slightly taller than the others — a classic SaaS pricing table technique
- For annual pricing, show the savings amount prominently ('Save 20%' badge) near the price — this is the primary reason users switch to annual
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a pricing table in Webflow with 3 tiers: [Free/Pro/Business or your plan names]. The middle plan should be highlighted as recommended. Each card has [list your features]. Walk me through the exact Webflow Designer steps to build this using Flexbox cards, a combo class for the featured tier, and responsive stacking on mobile — using only Webflow's visual panels (Style Panel, Element Settings, Navigator).
In my Webflow pricing table, I need to add a monthly/annual billing toggle that switches the price displayed in all 3 cards simultaneously. I already have 'price-monthly' and 'price-annual' text elements in each card. Walk me through setting up the Webflow Interaction (Mouse Click trigger, Class scope) to show/hide the correct prices when the toggle is clicked.
Frequently asked questions
Should I build the pricing table with CSS Grid or Flexbox in Webflow?
Either works, but Flexbox is more commonly used for pricing tables because of Align Items: Stretch (equal card heights) and Justify Content: Space Between on cards (bottom-aligned CTAs). CSS Grid is better when you need a feature comparison table with aligned rows across multiple columns — for that layout, a Grid with defined columns lets feature rows align across cards more precisely.
How do I connect pricing card buttons to Stripe Checkout?
Webflow has no native Stripe integration for one-click checkout. The most common approach: set each pricing button's URL (Element Settings > Link > URL) to a Stripe Payment Link or Stripe Checkout URL for the corresponding plan. Create Payment Links in your Stripe Dashboard under Products. For subscription billing, Stripe's hosted Checkout page handles all payment collection and you redirect users back to your Webflow site via a success URL parameter.
Can I connect the pricing table to Webflow CMS to manage pricing content?
Yes — create a CMS Collection called 'Pricing Plans' with fields for plan name, price, billing period, feature list (Multi-Image or Rich Text), and a Switch for 'is featured'. Then replace the static Div Block cards with a Collection List bound to this Collection. This lets non-technical team members update pricing without touching the Designer. Note: this requires a CMS plan or above.
How do I add an annual savings badge to the highlighted pricing card?
Add a Div Block inside the featured pricing-card at the top of the card content. Give it a class 'savings-badge'. Style it: display inline-block or inline-flex, background accent color (e.g., green or yellow), border-radius 100px (pill shape), padding 4px 12px, font-size 12px, font-weight 700, white or dark text. Position it with a negative top margin (e.g., -8px) to visually overlap the top border of the card, or use absolute positioning with a small inset for a floating label effect.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation