Header 125

ImageButtons26 nodes · 25 styles

Description

Hero section with centered stacked content above a three-image asymmetric gallery featuring offset positioning for visual depth.

Detailed Analysis

This hero layout positions all text content centered at the top including heading, paragraph, and dual CTA buttons. Below, a three-image gallery creates visual interest through asymmetric placement - a small portrait image on the left, a large landscape image centered, and a small portrait on the right positioned lower. The staggered vertical alignment creates a dynamic, editorial feel. Light background maintains readability while the image arrangement draws the eye downward.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheadercentered contentthree imagesasymmetric gallerystaggered layoutoffset imagesportrait landscape mixeditorial designvisual hierarchydual CTAlight thememodern layoutimage collage

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": "b413081c-959f-5a50-a72c-48ba3c4322a1",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "aee7cd6e-a5cc-a88b-2649-b63937a84f1e"
        ],
        "children": [
          "b413081c-959f-5a50-a72c-48ba3c4322a2"
        ]
      },
      {
        "_id": "b413081c-959f-5a50-a72c-48ba3c4322a2",
        "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": [
          "b413081c-959f-5a50-a72c-48ba3c4322a3"
        ]
      },
      {
        "_id": "b413081c-959f-5a50-a72c-48ba3c4322a3",
        "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": "b413081c-959f-5a50-a72c-48ba3c4322a1", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "aee7cd6e-a5cc-a88b-2649-b63937a84f1e" ], "children": [ "b413081c-959f-5a50-a72c-48ba3c4322a2" ] }, { "_id": "b413081c-959f-5a50-a72c-48ba3c4322a2", "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": [ "b413081c-959f-5a50-a72c-48ba3c4322a3" ] }, { "_id": "b413081c-959f-5a50-a72c-48ba3c4322a3", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)