Header 135

ImageButtons25 nodes · 23 styles

Description

A hero section with left-aligned header content above a three-image asymmetric collage featuring overlapping images with off-canvas positioning.

Detailed Analysis

This header component uses a stacked vertical layout with content positioned at the top left. The headline uses large bold typography with supporting body text and dual CTA buttons (primary filled, secondary outlined). Below the content area is a complex three-image gallery: a large wide landscape image dominates the center, with a portrait image overlapping from the lower-left (extending off-canvas) and another portrait image overlapping from the upper-right. The layered composition creates significant visual depth through z-index stacking and strategic overlap positioning.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

hero sectionheaderthree imagesimage collageoverlapping imagesoff-canvasasymmetric layoutCTA buttonsstacked layoutvisual depthlayered imagesportrait landscape mixgallery header

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": "dd6ff023-800c-75d1-5380-ffc6330c51f1",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "2710e316-cb6b-400a-aef6-b318494a0eb6"
        ],
        "children": [
          "dd6ff023-800c-75d1-5380-ffc6330c51f2"
        ]
      },
      {
        "_id": "dd6ff023-800c-75d1-5380-ffc6330c51f2",
        "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": [
          "dd6ff023-800c-75d1-5380-ffc6330c51f3"
        ]
      },
      {
        "_id": "dd6ff023-800c-75d1-5380-ffc6330c51f3",
        "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": "dd6ff023-800c-75d1-5380-ffc6330c51f1", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "2710e316-cb6b-400a-aef6-b318494a0eb6" ], "children": [ "dd6ff023-800c-75d1-5380-ffc6330c51f2" ] }, { "_id": "dd6ff023-800c-75d1-5380-ffc6330c51f2", "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": [ "dd6ff023-800c-75d1-5380-ffc6330c51f3" ] }, { "_id": "dd6ff023-800c-75d1-5380-ffc6330c51f3", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)