Header 105

ButtonsBackground Image23 nodes · 17 styles

Description

Creative hero section with inline image placeholders embedded within the heading text, creating a visually dynamic typographic layout with dual call-to-action buttons.

Detailed Analysis

This hero features an innovative layout where small rectangular image placeholders are integrated directly into the multi-line heading text, breaking up the typography in unexpected places. The heading spans multiple lines with two gray image placeholder boxes positioned inline with the text flow. Below the heading sits a short descriptive paragraph followed by dual CTA buttons - one solid black primary button and one outlined secondary button. The white background and bold sans-serif typography create strong contrast. This pattern works well for brands wanting a creative, editorial feel that merges visual content with messaging.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

inline imagescreative typographyhero sectionembedded mediatypographic layoutdual CTAeditorial designmixed media headingimage text integrationmodern herodynamic typographywhite backgroundbold headingartistic layoutbrand statement

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": "dcb079a4-9810-e946-ceff-8be7f46c31d3",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "0e7c22dc-23f5-4238-83a6-8eaa5874f3cb"
        ],
        "children": [
          "dcb079a4-9810-e946-ceff-8be7f46c31d4"
        ]
      },
      {
        "_id": "dcb079a4-9810-e946-ceff-8be7f46c31d4",
        "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": [
          "dcb079a4-9810-e946-ceff-8be7f46c31d5"
        ]
      },
      {
        "_id": "dcb079a4-9810-e946-ceff-8be7f46c31d5",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
      
... (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": "dcb079a4-9810-e946-ceff-8be7f46c31d3", "tag": "header", "data": { "tag": "header", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "0e7c22dc-23f5-4238-83a6-8eaa5874f3cb" ], "children": [ "dcb079a4-9810-e946-ceff-8be7f46c31d4" ] }, { "_id": "dcb079a4-9810-e946-ceff-8be7f46c31d4", "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": [ "dcb079a4-9810-e946-ceff-8be7f46c31d5" ] }, { "_id": "dcb079a4-9810-e946-ceff-8be7f46c31d5", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)