Portfolio Header 10
ImageButtons2 Columns25 nodes · 16 styles
Description
Full-screen hero image portfolio header with content below, featuring project name, tags on left and description paragraph on right in two-column layout.
Detailed Analysis
This portfolio header leads with a prominent full-width hero image that occupies approximately 60% of the viewport height, using a light gray placeholder. Below the hero, the content section uses a two-column grid: the left column displays a large bold project name heading with three category tags (Tag one, Tag two, Tag three) as pill buttons; the right column contains a longer description paragraph. The clean white background below the hero provides visual contrast and allows the text content to breathe. This layout balances visual impact with detailed project information.
Webflow Paste
Copy and paste directly into Webflow Designer
Keywords
portfolio headerhero imagefull-widthtwo-column layoutproject nametag pillsdescription textimage-firstvisual portfoliocase studycontent below imageclean designbalanced 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-a10884714d5f",
"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-caae1d873188"
],
"children": [
"aa18ebbe-5268-67f5-404b-a10884714d60"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714d60",
"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-caae1d873189"
],
"children": [
"aa18ebbe-5268-67f5-404b-a10884714d61",
"aa18ebbe-5268-67f5-404b-a10884714d63"
]
},
{
"_id": "aa18ebbe-5268-67f5-404b-a10884714d61",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
... (truncated)