Pricing 24

ImageTabsButtons3 ColumnsCards290 nodes · 42 styles

Description

Three-tier pricing table with monthly/annual toggle, featuring bordered cards with plan icons, pricing details, feature lists with checkmarks, and CTA buttons at the bottom.

Detailed Analysis

This pricing component presents three pricing tiers (Basic, Business, Enterprise) in a clean card-based layout. Each card features a 3D box icon in the top-right corner, plan name, prominent monthly pricing, a horizontal divider, and a feature list with checkmark icons. The billing toggle at the top allows switching between monthly and annual billing. Each card has a full-width black CTA button at the bottom. The layout uses equal-width columns with subtle borders and consistent spacing throughout.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingpricing tablesubscriptiontiered pricingbilling togglemonthly annualfeature listcheckmarksCTA buttonsthree columnspricing cardsSaaS pricingplan comparison

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": "2b31dd76-2862-5b3f-e77e-ebb9071c7fa7",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "8343319a-a93b-5de7-9372-ba137bdbe0fd"
        ],
        "children": [
          "2b31dd76-2862-5b3f-e77e-ebb9071c7fa8"
        ]
      },
      {
        "_id": "2b31dd76-2862-5b3f-e77e-ebb9071c7fa8",
        "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": [
          "2b31dd76-2862-5b3f-e77e-ebb9071c7fa9"
        ]
      },
      {
        "_id": "2b31dd76-2862-5b3f-e77e-ebb9071c7fa9",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [], "actionLists": [], "interactions": [] }, "nodes": [ { "_id": "2b31dd76-2862-5b3f-e77e-ebb9071c7fa7", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "8343319a-a93b-5de7-9372-ba137bdbe0fd" ], "children": [ "2b31dd76-2862-5b3f-e77e-ebb9071c7fa8" ] }, { "_id": "2b31dd76-2862-5b3f-e77e-ebb9071c7fa8", "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": [ "2b31dd76-2862-5b3f-e77e-ebb9071c7fa9" ] }, { "_id": "2b31dd76-2862-5b3f-e77e-ebb9071c7fa9", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)