---
title: Portfolio Grid Pro — Filterable Work Grid Module for HubSpot
description: A filterable portfolio / work grid for HubSpot CMS. Category pills, masonry or equal-grid layouts, three card styles, and CreativeWork ItemList structured data. For agencies and studios. No jQuery.
---

[![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/website)

HubSpot CMS Module

# A filterable work grid for agencies.

Category pills, masonry or equal-grid layouts, three card styles, and CreativeWork structured data. An index of your projects — not a slider.

[Get it on the HubSpot Marketplace](https://ecosystem.hubspot.com/marketplace/website) [See it in action](https://www.nopethemes.com/portfolio-grid-pro#demo1)

Category **filter pills** **Masonry** + equal grid **JSON-LD** schema **No** jQuery

Add your projects, give each a category, and the **filter pills build themselves**. Masonry or equal grid, three card styles, every value an editor field.

01 — Masonry · meta below · category pills

## The studio index

Masonry layout with natural image heights, category, title and client·year below each card. Click a pill to filter — try it.

All

Branding

Web

Editorial

![Lumen](https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1100&q=80)

Branding Lumen Atelier Lumen · 2025

![Northwind](https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1100&q=80)

Web Northwind Platform Northwind · 2025

![Issue Twelve](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80)

Editorial Issue Twelve Field Notes · 2024

![Harbor](https://images.unsplash.com/photo-1634942537034-2531766767d1?auto=format&fit=crop&w=1100&q=80)

Branding Harbor & Co. Harbor · 2024

![Cadence](https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1100&q=80)

Web Cadence App Cadence · 2025

![Quiet Issue](https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=1100&q=80)

Editorial The Quiet Issue Slow Press · 2024

![Lumen](https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1100&q=80)

![Lumen](https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1100&q=80)

![Lumen detail](https://images.unsplash.com/photo-1524749292158-7540c2494485?auto=format&fit=crop&w=1100&q=80)

![Lumen packaging](https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1100&q=80) 

Branding

### Lumen Atelier

Lumen · 2025

A full brand identity for Lumen Atelier — wordmark, type system, colour and packaging. We rebuilt the visual language across print and digital, then handed over a living brand guide.

Read the case study

![Northwind](https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1100&q=80)

![Northwind](https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1100&q=80)

![Northwind dashboard](https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=1100&q=80)

![Northwind app](https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1100&q=80) 

Web

### Northwind Platform

Northwind · 2025

A marketing site and design system for Northwind. We shipped a component library, a CMS theme and a content model the team can extend without a developer.

Visit the site

![Issue Twelve](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80)

![Issue Twelve](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80)

![Issue Twelve spread](https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=1100&q=80)

![Issue Twelve cover](https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Issue Twelve

Field Notes · 2024

Art direction and layout for the twelfth print issue of Field Notes — 96 pages, commissioned photography and a custom display face. We set the grid, edited the photo selects and oversaw the press check.

Read the case study

![Harbor](https://images.unsplash.com/photo-1634942537034-2531766767d1?auto=format&fit=crop&w=1100&q=80)

![Harbor](https://images.unsplash.com/photo-1634942537034-2531766767d1?auto=format&fit=crop&w=1100&q=80)

![Harbor stationery](https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?auto=format&fit=crop&w=1100&q=80)

![Harbor signage](https://images.unsplash.com/photo-1600508774634-4e11d34730e2?auto=format&fit=crop&w=1100&q=80) 

Branding

### Harbor & Co.

Harbor · 2024

A name, wordmark and stationery system for Harbor & Co., a boutique maritime outfitter. We paired a condensed serif with a muted nautical palette and built out signage, labels and a small set of brand marks.

Read the case study

![Cadence](https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1100&q=80)

![Cadence](https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1100&q=80)

![Cadence screens](https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=1100&q=80)

![Cadence on device](https://images.unsplash.com/photo-1517292987719-0369a794ec0f?auto=format&fit=crop&w=1100&q=80) 

Web

### Cadence App

Cadence · 2025

Product design and a marketing site for Cadence, a habit-tracking app. We designed the onboarding flow, the core dashboard and the app store assets, then shipped a responsive landing page on HubSpot CMS.

Visit the site

![Quiet Issue](https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=1100&q=80)

![Quiet Issue](https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=1100&q=80)

![Quiet Issue interior](https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=1100&q=80)

![Quiet Issue detail](https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&q=80) 

Editorial

### The Quiet Issue

Slow Press · 2024

A single-theme print edition for Slow Press built around silence and rest. We commissioned three essays, set the book in a large-margin grid and printed it on uncoated stock with a single spot colour.

Read the case study

No projects in this category.

02 — Equal grid · overlay on hover · Space Grotesk

## Edge-to-edge tiles

Equal grid with a fixed ratio, the title and category revealed over the image on hover, an indigo active pill and a Space Grotesk type set.

Everything

Architecture

Interiors

Product

![Cliff House](https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1100&q=80)

Architecture Cliff House Marin · 2025

![Atrium Loft](https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1100&q=80)

Interiors Atrium Loft Atrium · 2024

![Form Chair](https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1100&q=80)

Product Form Chair Form · 2025

![Glass Pavilion](https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1100&q=80)

Architecture Glass Pavilion Kettal · 2024

![Warm Minimal](https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1100&q=80)

Interiors Warm Minimal Norr · 2025

![Linea Lamp](https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=1100&q=80)

Product Linea Lamp Linea · 2024

![Cliff House](https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1100&q=80)

![Cliff House](https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1100&q=80)

![Cliff House interior](https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1100&q=80)

![Cliff House exterior](https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1100&q=80) 

Architecture

### Cliff House

Marin · 2025

A coastal residence cut into the headland — concrete, glass and oak, oriented to the water.

View project

![Atrium Loft](https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1100&q=80)

![Atrium Loft](https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1100&q=80)

![Atrium living](https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1100&q=80)

![Atrium detail](https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=1100&q=80) 

Interiors

### Atrium Loft

Atrium · 2024

A double-height loft renovation — warm plaster, brass and a restrained material palette.

View project

![Form Chair](https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1100&q=80)

![Form Chair](https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1100&q=80)

![Form Chair angle](https://images.unsplash.com/photo-1538688525198-9b88f6f53126?auto=format&fit=crop&w=1100&q=80) 

Product

### Form Chair

Form · 2025

An oak lounge chair designed for small-batch production. Steam-bent frame, woven seat.

View project

![Glass Pavilion](https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1100&q=80)

![Glass Pavilion](https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1100&q=80)

![Pavilion exterior](https://images.unsplash.com/photo-1448630360428-65456885c650?auto=format&fit=crop&w=1100&q=80) 

Architecture

### Glass Pavilion

Kettal · 2024

A garden pavilion in steel and glass — a quiet room that disappears into the landscape.

View project

![Warm Minimal](https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1100&q=80)

![Warm Minimal](https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1100&q=80)

![Warm Minimal living](https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=1100&q=80) 

Interiors

### Warm Minimal

Norr · 2025

An apartment pared back to its essentials — soft light, natural textures, nothing spare.

View project

![Linea Lamp](https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=1100&q=80)

![Linea Lamp](https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=1100&q=80)

![Linea Lamp lit](https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?auto=format&fit=crop&w=1100&q=80) 

Product

### Linea Lamp

Linea · 2024

A minimal table lamp in machined aluminium with a dimmable warm LED.

View project

No projects in this category.

03 — Masonry · minimal · Fraunces · 2 columns

## Editorial, two-up

A quieter two-column masonry with image and title only, a Fraunces serif, square pills and no filter bar — for a short, curated set.

![Sundial](https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=1100&q=80)

Sundial — a year in print

![Field Studies](https://images.unsplash.com/photo-1531346878377-a5be20888e57?auto=format&fit=crop&w=1100&q=80)

Field Studies, Vol. 3

![The Long Now](https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&q=80)

The Long Now

![Paper and Light](https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=1100&q=80)

Paper & Light

![Marginalia](https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=1100&q=80)

Marginalia

![Notes on Type](https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=1100&q=80)

Notes on Type

![Still Water](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80)

Still Water

![The Index](https://images.unsplash.com/photo-1495446815901-a7297e633e8d?auto=format&fit=crop&w=1100&q=80)

The Index

![Sundial](https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Sundial — a year in print

A 96-page annual set in Fraunces and printed letterpress — a year of field notes, bound.

Read the issue

![Field Studies](https://images.unsplash.com/photo-1531346878377-a5be20888e57?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Field Studies, Vol. 3

The third volume of an ongoing photo series, printed on uncoated stock.

Read the issue

![The Long Now](https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&q=80) 

Editorial

### The Long Now

An essay collection on slowness and attention, designed for a single quiet read.

Read the issue

![Paper and Light](https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Paper & Light

A study of paper stocks and ink under changing light — a small printed object.

Read the issue

![Marginalia](https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Marginalia

A reader's edition with wide margins built for notes — printed in two weights of a single serif.

Read the issue

![Notes on Type](https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Notes on Type

A short guide to the studio's house typefaces, set as specimen pages and bound by hand.

Read the issue

![Still Water](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80) 

Editorial

### Still Water

A photo essay on rivers and rest, printed duotone on uncoated stock for a quiet, matte read.

Read the issue

![The Index](https://images.unsplash.com/photo-1495446815901-a7297e633e8d?auto=format&fit=crop&w=1100&q=80) 

Editorial

### The Index

An end-of-year compendium collecting every project, set as a dense reference with a fold-out cover.

Read the issue

Documentation

## Everything you need to set it up

This page is the demo and the manual. The three grids above are the live module; everything below explains how to build them and what every field does.

[What it is](https://www.nopethemes.com/portfolio-grid-pro#doc-what) [Quick start](https://www.nopethemes.com/portfolio-grid-pro#doc-start) [Filtering](https://www.nopethemes.com/portfolio-grid-pro#doc-filter) [Layouts & cards](https://www.nopethemes.com/portfolio-grid-pro#doc-layouts) [Detail drawer](https://www.nopethemes.com/portfolio-grid-pro#doc-drawer) [SEO / structured data](https://www.nopethemes.com/portfolio-grid-pro#doc-seo) [Style & branding](https://www.nopethemes.com/portfolio-grid-pro#doc-style) [Field reference](https://www.nopethemes.com/portfolio-grid-pro#doc-fields) [FAQ](https://www.nopethemes.com/portfolio-grid-pro#doc-faq)

---

## What it is

Portfolio Grid Pro turns a list of projects into a filterable work index — the kind of "Selected work" grid agencies and studios put on a homepage or a dedicated work page. Each project is an image card with a title, category, optional client and year, and a link to the project. It is an index, not a slider.

**1–48 projects**A repeater — add as many as you need.

**Auto filter pills**Built from the categories on your projects.

**No dependencies**Vanilla JS, no jQuery, no libraries.

---

## Quick start

- Drop **Portfolio Grid Pro** onto any page, template or blog.
- Add projects under **Content → Projects** — image, title, category, optional client + year, and a link.
- The category filter pills are generated automatically from the distinct categories you used.
- Choose masonry or equal grid and a card style under **Style**. It inherits your theme font and primary colour.

---

## Filtering

Give each project a **category** and the module builds one pill per distinct category, plus an "All" pill. Clicking a pill shows only the matching projects (and the others hide with no page reload). The pills only appear when you have more than one category, and the whole bar can be turned off. Filtering is plain JavaScript — no libraries.

---

## Layouts & cards

- **Masonry** — natural image heights in 2–4 columns (the first and third demos).
- **Equal grid** — a fixed image ratio (3:2, 4:3, square or 4:5) in 2–4 columns (the second demo).
- **Card styles:** meta below the image, meta over the image revealed on hover, or image + title only.
- **Hover:** image zoom, card lift, or none. Columns collapse to fewer on tablet and one on mobile.

---

## Detail drawer

Under **Content → Behavior** you choose what happens when a card is clicked: open a detail drawer (the default) or go to the project link. With the drawer on, clicking a card slides a panel in from the right with that project's gallery, description and an optional button or HubSpot form. The first demo above uses the drawer; try a card.

- **Gallery** — add extra images per project under **Gallery (drawer)**. The project's main image is always the first slide; thumbnails below the main image swap it.
- **Description** — a rich-text field shown in the drawer body.
- **Button** — an optional label + link (e.g. "Read the case study"). Hidden when the label is empty.
- **Form** — an optional HubSpot form rendered at the bottom of the drawer.
- Close with the X, the backdrop, or the Escape key. Focus returns to the card. Colours, panel width and radius are all fields under **Style → Detail drawer**.

---

## SEO / structured data

All titles, categories and links are real, crawlable text and anchors. With structured data on, the module outputs an `ItemList` of `CreativeWork` entries in JSON-LD — each project's name, image, category, link, client (as the creator) and year — so search engines understand the grid as a list of works. It's a single, valid block you can turn off if your page already defines its own schema.

---

## Style & branding

Every visible value is a field: section padding, max width, gap, image radius; independent eyebrow, heading, title, category and meta typography; pill font, colours, border, radius and alignment; hover effect and zoom amount; overlay colour for the overlay card style. The heading and title fonts inherit your theme heading font, and the active pill inherits your theme primary colour, so it fits your brand on drop-in.

---

## Field reference

| Field | Where | What it does |
| --- | --- | --- |
| Header | Content | Optional eyebrow, heading (H2/H3) and sub-text above the grid. |
| Projects | Content | Repeater: image, title, category, client, year, link, and drawer fields (gallery, description, button, form). |
| Behavior | Content | Whether a card click opens the detail drawer or follows the project link. |
| Filter | Content | Toggle the category pills and set the "All" label. |
| SEO | Content | Toggle ItemList / CreativeWork JSON-LD and set the list name. |
| Layout | Style | Masonry or equal grid, columns, image ratio, gap, max width, padding, background. |
| Typography | Style | Eyebrow, heading, sub, title, category and meta fonts. |
| Cards | Style | Card style, hover effect, image radius, zoom, overlay colours. |
| Filter pills | Style | Font, colours, border, radius, alignment, active colour. |
| Detail drawer | Style | Panel background, max width, radius; heading, body and meta colours; backdrop; close button; gallery gap and radius; button colours and radius. |
| Effects | Style | Entrance animation and stagger. |
| Responsive | Style | Tablet and mobile breakpoints. |

---

## FAQ

How is this different from a carousel?

A carousel shows a few items at a time and slides. This is a full index — every project visible at once in a grid, with category filtering. Use it for a work or projects page.

Where do the filter pills come from?

They're built automatically from the categories you set on your projects. One pill per distinct category, plus "All". No separate list to maintain.

Does it output structured data?

Yes — an ItemList of CreativeWork entries in JSON-LD, with each project's name, image, category, link, client and year. You can turn it off.

What happens when I click a card?

Your choice. By default a detail drawer slides in from the right with the project's image gallery, description, an optional button and an optional HubSpot form. Or set cards to follow the project link instead. Close the drawer with the X, the backdrop or the Escape key.

Masonry or equal grid?

Both. Masonry keeps each image's natural height; equal grid crops to a fixed ratio. Pick per instance, in 2–4 columns.

Does it need any libraries?

No. Filtering and the reveal animation are plain JavaScript. No jQuery, no HubDB, no external scripts.

Is it responsive?

Yes — columns step down on tablet and collapse to one on mobile, and images lazy-load.

Studio Nope

## Show your work properly

A filterable work grid for your HubSpot site.

[Get it on the HubSpot Marketplace](https://ecosystem.hubspot.com/marketplace/website) Back to top

[![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en)

Portfolio Grid Pro — a Studio Nope module for HubSpot CMS.

```json
{
  "@context" : "https://schema.org",
  "@type" : "ItemList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Lumen"
      },
      "dateCreated" : "2025",
      "description" : "A full brand identity for Lumen Atelier — wordmark, type system, colour and packaging. We rebuilt the visual language across print and digital, then handed over a living brand guide.",
      "genre" : "Branding",
      "image" : [ "https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1524749292158-7540c2494485?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Lumen Atelier",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_one&pgc=branding&pgi=lumen-atelier"
    },
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Northwind"
      },
      "dateCreated" : "2025",
      "description" : "A marketing site and design system for Northwind. We shipped a component library, a CMS theme and a content model the team can extend without a developer.",
      "genre" : "Web",
      "image" : [ "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Northwind Platform",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_one&pgc=web&pgi=northwind-platform"
    },
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Field Notes"
      },
      "dateCreated" : "2024",
      "description" : "Art direction and layout for the twelfth print issue of Field Notes — 96 pages, commissioned photography and a custom display face. We set the grid, edited the photo selects and oversaw the press check.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Issue Twelve",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_one&pgc=editorial&pgi=issue-twelve"
    },
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Harbor"
      },
      "dateCreated" : "2024",
      "description" : "A name, wordmark and stationery system for Harbor & Co., a boutique maritime outfitter. We paired a condensed serif with a muted nautical palette and built out signage, labels and a small set of brand marks.",
      "genre" : "Branding",
      "image" : [ "https://images.unsplash.com/photo-1634942537034-2531766767d1?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1600508774634-4e11d34730e2?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Harbor & Co.",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_one&pgc=branding&pgi=harbor-co"
    },
    "position" : 4
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Cadence"
      },
      "dateCreated" : "2025",
      "description" : "Product design and a marketing site for Cadence, a habit-tracking app. We designed the onboarding flow, the core dashboard and the app store assets, then shipped a responsive landing page on HubSpot CMS.",
      "genre" : "Web",
      "image" : [ "https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1517292987719-0369a794ec0f?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Cadence App",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_one&pgc=web&pgi=cadence-app"
    },
    "position" : 5
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Slow Press"
      },
      "dateCreated" : "2024",
      "description" : "A single-theme print edition for Slow Press built around silence and rest. We commissioned three essays, set the book in a large-margin grid and printed it on uncoated stock with a single spot colour.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "The Quiet Issue",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_one&pgc=editorial&pgi=the-quiet-issue"
    },
    "position" : 6
  } ],
  "name" : "Selected work",
  "numberOfItems" : 6
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "ItemList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Marin"
      },
      "dateCreated" : "2025",
      "description" : "A coastal residence cut into the headland — concrete, glass and oak, oriented to the water.",
      "genre" : "Architecture",
      "image" : [ "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Cliff House",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_two&pgc=architecture&pgi=cliff-house"
    },
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Atrium"
      },
      "dateCreated" : "2024",
      "description" : "A double-height loft renovation — warm plaster, brass and a restrained material palette.",
      "genre" : "Interiors",
      "image" : [ "https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Atrium Loft",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_two&pgc=interiors&pgi=atrium-loft"
    },
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Form"
      },
      "dateCreated" : "2025",
      "description" : "An oak lounge chair designed for small-batch production. Steam-bent frame, woven seat.",
      "genre" : "Product",
      "image" : [ "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1538688525198-9b88f6f53126?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Form Chair",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_two&pgc=product&pgi=form-chair"
    },
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Kettal"
      },
      "dateCreated" : "2024",
      "description" : "A garden pavilion in steel and glass — a quiet room that disappears into the landscape.",
      "genre" : "Architecture",
      "image" : [ "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1448630360428-65456885c650?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Glass Pavilion",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_two&pgc=architecture&pgi=glass-pavilion"
    },
    "position" : 4
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Norr"
      },
      "dateCreated" : "2025",
      "description" : "An apartment pared back to its essentials — soft light, natural textures, nothing spare.",
      "genre" : "Interiors",
      "image" : [ "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Warm Minimal",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_two&pgc=interiors&pgi=warm-minimal"
    },
    "position" : 5
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "creator" : {
        "@type" : "Organization",
        "name" : "Linea"
      },
      "dateCreated" : "2024",
      "description" : "A minimal table lamp in machined aluminium with a dimmable warm LED.",
      "genre" : "Product",
      "image" : [ "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&fit=crop&w=1100&q=80", "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Linea Lamp",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_two&pgc=product&pgi=linea-lamp"
    },
    "position" : 6
  } ],
  "name" : "Selected work",
  "numberOfItems" : 6
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "ItemList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "A 96-page annual set in Fraunces and printed letterpress — a year of field notes, bound.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Sundial — a year in print",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=sundial-a-year-in-print"
    },
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "The third volume of an ongoing photo series, printed on uncoated stock.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1531346878377-a5be20888e57?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Field Studies, Vol. 3",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=field-studies-vol-3"
    },
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "An essay collection on slowness and attention, designed for a single quiet read.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "The Long Now",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=the-long-now"
    },
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "A study of paper stocks and ink under changing light — a small printed object.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Paper & Light",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=paper-light"
    },
    "position" : 4
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "A reader's edition with wide margins built for notes — printed in two weights of a single serif.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Marginalia",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=marginalia"
    },
    "position" : 5
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "A short guide to the studio's house typefaces, set as specimen pages and bound by hand.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Notes on Type",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=notes-on-type"
    },
    "position" : 6
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "A photo essay on rivers and rest, printed duotone on uncoated stock for a quiet, matte read.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "Still Water",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=still-water"
    },
    "position" : 7
  }, {
    "@type" : "ListItem",
    "item" : {
      "@type" : "CreativeWork",
      "description" : "An end-of-year compendium collecting every project, set as a dense reference with a fold-out cover.",
      "genre" : "Editorial",
      "image" : [ "https://images.unsplash.com/photo-1495446815901-a7297e633e8d?auto=format&fit=crop&w=1100&q=80" ],
      "name" : "The Index",
      "url" : "https://www.nopethemes.com/portfolio-grid-pro?pgm=pgp_three&pgc=editorial&pgi=the-index"
    },
    "position" : 8
  } ],
  "name" : "Selected work",
  "numberOfItems" : 8
}
```