Component Browser
BrowseBuild
Home/Browse/Portfolio 12

Portfolio 12

ImageButtons185 nodes ยท 43 styles
Portfolio 12

Description

Six-project masonry portfolio grid with three columns and varying image heights.

Detailed Analysis

This portfolio section displays six projects in a dynamic three-column masonry grid layout. Each column features two cards with varying heights - some with landscape images, others with taller portrait-oriented images. This creates an engaging staggered visual rhythm. Every card includes project name, description, three category tags (Tag one, Tag two, Tag three), and 'View project' link with chevron. The centered header provides section context. The dense layout efficiently showcases multiple projects.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

portfolio gridthree columnsmasonry layoutsix projectsvarying heightsstaggered gridportrait imageslandscape imagescategory tagsdense layoutproject showcaseview project links

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": "6f7e3789-4d48-be89-9fc1-ca3bda1a6911",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "7128708f-c1a3-e425-916b-a273d355e8a5"
        ],
        "children": [
          "6f7e3789-4d48-be89-9fc1-ca3bda1a6912"
        ]
      },
      {
        "_id": "6f7e3789-4d48-be89-9fc1-ca3bda1a6912",
        "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": [
          "6f7e3789-4d48-be89-9fc1-ca3bda1a6913"
        ]
      },
      {
        "_id": "6f7e3789-4d48-be89-9fc1-ca3bda1a6913",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)