Component Browser
BrowseBuild
Home/Browse/Pricing 25

Pricing 25

TabsButtons3 ColumnsCards266 nodes ยท 38 styles
Pricing 25

Description

Three-tier pricing table with monthly/annual toggle featuring plan descriptions, monthly and yearly pricing display, CTA buttons in the middle, and feature lists below.

Detailed Analysis

This pricing layout presents three tiers (Basic, Business, Enterprise) with a unique card structure. Each card shows the plan name with a descriptive subtitle, followed by prominent monthly pricing with yearly equivalent displayed below. A full-width black CTA button appears mid-card, with the feature checklist below the button. The billing toggle at the top allows switching between monthly and annual views. Cards have clean borders with consistent spacing and typography hierarchy.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingpricing tablesubscriptiontiered pricingbilling toggleyearly pricingfeature listcheckmarksCTA buttonsthree columnspricing cardsplan descriptionSaaS pricing

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": "d138a880-509f-3baf-11e8-31229e5589cf",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "29d6587e-d731-9be1-0649-8cc2309d1f2f"
        ],
        "children": [
          "d138a880-509f-3baf-11e8-31229e5589d0"
        ]
      },
      {
        "_id": "d138a880-509f-3baf-11e8-31229e5589d0",
        "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": [
          "d138a880-509f-3baf-11e8-31229e5589d1"
        ]
      },
      {
        "_id": "d138a880-509f-3baf-11e8-31229e5589d1",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)