Component Browser
BrowseBuild
Home/Browse/Header 123

Header 123

ImageButtons24 nodes · 22 styles
Header 123

Description

Light hero section with stacked left-aligned content above and two equal-sized square images below with subtle vertical offset.

Detailed Analysis

This hero simplifies the gallery to two equal-sized square images placed side-by-side. The text content remains stacked in the top-left with large heading, description paragraph, and dual CTAs. Below, the two square images span the full width with a generous gap between them. A subtle vertical offset adds visual interest: the left image aligns higher while the right image sits slightly lower, creating a gentle diagonal rhythm without the dramatic staggering of other variants.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheaderlight backgroundstacked contenttwo imagessquare imagesequal sizeoffset positioningside by sidedual imagesCTAsbalanced galleryminimal

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": "da6da795-236c-aabe-94d3-a281794081ea",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "1b2c7ff2-5c7a-365c-ac5e-a353e02e67f1"
        ],
        "children": [
          "da6da795-236c-aabe-94d3-a281794081eb"
        ]
      },
      {
        "_id": "da6da795-236c-aabe-94d3-a281794081eb",
        "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": [
          "da6da795-236c-aabe-94d3-a281794081ec"
        ]
      },
      {
        "_id": "da6da795-236c-aabe-94d3-a281794081ec",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
      
... (truncated)