Component Browser
BrowseBuild
Home/Browse/Header 101

Header 101

Background VideoVideoFormButtonsBackground Image35 nodes · 32 styles
Header 101

Description

Dark solid background hero with centered email signup form for bold lead capture landing pages.

Detailed Analysis

This hero component combines a full-width dark charcoal/gray solid background with email capture functionality. White text content is centered both vertically and horizontally, featuring a large bold heading and supporting paragraph text. Below sits an inline email signup form with a white-bordered input field and black 'Sign Up' button. A terms and conditions disclaimer appears below the form. The dark background creates dramatic contrast with the white text and form elements.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheaderdark backgroundsolid colorcenteredemail signupformnewsletterlead capturewhite textcontrastbolddramaticterms disclaimerconversion

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": "40709c09-f417-65a3-9584-cf38fb3093ca",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "ced4a88a-3bb8-9e26-ab78-a0df651420db"
        ],
        "children": [
          "40709c09-f417-65a3-9584-cf38fb3093cb"
        ]
      },
      {
        "_id": "40709c09-f417-65a3-9584-cf38fb3093cb",
        "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": [
          "40709c09-f417-65a3-9584-cf38fb3093cc"
        ]
      },
      {
        "_id": "40709c09-f417-65a3-9584-cf38fb3093cc",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
      
... (truncated)