Projects landing

Tags above a grid of projects

Four pairings of a grid layout and a tag style. None of the grids reuse a Case Studies layout. The grid and the tag style in each option are independent, so any tag style can go with any grid. Click a tag to filter. Project names are placeholders.

1aMasonry · nav-style tags

Three columns where each photo keeps its own crop, so the grid follows the photography. The tags are set like the primary nav, with the gold bar from the case study index under the active tag.

{{ t.lower }}
{{ p.name }}{{ p.typ }}
1bParcel grid · angled plates

Tiles of different sizes packed into one block, like parcels on a site plan. Filtering keeps every tile in place and fades out the ones that don't match, so the plan stays whole. The tags use the angled edge from the logo plate and the footer band.

{{ t.label }}
{{ p.name }}{{ p.typ }}
1cStaggered columns · serif index

Three columns of portrait tiles, each column set at a different height so the rows never line up. The tags are a serif word index at the size of the primary nav, with a project count after each word.

{{ t.label }}{{ t.count }}
{{ p.name }}{{ p.typ }}
1fContact sheet · facet table

Square crops packed edge to edge with hairline gaps. The tags borrow the facts table from the project page: a small label and a row of bold values on each line, with the tags as the bold values. Tiles that don't match fade out.

{{ fa.label }} {{ v.label }}
{{ p.name }}{{ p.typ }}