Header 157

ImageLightboxButtons26 nodes · 24 styles

Description

An editorial-style hero with a long left-aligned headline, description, and dual buttons, featuring a video player positioned in the upper right corner.

Detailed Analysis

This hero component employs an asymmetric editorial layout with the main content positioned in the lower left portion of the section. A long multi-line headline in large bold typography creates strong visual impact, supported by a descriptive paragraph below. Two CTA buttons are arranged horizontally - a solid black primary button and an outlined secondary button. In the upper right corner, a video player with a centered play button provides multimedia engagement without dominating the layout. The offset positioning of elements creates a sophisticated, magazine-style composition with intentional white space that feels premium and editorial.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheadereditorialleft-alignedvideovideo playerasymmetriclong headlinedual buttonsmagazine stylepremiummultimediaplay buttonoffset layoutlanding page

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-4260",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-937",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 70,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-937-p"
            }
          ],
          "target": {
            "id": "66822dd4dbd5c943b7333591|839edc99-d108-27bf-c4e9-ec6c6d001b25",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "66822dd4dbd5c943b7333591|839edc99-d108-27bf-c4e9-ec6c6d001b25",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1669630815594,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main"
          ],
          "animationType": "custom"
        }
      ],
      "actionLists": [
        {
          "id": "a-937",
          "title": "Header 157 [Scroll] [Desktop]",
          "createdOn": 1669630840160,
          "continuousParameterGroups": [
            {
              "id": "a-937-p",
              "type": "SCROLL_PROGRESS",
              "parameterLabel": "Scroll",
              "continuousActionGroups": [
                {
                  "keyframe": 2,
                  "actionItems": [
  
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-4260", "name": "", "action": { "id": "", "config": { "actionListId": "a-937", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 70, "addEndOffset": false, "startsExiting": false, "addOffsetValue": 50, "addStartOffset": false, "endOffsetValue": 50, "startsEntering": true, "continuousParameterGroupId": "a-937-p" } ], "target": { "id": "66822dd4dbd5c943b7333591|839edc99-d108-27bf-c4e9-ec6c6d001b25", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "66822dd4dbd5c943b7333591|839edc99-d108-27bf-c4e9-ec6c6d001b25", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1669630815594, "eventTypeId": "SCROLLING_IN_VIEW", "mediaQueries": [ "main" ], "animationType": "custom" } ], "actionLists": [ { "id": "a-937", "title": "Header 157 [Scroll] [Desktop]", "createdOn": 1669630840160, "continuousParameterGroups": [ { "id": "a-937-p", "type": "SCROLL_PROGRESS", "parameterLabel": "Scroll", "continuousActionGroups": [ { "keyframe": 2, "actionItems": [ ... (truncated)