Header 120

ImageButtons2 Columns22 nodes · 20 styles

Description

Light hero section with split text layout above and a large centered square image below that extends beyond the container on the left edge.

Detailed Analysis

This hero uses the familiar two-tier split layout with bold heading on the left and description plus dual CTAs on the right. Below, a single large square image dominates the lower half, centered within the section but extending slightly beyond the left container edge creating an off-canvas effect. This asymmetric image placement adds visual dynamism and breaks the rigid container boundaries. The rounded corners on the image soften the overall composition while the significant white space above maintains a clean, uncluttered hierarchy.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheaderlight backgroundsplit layoutsingle imagesquare imageoff-canvasasymmetriccentered imageCTAsminimalextended imagemodern

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": "ccc0fccd-335b-b268-aac4-7c93b63adad9",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "1d4e7826-adfe-ef55-a9e6-c1e27aa4d574"
        ],
        "children": [
          "ccc0fccd-335b-b268-aac4-7c93b63adada"
        ]
      },
      {
        "_id": "ccc0fccd-335b-b268-aac4-7c93b63adada",
        "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": [
          "ccc0fccd-335b-b268-aac4-7c93b63adadb"
        ]
      },
      {
        "_id": "ccc0fccd-335b-b268-aac4-7c93b63adadb",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
      
... (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": "ccc0fccd-335b-b268-aac4-7c93b63adad9", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "1d4e7826-adfe-ef55-a9e6-c1e27aa4d574" ], "children": [ "ccc0fccd-335b-b268-aac4-7c93b63adada" ] }, { "_id": "ccc0fccd-335b-b268-aac4-7c93b63adada", "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": [ "ccc0fccd-335b-b268-aac4-7c93b63adadb" ] }, { "_id": "ccc0fccd-335b-b268-aac4-7c93b63adadb", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)