Component Browser
BrowseBuild
Home/Browse/Pricing 43

Pricing 43

ImageButtonsSlider265 nodes ยท 37 styles
Pricing 43

Description

Three-tier pricing with monthly/yearly toggle, plan descriptions, mid-card CTA buttons, and feature lists below in bordered cards.

Detailed Analysis

This three-column pricing layout features a Monthly/Yearly toggle in the top-right corner with three bordered cards below (Basic, Business, Enterprise). Each card displays plan name with descriptive subtitle, horizontal divider, monthly price, full-width black CTA button in the middle, another divider, and a checkmark feature list below. The mid-card button placement creates visual separation between pricing and features. Progressive feature counts guide tier selection.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingthree columnsbilling toggleplan descriptionmonthly yearlymid-card CTAfeature listcheckmarkspricing cardstiered pricingSaaS pricingtoggle switchstructured layout

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": "06d6dc73-a451-3b6d-aaff-c43c18a5c482",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "bceb703e-29f1-61ff-1dc7-4acccb31c994"
        ],
        "children": [
          "06d6dc73-a451-3b6d-aaff-c43c18a5c483"
        ]
      },
      {
        "_id": "06d6dc73-a451-3b6d-aaff-c43c18a5c483",
        "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": [
          "06d6dc73-a451-3b6d-aaff-c43c18a5c484"
        ]
      },
      {
        "_id": "06d6dc73-a451-3b6d-aaff-c43c18a5c484",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)