Stats 5

Background VideoVideoButtonsBackground Image2 Columns3 ColumnsCards46 nodes · 34 styles

Description

A dark-themed statistics section with tagline, heading, description, dual buttons, and three percentage stats with vertical accent bars on charcoal background.

Detailed Analysis

This stats component uses a dark charcoal gray background with white text for high contrast. The header area features a two-column layout with tagline and heading on the left, paragraph description and dual CTA buttons (outlined primary, text link with arrow) on the right. Below, three large white percentage statistics (30%) are arranged horizontally, each with a vertical accent bar and short heading. Unlike similar variants with background images, this one uses a solid dark color for a cleaner, more focused appearance.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark theme statsstatistics sectionpercentage displaycharcoal backgroundtwo-column layoutstats with buttonsKPI sectionwhite on darksolid backgroundmetrics displaybusiness statsvertical dividers

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": "ba15d3a2-f7f1-9147-4a93-7cabe49134ca",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "608cbe19-951a-14f3-5226-2ebc95bae02a",
          "850c88bd-b276-8865-deb2-31cfebc604d5"
        ],
        "children": [
          "ba15d3a2-f7f1-9147-4a93-7cabe49134cb",
          "ba15d3a2-f7f1-9147-4a93-7cabe49134f5"
        ]
      },
      {
        "_id": "ba15d3a2-f7f1-9147-4a93-7cabe49134cb",
        "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": [
          "ba15d3a2-f7f1-9147-4a93-7cabe49134cc"
        ]
      },
      {
        "_id": "ba15d3a2-f7f1-9147-4a93-7cabe49134cc",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
   
... (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": "ba15d3a2-f7f1-9147-4a93-7cabe49134ca", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "608cbe19-951a-14f3-5226-2ebc95bae02a", "850c88bd-b276-8865-deb2-31cfebc604d5" ], "children": [ "ba15d3a2-f7f1-9147-4a93-7cabe49134cb", "ba15d3a2-f7f1-9147-4a93-7cabe49134f5" ] }, { "_id": "ba15d3a2-f7f1-9147-4a93-7cabe49134cb", "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": [ "ba15d3a2-f7f1-9147-4a93-7cabe49134cc" ] }, { "_id": "ba15d3a2-f7f1-9147-4a93-7cabe49134cc", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, ... (truncated)