# Case study spread

> One project told in full on a dark slab: a label and a display headline, a large photograph with a smaller one lapping its lower corner and hanging below it, then three columns for the brief, what was done and what it became, the last closing on three big figures, and a client's line under a hairline. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/case-study-spread.html
Section: Editorial
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: column, columns, group, heading, image, paragraph
Keywords: case study, project, portfolio, photography, brief, results, figures

## Variations (2)

### Dark spread (the default)

Identical markup in every theme.

Your contrast colour as the slab with base type throughout and currentColor marks and hairline.

### Folio

This variation states its own colours and states its own type: identical in every theme.

The Folio photographer set: the Kestrel Hotels shoot on a darkroom-black slab, bone Helvetica headline and figures, silver copy and monospace frame captions, safelight marks on the three column labels.


---

## The signature moment: a small photograph laps the corner of the large one and hangs below it, and the story ends on three figures

**A flex row of two items, the second lapping the first.** The large 3:2
photograph and its caption take 75 percent; the smaller 4:5 photograph is
fixed at 34 percent, pulled left over the large one by a negative margin and
dropped by a top margin, so it overlaps the lower corner and hangs below it. Below, three columns
for the brief, what was done and what it became; the last closes on 42, 3 and
64 set large with small words beneath. A client's line sits under a hairline
at the foot.

On a phone the two photographs keep their lap at a smaller size and the three
columns stack in reading order.

## What it inherits from your theme

- **The typeface.** No font family is stated; the headline takes the theme's
  `xx-large` rung with a display clamp behind it, labels and captions are
  small tracked capitals in your body face.
- **Your colours.** The slab is your `contrast` colour; every heading,
  paragraph, caption and figure states your `base` colour. Marks and the
  hairline are `currentColor`.
- **Your spacing.** Vertical rhythm is spacing presets; the lap is in
  percentages so it holds at every width.

## The Folio look

The free Folio set's case study: darkroom `#141517` slab, bone `#efe9df`
headline, figures and client line, silver `#b9bcc2` copy and frame captions in
monospace, safelight `#c8432b` marks on the labels.

## Photographs

Two CC0 photographs from the WordPress.org Photo Directory, linked from
pd.w.org: a hotel room with a daybed and a cove in low sun. Replace them with
your own project's pictures.