
Two-column asymmetric portfolio grid with bordered cards and masonry-style varying heights.
This portfolio section uses an asymmetric two-column layout with bordered cards. The left column contains a landscape card with visible content and part of another card below. The right column features a tall portrait-oriented card that spans more vertical space. Each bordered card includes project image, name, description, three category tags, and 'View project' link with chevron. The staggered heights and thin borders create an elegant masonry-style presentation.
Copy and paste directly into Webflow Designer
{
"meta": {
"droppedLinks": 0,
"dynBindRemovedCount": 0,
"unlinkedSymbolCount": 0,
"paginationRemovedCount": 0,
"dynListBindRemovedCount": 0
},
"type": "@webflow/XscpData",
"payload": {
"ix1": [],
"ix2": {
"events": [],
"actionLists": [],
"interactions": []
},
"nodes": [
{
"_id": "7bf8bfae-f940-3249-165e-01d239b2d09d",
"tag": "section",
"data": {
"tag": "section",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
"search": {
"exclude": false
},
"devlink": {
"slot": "",
"runtimeProps": {}
},
"visibility": {
"conditions": []
},
"displayName": ""
},
"type": "Block",
"classes": [
"ef0b31e9-4ae8-d95c-6f1e-73f57a19fc5b"
],
"children": [
"7bf8bfae-f940-3249-165e-01d239b2d09e"
]
},
{
"_id": "7bf8bfae-f940-3249-165e-01d239b2d09e",
"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": [
"7bf8bfae-f940-3249-165e-01d239b2d09f"
]
},
{
"_id": "7bf8bfae-f940-3249-165e-01d239b2d09f",
"tag": "div",
"data": {
"tag": "div",
"attr": {
"id": ""
},
"text": false,
"xattr": [],
"search": {
"exclude": false
... (truncated)