Header 107

ImageButtons35 nodes · 35 styles

Description

Hero section with left-aligned text content above a masonry-style image gallery strip featuring varied-size image placeholders.

Detailed Analysis

This hero uses a two-part vertical structure: the top portion contains left-aligned heading, description paragraph, and dual CTA buttons on a white background. Below this content area sits a horizontal masonry gallery strip featuring multiple image placeholders of varying heights and widths arranged in a mosaic pattern. Some images are taller, others wider, creating visual rhythm. The gallery extends edge-to-edge and appears to animate or scroll horizontally. This layout effectively combines traditional hero messaging with a portfolio showcase, ideal for creative businesses wanting to display work samples prominently.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

masonry galleryimage mosaicgallery herovaried image sizeshorizontal galleryleft-aligned heroportfolio showcaseimage stripmosaic layoutwork samplesdual CTAcreative portfoliogallery sliderimage showcasevisual portfolio

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3423",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-626",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-626-p"
            }
          ],
          "target": {
            "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d00d",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d00d",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1709283872321,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main",
            "medium"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-3424",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-624",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-3423", "name": "", "action": { "id": "", "config": { "actionListId": "a-626", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, "startsExiting": false, "addOffsetValue": 50, "addStartOffset": false, "endOffsetValue": 50, "startsEntering": true, "continuousParameterGroupId": "a-626-p" } ], "target": { "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d00d", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d00d", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1709283872321, "eventTypeId": "SCROLLING_IN_VIEW", "mediaQueries": [ "main", "medium" ], "animationType": "custom" }, { "id": "e-3424", "name": "", "action": { "id": "", "config": { "actionListId": "a-624", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, ... (truncated)