Header 110

ImageButtons25 nodes · 22 styles

Description

Split hero layout with left-aligned text content and staggered dual-image composition on the right, featuring overlapping portrait and square images.

Detailed Analysis

This hero uses a classic split layout with text content occupying the left third and imagery on the right two-thirds. The left side contains a medium-length heading, descriptive paragraph, and dual CTA buttons (one filled, one outlined). The right side features an asymmetric image arrangement: a large portrait-orientation image placeholder positioned centrally with a smaller square image overlapping in the top-right area. This staggered composition creates depth and visual interest. The white background maintains clean aesthetics while the image overlap suggests a curated, editorial approach. Ideal for portfolios or businesses wanting to showcase multiple related visuals.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

split layoutstaggered imagesoverlapping imagesdual image heroasymmetric layoutportrait imagesquare imageleft-aligned texteditorial styledual CTAwhite backgroundimage compositionlayered imagescreative heroportfolio 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": "6c9e166c-9bdd-c288-0170-1ff68649bde7",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "a71738c8-1605-843d-acbf-ab1dd8c49ce5"
        ],
        "children": [
          "6c9e166c-9bdd-c288-0170-1ff68649bde8"
        ]
      },
      {
        "_id": "6c9e166c-9bdd-c288-0170-1ff68649bde8",
        "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": [
          "6c9e166c-9bdd-c288-0170-1ff68649bde9"
        ]
      },
      {
        "_id": "6c9e166c-9bdd-c288-0170-1ff68649bde9",
        "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": "6c9e166c-9bdd-c288-0170-1ff68649bde7", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "a71738c8-1605-843d-acbf-ab1dd8c49ce5" ], "children": [ "6c9e166c-9bdd-c288-0170-1ff68649bde8" ] }, { "_id": "6c9e166c-9bdd-c288-0170-1ff68649bde8", "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": [ "6c9e166c-9bdd-c288-0170-1ff68649bde9" ] }, { "_id": "6c9e166c-9bdd-c288-0170-1ff68649bde9", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)