Component Browser
BrowseBuild
Home/Browse/Header 106

Header 106

ImageButtons32 nodes ยท 29 styles
Header 106

Description

Centered hero section with floating image gallery arranged asymmetrically around the text content, creating a dynamic collage-style layout.

Detailed Analysis

This hero presents a centered text block surrounded by multiple floating image placeholders of varying sizes arranged in an asymmetric, scattered pattern. The centered content includes a medium-length heading, descriptive paragraph, and dual CTA buttons. Image placeholders float around all sides - some partially cropped at edges, others fully visible - creating depth and visual interest. The composition suggests motion or a curated collection feel. Light background with gray placeholder boxes creates a clean, modern aesthetic. This layout suits creative portfolios, galleries, or brands wanting to showcase multiple visuals while maintaining focus on the central message.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

floating imagesimage collageasymmetric layoutscattered gallerycentered herodynamic compositionmulti-image herocreative layoutgallery herovisual showcasedual buttonsmodern designartistic arrangementportfolio stylefloating elements

Raw Data (spacer)

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