Header 136

ImageButtons26 nodes · 26 styles

Description

A centered hero section with headline, description, and buttons above a three-image collage featuring a large central image with overlapping side images.

Detailed Analysis

This header component employs center-aligned typography at the top with a bold headline, supporting paragraph text, and dual CTA buttons arranged horizontally. Below the content sits a sophisticated three-image gallery composition: a large horizontal landscape image serves as the centerpiece, while two taller portrait images on either side overlap the main image with vertical offset staggering. The left image rises higher than the right, creating diagonal visual flow. The symmetric but offset arrangement maintains balance while adding dynamic visual interest.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

hero sectioncentered headerthree imagesimage collageoverlapping imagesstacked layoutdual CTAsymmetric layoutgallery headerportrait imageslandscape imageoffset staggervisual balance

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": "bb5efadb-6996-886c-9d85-78fda4f72ce3",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "01d2a536-1fc5-5a7b-b530-996d2d754517"
        ],
        "children": [
          "bb5efadb-6996-886c-9d85-78fda4f72ce4"
        ]
      },
      {
        "_id": "bb5efadb-6996-886c-9d85-78fda4f72ce4",
        "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": [
          "bb5efadb-6996-886c-9d85-78fda4f72ce5"
        ]
      },
      {
        "_id": "bb5efadb-6996-886c-9d85-78fda4f72ce5",
        "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": "bb5efadb-6996-886c-9d85-78fda4f72ce3", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "01d2a536-1fc5-5a7b-b530-996d2d754517" ], "children": [ "bb5efadb-6996-886c-9d85-78fda4f72ce4" ] }, { "_id": "bb5efadb-6996-886c-9d85-78fda4f72ce4", "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": [ "bb5efadb-6996-886c-9d85-78fda4f72ce5" ] }, { "_id": "bb5efadb-6996-886c-9d85-78fda4f72ce5", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)