Portfolio Header 7
ImageButtons2 ColumnsCards51 nodes · 23 styles
Description
Content-first portfolio header with project details above a full-width hero image, featuring metadata grid and tag pills on white background.
Detailed Analysis
This portfolio header reverses the typical image-first approach by placing all textual content above the hero image. The top section on white background contains the project name (large bold heading), description paragraph, and three category tags on the left, with a 2x2 metadata grid (Client, Date, Role, Website) on the right. Below this content area, a large full-width image placeholder spans the entire width, creating a visual anchor at the bottom. This layout allows visitors to understand the project context before seeing the main visual.
Webflow Paste
Copy and paste directly into Webflow Designer
Keywords
portfolio headercontent firsthero image belowmetadata gridproject detailstag pillsfull-width imagecase study headerinverted layoutwhite backgroundcontext-first designprofessional portfoliostructured layout
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-a10884714ce1",
"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-caae1d87316e"
],
"children": [
"aa18ebbe-5268-67f5-404b-a10884714ce2"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714ce2",
"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-a10884714ce3"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714ce3",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
"search": {
"exclude": false
... (truncated)