Component Browser
BrowseBuild
Home/Browse/Header 19

Header 19

ImageButtons2 ColumnsImage/Video Left20 nodes · 18 styles
Header 19

Description

A two-column hero section with image on the left and content (heading, description, dual buttons) on the right in a side-by-side layout.

Detailed Analysis

This component uses a classic two-column horizontal layout with visual content on the left and text content on the right. The left column contains a tall image placeholder with light gray background and centered image icon. The right column features vertically centered content including a bold black heading, supporting paragraph text, and dual CTA buttons (solid black primary, outlined secondary). The even 50/50 split creates balanced visual weight. Generous white space surrounds the component. This layout is effective when the image directly supports or demonstrates the adjacent text content. Ideal for product features, app showcases, or landing pages where visual and textual content should be presented as equal partners.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

herotwo-columnside-by-sideimage leftdual buttonsCTA50-50 splithorizontal layoutproduct featureapp showcaselanding pagebalanced layoutcontent rightmarketing

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": "aea6d845-d54c-7f3d-ac3d-5c7e016e4358",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "38963dbe-260a-072a-e7d6-c7a5781b224a"
        ],
        "children": [
          "aea6d845-d54c-7f3d-ac3d-5c7e016e4359"
        ]
      },
      {
        "_id": "aea6d845-d54c-7f3d-ac3d-5c7e016e4359",
        "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": [
          "aea6d845-d54c-7f3d-ac3d-5c7e016e435a"
        ]
      },
      {
        "_id": "aea6d845-d54c-7f3d-ac3d-5c7e016e435a",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
      
... (truncated)