Documentation

Case study

A project write-up with its own work card and pagination that loops through every case study.

On this page 3

When to use it

  • For a project write-up you want in a card group on the home and work pages.

When not to use it

  • For a list of projects. Use a standard page with a card group; that's how the Work page is built.
  • For a dated, opinion-led piece. Use a blog post.

Fields

Field Max characters Notes
Title 60 Required. The short name in pagination and the browser tab. We recommend under 30 characters so it stays on one line on a card.
Heading 80 Required. The page's h1 and the card title, where the title becomes a full claim. Italic marks the highlighted words. We recommend under 60 characters, which holds to two lines on a laptop.
Description 320 Required. The problem, shown under the heading and as the search result summary. We recommend under 160 characters so search results show it whole.
Preview images 3 images Optional. Transparent device cutouts, such as a laptop or phone exported from Shots.so. They show beside the heading, and on the card over the watermark. With three, the middle one sits in front, so put the strongest image second. Alt text comes from each asset.
Category 24 Required. The label above the title on the card. We recommend one or two words, under 16 characters, like "Design System".
Company 60 Optional. Not shown on the card; used in search result metadata.
Outcome 100 Required. One line under the title on the card: what changed because of the work. We recommend under 70 characters.
Disciplines 4 items Optional. Not shown on the card; used as search keywords.
Fits roles in 3 items Optional. One quiet line at the foot of the card: the kinds of role this work is evidence for. We recommend under 25 characters each.
Watermark 24 Optional. The word repeated as a pattern behind the card image; defaults to the title. We recommend one or two words, under 15 characters.
Previous case study — Required. Shown bottom left in pagination. The first case study's previous is the last one.
Next case study — Required. Shown bottom right in pagination. The last case study's next is the first one, so pagination loops.