Component Browser
BrowseBuild
Home/Browse/Pricing 41

Pricing 41

ImageButtonsSlider247 nodes ยท 36 styles
Pricing 41

Description

Three-tier pricing with monthly/yearly toggle, centered plan names, prices, feature lists, and bottom CTA buttons in bordered cards.

Detailed Analysis

This three-column pricing layout features a Monthly/Yearly toggle positioned in the top-right corner. Three bordered cards (Basic, Business, Enterprise) display centered plan names, prominent monthly prices, single-column feature lists with checkmarks, and full-width black CTA buttons at the bottom. The toggle enables billing period comparison while the centered card design creates a balanced, professional appearance. Progressive feature counts differentiate tiers.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingthree columnsbilling togglemonthly yearlycentered layoutfeature listcheckmarksCTA buttonspricing cardstiered pricingSaaS pricingtoggle switchclean design

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "42def2f0-ae27-7c31-8d28-512c66d1ffa0",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "1102621b-8347-40ad-f635-1331fe01d42a"
        ],
        "children": [
          "42def2f0-ae27-7c31-8d28-512c66d1ffa1"
        ]
      },
      {
        "_id": "42def2f0-ae27-7c31-8d28-512c66d1ffa1",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b0934d9a-875a-bb42-0630-12090a77fc73"
        ],
        "children": [
          "42def2f0-ae27-7c31-8d28-512c66d1ffa2"
        ]
      },
      {
        "_id": "42def2f0-ae27-7c31-8d28-512c66d1ffa2",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)