Header 139

ImageLightboxButtonsBackground Image25 nodes · 26 styles

Description

A dark-themed hero section with left-aligned content, background image, and a video player card positioned in the bottom-right area.

Detailed Analysis

This header component features a dark gray/charcoal color scheme providing strong contrast for the white text. Content is left-aligned with a bold headline, supporting paragraph, and dual CTA buttons (both in outlined/ghost style to maintain the dark aesthetic). A subtle background image is visible behind the content. The distinguishing feature is a video player card with a play button icon floating in the bottom-right quadrant. This creates an interactive element inviting users to engage with video content while maintaining the hero messaging hierarchy.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark themevideo herovideo playerplay buttondark backgroundghost buttonsoutlined buttonsleft alignedinteractive heromedia herovideo CTAcharcoal backgroundwhite textvideo card

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3456",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-704",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-704-p"
            }
          ],
          "target": {
            "id": "6540ac58fa7ea7efe569683a|e277b47f-40e4-c951-e749-5429b88f72d2",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe569683a|e277b47f-40e4-c951-e749-5429b88f72d2",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1669974970278,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main",
            "medium",
            "small",
            "tiny"
          ],
          "animationType": "custom"
        }
      ],
      "actionLists": [
        {
          "id": "a-704",
          "title": "Header 139 [Scroll]",
          "createdOn": 1653889375681,
          "continuousParameterGroups": [
            {
              "id": "a-704-p",
              "type": "SCROLL_PROGRESS",
              "parameterLabel": "Scroll",
              "continuousActionGroups": [
                {
                 
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-3456", "name": "", "action": { "id": "", "config": { "actionListId": "a-704", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, "startsExiting": false, "addOffsetValue": 50, "addStartOffset": false, "endOffsetValue": 50, "startsEntering": true, "continuousParameterGroupId": "a-704-p" } ], "target": { "id": "6540ac58fa7ea7efe569683a|e277b47f-40e4-c951-e749-5429b88f72d2", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "6540ac58fa7ea7efe569683a|e277b47f-40e4-c951-e749-5429b88f72d2", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1669974970278, "eventTypeId": "SCROLLING_IN_VIEW", "mediaQueries": [ "main", "medium", "small", "tiny" ], "animationType": "custom" } ], "actionLists": [ { "id": "a-704", "title": "Header 139 [Scroll]", "createdOn": 1653889375681, "continuousParameterGroups": [ { "id": "a-704-p", "type": "SCROLL_PROGRESS", "parameterLabel": "Scroll", "continuousActionGroups": [ { ... (truncated)