Header 11

Background VideoVideoButtonsBackground Image2 Columns22 nodes · 21 styles

Description

A stacked hero layout with full-width dark video/image area above and a two-column section below featuring heading on left and description with dual CTAs on right.

Detailed Analysis

This hero component emphasizes visual media with a full-width dark gray video or image area occupying the top portion of the viewport. The media area is plain without a centered placeholder, suggesting background video or imagery. 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 filled, secondary outline). The dark-to-light contrast creates visual drama. This layout prioritizes video or imagery while maintaining strong conversion elements.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheaderstacked layoutfull width videobackground videotwo columnCTA buttonsdark medialight contentmodernsplit layoutvideo 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": "de2a8dc4-f1ad-272b-a274-817b9b6e0c03",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "910976f1-2023-f45e-bdb6-7267fbf038ba"
        ],
        "children": [
          "de2a8dc4-f1ad-272b-a274-817b9b6e0c04"
        ]
      },
      {
        "_id": "de2a8dc4-f1ad-272b-a274-817b9b6e0c04",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b60ef585-53cc-f434-98e2-9e2a0310b39f"
        ],
        "children": [
          "de2a8dc4-f1ad-272b-a274-817b9b6e0c05",
          "de2a8dc4-f1ad-272b-a274-817b9b6e0c09"
        ]
      },
      {
        "_id": "de2a8dc4-f1ad-272b-a274-817b9b6e0c05",
        "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": "de2a8dc4-f1ad-272b-a274-817b9b6e0c03", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "910976f1-2023-f45e-bdb6-7267fbf038ba" ], "children": [ "de2a8dc4-f1ad-272b-a274-817b9b6e0c04" ] }, { "_id": "de2a8dc4-f1ad-272b-a274-817b9b6e0c04", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "b60ef585-53cc-f434-98e2-9e2a0310b39f" ], "children": [ "de2a8dc4-f1ad-272b-a274-817b9b6e0c05", "de2a8dc4-f1ad-272b-a274-817b9b6e0c09" ] }, { "_id": "de2a8dc4-f1ad-272b-a274-817b9b6e0c05", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], ... (truncated)