Header 13

ImageLightboxButtons2 Columns24 nodes · 22 styles

Description

A stacked hero layout with full-width video lightbox area (play button) above and a two-column section below featuring heading on left and description with dual CTAs on right.

Detailed Analysis

This hero component features a video lightbox presentation style. The top section shows a full-width dark gray area with a prominent centered play button, inviting users to watch video content in a modal or expanded view. Below, a clean white content section uses a two-column grid: the left column contains a large bold heading, while the right column holds descriptive paragraph text and two CTA buttons (primary black, secondary outline). The play button creates a clear interactive focal point, making this ideal for product demos, explainer videos, or promotional content where video engagement is primary.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheadervideo lightboxplay buttonstacked layouttwo columnCTA buttonsvideo modalexplainer videodemo videointeractivemultimediavideo hero

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "23274446-b213-8811-93d1-1c7ec6a51db1",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "45959060-43f8-d51d-2f42-afa1965d0e25"
        ],
        "children": [
          "23274446-b213-8811-93d1-1c7ec6a51db2"
        ]
      },
      {
        "_id": "23274446-b213-8811-93d1-1c7ec6a51db2",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "6724e74f-28d9-3d42-6307-96736592200a"
        ],
        "children": [
          "23274446-b213-8811-93d1-1c7ec6a51db3",
          "23274446-b213-8811-93d1-1c7ec6a51db7"
        ]
      },
      {
        "_id": "23274446-b213-8811-93d1-1c7ec6a51db3",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
       
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [], "actionLists": [], "interactions": [] }, "nodes": [ { "_id": "23274446-b213-8811-93d1-1c7ec6a51db1", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "45959060-43f8-d51d-2f42-afa1965d0e25" ], "children": [ "23274446-b213-8811-93d1-1c7ec6a51db2" ] }, { "_id": "23274446-b213-8811-93d1-1c7ec6a51db2", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "6724e74f-28d9-3d42-6307-96736592200a" ], "children": [ "23274446-b213-8811-93d1-1c7ec6a51db3", "23274446-b213-8811-93d1-1c7ec6a51db7" ] }, { "_id": "23274446-b213-8811-93d1-1c7ec6a51db3", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], ... (truncated)