Portfolio Header 12
ImageButtons2 Columns26 nodes · 18 styles
Description
Dark overlay full-screen portfolio header with centered image, project name, tags on left and description on right, featuring dramatic gray background.
Detailed Analysis
This portfolio header creates a moody, immersive experience with a full-screen dark gray overlay background. A centered rounded-rectangle image placeholder sits in the upper-center portion. The bottom section features a two-column layout with white text: the left column displays a large bold project name with three category tags (Tag one, Tag two, Tag three) as white-outlined buttons; the right column contains a description paragraph. The dark theme with white typography creates strong visual contrast and a dramatic, sophisticated presentation suitable for high-end creative work.
Webflow Paste
Copy and paste directly into Webflow Designer
Keywords
dark themefull-screenoverlayportfolio headercentered imagewhite texttag buttonstwo-columndramatic designmoody aestheticcreative portfoliosophisticatedcontrast
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-a10884714d92",
"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-caae1d873198",
"10a95e87-43d3-ab9c-aa55-5a4e754a5124"
],
"children": [
"aa18ebbe-5268-67f5-404b-a10884714d93",
"aa18ebbe-5268-67f5-404b-a10884714da7"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714d93",
"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-a10884714d94"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714d94",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
... (truncated)