Component Browser
BrowseBuild
Home/Browse/Header 103

Header 103

ImageTabsButtons128 nodes ยท 41 styles
Header 103

Description

Full-width hero with tabbed navigation below for organizing multiple content sections or features.

Detailed Analysis

This hero component features a full-width dark background with centered white text content at the top and horizontal tab navigation at the bottom. The hero area contains a bold heading, paragraph text, and dual buttons (primary and secondary). Below the main content is a horizontal tab bar with four tab options (Tab 1 through Tab 4) allowing users to switch between different content sections. This pattern is effective for product tours or feature showcases.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheadertabstabbed navigationdark backgroundcentereddual buttonsinteractiveproduct tourfeature showcasenavigation tabscontent sectionswhite textfull width

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-1896",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-490",
              "playInReverse": false,
              "autoStopEventId": "e-1897",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_START_ACTION"
          },
          "config": {
            "loop": false,
            "delay": null,
            "effectIn": null,
            "direction": null,
            "playInReverse": false,
            "scrollOffsetUnit": null,
            "scrollOffsetValue": null
          },
          "target": {
            "id": "641178214ccea26eba4f63ad|ca8dbdd1-846c-da0d-8012-a24ce9e5aab6",
            "appliesTo": "CLASS",
            "styleBlockIds": [
              "581ac9c2-71de-0064-fbf6-9e1f59e93a74"
            ]
          },
          "targets": [
            {
              "id": "641178214ccea26eba4f63ad|ca8dbdd1-846c-da0d-8012-a24ce9e5aab1",
              "appliesTo": "CLASS",
              "styleBlockIds": [
                "581ac9c2-71de-0064-fbf6-9e1f59e93a74"
              ]
            }
          ],
          "createdOn": 1672743413745,
          "eventTypeId": "TAB_ACTIVE",
          "mediaQueries": [
            "main",
            "medium",
            "small",
            "tiny"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-1897",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
         
... (truncated)