Component Browser
BrowseBuild
Home/Browse/Portfolio Header 8

Portfolio Header 8

ImageButtons2 ColumnsCards51 nodes · 24 styles
Portfolio Header 8

Description

Dark overlay portfolio header with centered image icon, project name, description, tags and metadata displayed on semi-transparent gray background.

Detailed Analysis

This portfolio header uses a full-screen dark gray overlay as the background, creating a moody, dramatic presentation. A centered rounded-rectangle image placeholder sits in the upper portion. Below, the layout splits into two columns: the left displays a large white project name heading with category tags (Tag one, Tag two, Tag three) as outlined white buttons; the right side shows a 2x2 metadata grid (Client, Date, Role, Website) in white text. The overall dark theme creates visual drama and works well for creative agencies or portfolios showcasing bold work.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

dark themeoverlay backgroundportfolio headermoody designcentered imagewhite texttag buttonsmetadata griddramatic presentationcreative portfoliofull-screen backgroundgray overlaybold typography

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": "aa18ebbe-5268-67f5-404b-a10884714d15",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "fcb6d91b-4eae-1177-be29-caae1d873178",
          "d0edfaf6-3eec-48d6-53e6-04f4aff1e290"
        ],
        "children": [
          "aa18ebbe-5268-67f5-404b-a10884714d16",
          "aa18ebbe-5268-67f5-404b-a10884714d44"
        ]
      },
      {
        "_id": "aa18ebbe-5268-67f5-404b-a10884714d16",
        "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": [
          "aa18ebbe-5268-67f5-404b-a10884714d17"
        ]
      },
      {
        "_id": "aa18ebbe-5268-67f5-404b-a10884714d17",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
     
... (truncated)