Component Browser
BrowseBuild
Home/Browse/Pricing 31

Pricing 31

TabsButtons4 ColumnsCards311 nodes ยท 35 styles
Pricing 31

Description

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

Detailed Analysis

This four-column pricing layout includes a centered Monthly/Yearly toggle at the top allowing users to switch between billing periods. Four bordered cards (Free, Basic, Business, Enterprise) display plan names with large monthly prices, followed by feature lists with checkmarks. Full-width black CTA buttons anchor each card at the bottom. The toggle provides clear billing period selection while the card layout maintains consistent structure across all tiers.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingfour columnsbilling togglemonthly yearlyfreemiumtiered pricingfeature listcheckmarksCTA buttonspricing cardstoggle switchSaaS pricingsubscription plans

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": "20c32ff8-924d-edad-ab82-ce07724c96b0",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "a334c71e-20aa-0acb-7a63-62d6f13b0025"
        ],
        "children": [
          "20c32ff8-924d-edad-ab82-ce07724c96b1"
        ]
      },
      {
        "_id": "20c32ff8-924d-edad-ab82-ce07724c96b1",
        "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": [
          "20c32ff8-924d-edad-ab82-ce07724c96b2"
        ]
      },
      {
        "_id": "20c32ff8-924d-edad-ab82-ce07724c96b2",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)