Portfolio Header 6
ImageButtons2 ColumnsCards50 nodes · 22 styles
Description
Full-screen hero image portfolio header with project details, tags, and metadata grid positioned below the large image placeholder.
Detailed Analysis
This portfolio header component leads with a full-width, tall hero image section featuring a light gray placeholder with centered image icon. Below the hero, the content area displays project information in a structured layout: left side shows a large bold project name, description text, and three category tags; right side presents client metadata in a 2x2 grid (Client, Date, Role, Website). The hero image dominates approximately 60% of the viewport height, making it ideal for visually-driven portfolio pieces where the project imagery should create immediate impact.
Webflow Paste
Copy and paste directly into Webflow Designer
Keywords
portfolio headerhero imagefull-width imageproject showcasemetadata gridtag pillscase studyvisual portfolioimage-first layoutproject detailsclient informationlarge herocreative portfolio
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-a10884714cae",
"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-caae1d873164"
],
"children": [
"aa18ebbe-5268-67f5-404b-a10884714caf"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714caf",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
"search": {
"exclude": false
},
"devlink": {
"slot": "",
"runtimeProps": {}
},
"visibility": {
"conditions": []
},
"displayName": ""
},
"type": "Block",
"classes": [
"fcb6d91b-4eae-1177-be29-caae1d873165"
],
"children": [
"aa18ebbe-5268-67f5-404b-a10884714cb0",
"aa18ebbe-5268-67f5-404b-a10884714cb2"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714cb0",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
... (truncated)