Header 121

ImageButtons26 nodes · 24 styles

Description

Light hero section with stacked left-aligned content above and a three-image asymmetric gallery below with varied sizes and staggered positioning.

Detailed Analysis

This hero shifts from split to stacked content layout, with the large bold heading, description paragraph, and dual CTAs all left-aligned in a vertical stack. Below, a dynamic three-image gallery creates visual interest through both size contrast and staggered vertical positioning: a small portrait image anchors bottom-left, a dominant landscape image commands the center, and another small portrait floats at the top-right. This creates an engaging diagonal visual flow from bottom-left to top-right.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheaderlight backgroundstacked contentthree imagesasymmetric gallerystaggered imagesvaried sizesdiagonal flowportrait imageslandscape imageCTAsdynamic layout

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": "9b156f67-aa2a-d148-f1d9-c62cc2b708b3",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "ef3357c2-f50e-d39c-f256-f78471d3384d"
        ],
        "children": [
          "9b156f67-aa2a-d148-f1d9-c62cc2b708b4"
        ]
      },
      {
        "_id": "9b156f67-aa2a-d148-f1d9-c62cc2b708b4",
        "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": [
          "9b156f67-aa2a-d148-f1d9-c62cc2b708b5"
        ]
      },
      {
        "_id": "9b156f67-aa2a-d148-f1d9-c62cc2b708b5",
        "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": "9b156f67-aa2a-d148-f1d9-c62cc2b708b3", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "ef3357c2-f50e-d39c-f256-f78471d3384d" ], "children": [ "9b156f67-aa2a-d148-f1d9-c62cc2b708b4" ] }, { "_id": "9b156f67-aa2a-d148-f1d9-c62cc2b708b4", "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": [ "9b156f67-aa2a-d148-f1d9-c62cc2b708b5" ] }, { "_id": "9b156f67-aa2a-d148-f1d9-c62cc2b708b5", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)