Component Browser
BrowseBuild
Home/Browse/Header 142

Header 142

ImageButtonsBackground ImageList70 nodes ยท 40 styles
Header 142

Description

A hero section with centered content surrounded by scattered floating images positioned throughout the viewport.

Detailed Analysis

This header features centered content with a headline, extended paragraph, and dual CTA buttons positioned in the middle of the viewport. Multiple image placeholders are scattered around the periphery in various positions: top-left, top-center, top-right, bottom-left corner, and bottom-right area. Each image appears as a floating card with subtle shadows, creating a collage-like scattered gallery effect. The images vary in size and use both portrait and landscape orientations, framing the centered text from all sides while maintaining ample whitespace.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

scattered imagesfloating gallerycentered contentcollage layoutperipheral imagescreative heroartistic layoutsurrounded contentimage frameasymmetric gallerymodern herowhitespace designfloating cards

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3595",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-759",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "basedOn": "ELEMENT",
              "reverse": false,
              "smoothing": 90,
              "restingState": 50,
              "selectedAxis": "X_AXIS",
              "continuousParameterGroupId": "a-759-p"
            },
            {
              "basedOn": "ELEMENT",
              "reverse": false,
              "smoothing": 90,
              "restingState": 50,
              "selectedAxis": "Y_AXIS",
              "continuousParameterGroupId": "a-759-p-2"
            }
          ],
          "target": {
            "id": "66822dd4dbd5c943b7333591|74605aa7-26c7-370e-6754-13e4a56df4f9",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "66822dd4dbd5c943b7333591|74605aa7-26c7-370e-6754-13e4a56df4f9",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1718810313698,
          "eventTypeId": "MOUSE_MOVE",
          "mediaQueries": [
            "main"
          ],
          "animationType": "custom"
        }
      ],
      "actionLists": [
        {
          "id": "a-759",
          "title": "Header 142 Images [Move]",
          "createdOn": 1718790111029,
          "continuousParameterGroups": [
            {
              "id": "a-759-p",
              "type": "MOUSE_X",
              "p
... (truncated)