Header 111

ImageButtonsBackground Image21 nodes · 21 styles

Description

Dark background hero with asymmetric layout featuring heading at top-left, centered image, and description with CTAs at bottom-right.

Detailed Analysis

This hero presents an asymmetric diagonal layout on a solid dark gray background. The heading is positioned at the top-left corner, while a rounded-corner image placeholder sits centered in the composition. The description paragraph and dual CTA buttons (one filled black, one outlined white) anchor the bottom-right corner. This diagonal flow creates dynamic visual movement from top-left to bottom-right, guiding the eye through the content. The dark background with white text creates high contrast and modern, sophisticated aesthetics. The image serves as a visual bridge between the text elements.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark backgroundasymmetric layoutdiagonal flowcentered imagerounded cornersdark thememodern herohigh contrastdynamic layoutvisual flowdark modesophisticated designangular layouteditorial herocreative positioning

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": "51d36034-4d11-f644-539e-2b37cdce493e",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "57fefdfc-cc41-6fa6-aff0-09516c284bc9",
          "78e7226c-b135-19ab-2e5b-c8856da13d9b"
        ],
        "children": [
          "51d36034-4d11-f644-539e-2b37cdce493f",
          "51d36034-4d11-f644-539e-2b37cdce4950"
        ]
      },
      {
        "_id": "51d36034-4d11-f644-539e-2b37cdce493f",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b0934d9a-875a-bb42-0630-12090a77fc73"
        ],
        "children": [
          "51d36034-4d11-f644-539e-2b37cdce4940"
        ]
      },
      {
        "_id": "51d36034-4d11-f644-539e-2b37cdce4940",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
     
... (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": "51d36034-4d11-f644-539e-2b37cdce493e", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "57fefdfc-cc41-6fa6-aff0-09516c284bc9", "78e7226c-b135-19ab-2e5b-c8856da13d9b" ], "children": [ "51d36034-4d11-f644-539e-2b37cdce493f", "51d36034-4d11-f644-539e-2b37cdce4950" ] }, { "_id": "51d36034-4d11-f644-539e-2b37cdce493f", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "b0934d9a-875a-bb42-0630-12090a77fc73" ], "children": [ "51d36034-4d11-f644-539e-2b37cdce4940" ] }, { "_id": "51d36034-4d11-f644-539e-2b37cdce4940", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, ... (truncated)