Pricing 37

ImageTabsButtons298 nodes · 43 styles

Description

Two-tier pricing with monthly/yearly toggle, plan icons, descriptions, two-column feature grids, and bottom CTA buttons.

Detailed Analysis

This two-column pricing layout adds a Monthly/Yearly billing toggle above two equal-width pricing cards (Basic and Business). Each card displays a 3D box icon, plan name with price on the right, description, and 'Includes:' section with two-column checkmark feature list. Progressive feature counts differentiate tiers. The toggle enables billing period comparison while maintaining the clean two-tier presentation. Full-width black CTA buttons complete each card.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingtwo columnstwo tiersbilling togglemonthly yearlyplan iconsfeature gridincludes sectioncheckmarksCTA buttonspricing cardsSaaS pricingtoggle switch

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": "f721f766-505b-6c83-d1b2-bb4c02d049c6",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "3682c752-926a-5ab5-9d0e-7ac509acb45b"
        ],
        "children": [
          "f721f766-505b-6c83-d1b2-bb4c02d049c7"
        ]
      },
      {
        "_id": "f721f766-505b-6c83-d1b2-bb4c02d049c7",
        "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": [
          "f721f766-505b-6c83-d1b2-bb4c02d049c8"
        ]
      },
      {
        "_id": "f721f766-505b-6c83-d1b2-bb4c02d049c8",
        "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": "f721f766-505b-6c83-d1b2-bb4c02d049c6", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "3682c752-926a-5ab5-9d0e-7ac509acb45b" ], "children": [ "f721f766-505b-6c83-d1b2-bb4c02d049c7" ] }, { "_id": "f721f766-505b-6c83-d1b2-bb4c02d049c7", "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": [ "f721f766-505b-6c83-d1b2-bb4c02d049c8" ] }, { "_id": "f721f766-505b-6c83-d1b2-bb4c02d049c8", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)