Component Browser
BrowseBuild
Home/Browse/Header 112

Header 112

ImageButtonsBackground Image21 nodes · 21 styles
Header 112

Description

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

Detailed Analysis

This hero mirrors the diagonal asymmetric pattern but with reversed positioning. On a solid dark gray background, the heading sits at the top-right corner while the description paragraph and dual CTA buttons occupy the bottom-left. A rounded-corner image placeholder remains centered, serving as the visual anchor. This creates a diagonal visual flow from top-right to bottom-left - the reverse of its companion component. The mirrored layout offers flexibility for designers to alternate visual patterns while maintaining consistent aesthetics. High contrast white text on dark background ensures readability and modern appeal.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark backgroundreversed asymmetricdiagonal flowmirrored layoutcentered imagerounded cornersdark themehigh contrastmodern herovisual balancelayout variationsophisticated designangular layoutalternate positioningeditorial 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": "e65b6571-f780-40ac-95da-70c2ae3e704b",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "ab409ea0-bdc0-04ba-97a0-7d147214c876",
          "f3425827-5c6e-0e02-ca2e-04fd0d866f1f"
        ],
        "children": [
          "e65b6571-f780-40ac-95da-70c2ae3e704c",
          "e65b6571-f780-40ac-95da-70c2ae3e705d"
        ]
      },
      {
        "_id": "e65b6571-f780-40ac-95da-70c2ae3e704c",
        "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": [
          "e65b6571-f780-40ac-95da-70c2ae3e704d"
        ]
      },
      {
        "_id": "e65b6571-f780-40ac-95da-70c2ae3e704d",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
     
... (truncated)