Stats 3

ImageButtonsBackground Image2 Columns3 ColumnsCards46 nodes · 34 styles

Description

A dark-themed statistics section with two-column layout, tagline, heading, description, dual buttons, image placeholder, and three white percentage stats.

Detailed Analysis

This stats component features a dark gray background with white text, creating a bold visual contrast. The header uses a two-column layout with tagline and heading on the left, descriptive text and dual CTA buttons (outlined primary, text secondary with arrow) on the right. A centered image placeholder with generic mountain/portrait icon sits in the middle. Below, three large white percentage statistics (30%) display with vertical accent bars and short headings. The dark theme variant works well for creating visual breaks in page layouts.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark theme statsstatistics sectionpercentage displayimage placeholderdark backgroundtwo-column layoutmetrics with imageKPI sectioncontrast designwhite on darkdata visualizationproof points

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": "eb975d39-848e-a25c-4da2-750496379043",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "47f2516a-e02c-93ba-0b18-561a39399e84",
          "632d34e2-e8b2-0877-bfbc-8f5f37431b13"
        ],
        "children": [
          "eb975d39-848e-a25c-4da2-750496379044",
          "eb975d39-848e-a25c-4da2-75049637906e"
        ]
      },
      {
        "_id": "eb975d39-848e-a25c-4da2-750496379044",
        "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": [
          "eb975d39-848e-a25c-4da2-750496379045"
        ]
      },
      {
        "_id": "eb975d39-848e-a25c-4da2-750496379045",
        "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": "eb975d39-848e-a25c-4da2-750496379043", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "47f2516a-e02c-93ba-0b18-561a39399e84", "632d34e2-e8b2-0877-bfbc-8f5f37431b13" ], "children": [ "eb975d39-848e-a25c-4da2-750496379044", "eb975d39-848e-a25c-4da2-75049637906e" ] }, { "_id": "eb975d39-848e-a25c-4da2-750496379044", "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": [ "eb975d39-848e-a25c-4da2-750496379045" ] }, { "_id": "eb975d39-848e-a25c-4da2-750496379045", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, ... (truncated)