Header 114

ImageButtonsBackground Image21 nodes · 21 styles

Description

Dark background hero with heading and CTAs vertically centered on left, image centered, and description at bottom-right.

Detailed Analysis

This hero arranges content in a horizontal three-zone layout on a dark gray background. The left zone contains the heading and dual CTA buttons, vertically centered. The center zone features a rounded-corner image placeholder. The right zone positions the description paragraph at the bottom. This creates a clear left-to-right reading flow with distinct content zones. The vertically centered heading/CTA group creates a strong focal point on the left, while the bottom-right description provides supporting context after the visual is absorbed. Clean separation between zones makes this layout highly organized.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark backgroundhorizontal zonesthree-column layoutcentered headingvertical centeringcentered imagerounded cornerszoned layoutorganized heromodern designhigh contrastclear hierarchystructured layoutdark themeprofessional hero

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": "621003fe-86ed-5fb7-e7f9-1a3d3708890a",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "1efd1ecb-6c21-f75e-4877-c7d3eebdcb46",
          "61b996b6-33bf-895e-1082-2da11a045b47"
        ],
        "children": [
          "621003fe-86ed-5fb7-e7f9-1a3d3708890b",
          "621003fe-86ed-5fb7-e7f9-1a3d3708891c"
        ]
      },
      {
        "_id": "621003fe-86ed-5fb7-e7f9-1a3d3708890b",
        "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": [
          "621003fe-86ed-5fb7-e7f9-1a3d3708890c"
        ]
      },
      {
        "_id": "621003fe-86ed-5fb7-e7f9-1a3d3708890c",
        "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": "621003fe-86ed-5fb7-e7f9-1a3d3708890a", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "1efd1ecb-6c21-f75e-4877-c7d3eebdcb46", "61b996b6-33bf-895e-1082-2da11a045b47" ], "children": [ "621003fe-86ed-5fb7-e7f9-1a3d3708890b", "621003fe-86ed-5fb7-e7f9-1a3d3708891c" ] }, { "_id": "621003fe-86ed-5fb7-e7f9-1a3d3708890b", "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": [ "621003fe-86ed-5fb7-e7f9-1a3d3708890c" ] }, { "_id": "621003fe-86ed-5fb7-e7f9-1a3d3708890c", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, ... (truncated)