Skip to content

PatternsPage patternsWork index

Work index

The list of case studies. A small hero, a one-column stack of work cards, sorted by year.

1 sectionSortableFeatured first

Anatomy

  1. Hero. Eyebrow, title ("Work" or similar), lede, no actions.
  2. Work list. A single column. Each card has a thumbnail (1.6:1), a title, a description, and a meta row (year, role).
  3. Featured. The top item is wider — full-bleed, with a larger image and a longer description.

Rules of thumb

  • Sort by year, newest first. No "popular" or "trending" sort.
  • Featured is one item. Not two, not three. The featured item is the most recent or the most representative.
  • Each work card's thumbnail must work at 360 px wide. If it doesn't, the thumbnail is wrong.
  • No filter, no search, no tag cloud. The list is short enough to scroll.

The skeleton

work/page.tsx
<section className="work-hero">
  <p className="ds-page-eyebrow">Work</p>
  <h1 className="ds-page-title">Selected work, 2023 — 2026.</h1>
  <p className="ds-page-lede">...</p>
</section>

<WorkList items={work} /> {/* featured first, then chronological */}