Component Browser
BrowseBuild
Home/Browse/Pricing 30

Pricing 30

Buttons4 ColumnsCards176 nodes ยท 32 styles
Pricing 30

Description

Four-tier pricing table with plan descriptions, monthly/yearly pricing, mid-card CTA buttons, and feature lists below in a borderless card layout.

Detailed Analysis

This four-column layout (Free, Basic, Business, Enterprise) uses borderless cards with subtle vertical dividers between columns. Each card shows plan name with descriptive subtitle, monthly pricing with yearly equivalent, and a full-width black CTA button in the middle. Feature lists with checkmarks appear below the CTA. The borderless design creates a more open, spacious feel while maintaining clear column separation. Progressive feature counts guide users toward higher tiers.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

pricingfour columnsfreemiumborderless cardstiered pricingyearly pricingfeature listcheckmarksCTA buttonsplan descriptionopen layoutSaaS pricingminimal design

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": "fc738f8f-75e9-8fe7-6459-ac41048dc5ff",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "d97866a4-0f65-6976-feae-c63cc7be6aa3"
        ],
        "children": [
          "fc738f8f-75e9-8fe7-6459-ac41048dc600"
        ]
      },
      {
        "_id": "fc738f8f-75e9-8fe7-6459-ac41048dc600",
        "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": [
          "fc738f8f-75e9-8fe7-6459-ac41048dc601"
        ]
      },
      {
        "_id": "fc738f8f-75e9-8fe7-6459-ac41048dc601",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)