Component Browser
BrowseBuild
Home/Browse/Portfolio 9

Portfolio 9

ImageButtons131 nodes ยท 42 styles
Portfolio 9

Description

Two-column asymmetric portfolio grid with bordered cards and masonry-style varying heights.

Detailed Analysis

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.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

portfolio gridasymmetric layoutmasonry stylebordered cardstwo columnsvarying heightsthin bordersportrait imagelandscape imagecategory tagsstaggered layoutview project link

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": "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)