Portfolio Header 8
ImageButtons2 ColumnsCards51 nodes · 24 styles
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)