Component Browser
BrowseBuild
Home/Browse/Pricing 28

Pricing 28

Buttons4 ColumnsCards164 nodes ยท 30 styles
Pricing 28

Description

Four-tier pricing table with separate bordered cards showing plan name, monthly and yearly pricing, feature lists with checkmarks, and bottom CTA buttons.

Detailed Analysis

This pricing layout expands to four tiers (Free, Basic, Business, Enterprise) in a horizontal row of bordered cards. Each card displays the plan name, prominent monthly price, yearly equivalent, and a feature list with checkmarks showing increasing features per tier. Full-width black CTA buttons anchor each card at the bottom. The four-column layout accommodates a freemium model with progressive value tiers. Clean borders and consistent spacing maintain visual harmony across all cards.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingfour columnsfreemiumfree tiertiered pricingyearly pricingfeature listcheckmarksCTA buttonspricing cardsplan comparisonSaaS pricingsubscription tiers

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": "1425de20-0c16-a2c4-08d5-cb8c1a59a436",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "e5831aaa-78d9-27c6-61c5-20d90267e89d"
        ],
        "children": [
          "1425de20-0c16-a2c4-08d5-cb8c1a59a437"
        ]
      },
      {
        "_id": "1425de20-0c16-a2c4-08d5-cb8c1a59a437",
        "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": [
          "1425de20-0c16-a2c4-08d5-cb8c1a59a438"
        ]
      },
      {
        "_id": "1425de20-0c16-a2c4-08d5-cb8c1a59a438",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)