Branding
Lumen Atelier
Category pills, masonry or equal-grid layouts, three card styles, and CreativeWork structured data. An index of your projects — not a slider.
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.
Masonry layout with natural image heights, category, title and client·year below each card. Click a pill to filter — try it.
No projects in this category.
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.
A quieter two-column masonry with image and title only, a Fraunces serif, square pills and no filter bar — for a short, curated set.
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.
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.
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.
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.
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 | 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. |
| 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. |
| Effects | Style | Entrance animation and stagger. |
| Responsive | Style | Tablet and mobile breakpoints. |
