# Timeline cover years

> A full-bleed cover under a heavy veil of your theme's contrast colour: a display headline in the lower left and, down the right side, a rail of six years, each a large year figure and one event line, joined by a vertical rule with a hairline branching off at every year. The rail drops beneath the headline on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it, so the cover reads as a section and not the page.

Canonical: https://patternpaste.com/pattern/timeline-cover-years.html
Section: Timeline
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 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, cover, group, heading, paragraph
Keywords: timeline, history, years, milestones, cover, photo, about

## Variations (2)

### Ink veil (the default)

Identical markup in every theme.

An 80% veil of your contrast over the photograph with your base as the type: the headline low on the left, six years running down a ruled rail on the right.

### Paper veil

Identical markup in every theme.

The same cover inverted: the veil is your base at 80% and every word and rule your contrast, the photograph a pale ghost behind ink. For a page that stays light.


---

## The signature moment: the years run down the photograph

The years are not a list under the headline; they are a rail laid on the
picture. A two-pixel vertical rule runs the height of the cover, and at every
year a hairline branches off it, so each date hangs from the spine like a
station on a line. The year figures are large, the event lines small, and the
heavy stack on the right answers a single heavy headline low on the left. It
is structure, not decoration, and it holds in greyscale.

## Type on the photograph

Type sits on the image only because the veil makes the ground a known
quantity: `contrast` at `dimRatio` 80 under `base` type. The event lines are
body size, so they need the full 4.5:1, not the 3:1 allowed to large display
type; the checker composites the veil over a white and a black photograph and
the worse ground has to pass. Lower the veil below 80 and that stops being
true.

## Type and hierarchy

- The headline is display: a bare `clamp(2.75rem, 6.5vw, 8.5rem)`, off the
  theme's ladder, because its size is the composition; at 1920 it is 136px,
  held to a `clamp(18rem, 42vw, 46rem)` measure so it breaks into a block.
- The year figures are paragraphs at a bare `clamp(2.25rem, 4.6vw, 6rem)`,
  line-height 1: they are labels whose size is the rail, not headings.
- Event lines and the standfirst are body copy on `medium`; "Our history" is a
  label with its own `clamp()` floored at 15px.
- Hierarchy comes from size and the rules alone: nothing is set in capitals.
- The heading states its size and colour chain and nothing else.

## Layout

- The cover's height comes from the rail: six entries set it, never `vh`.
- The inside is a two-column `core/columns`, 56% and 44%, both columns
  bottom-aligned, so the headline sits at the foot while the rail fills the
  height. Below 782px the columns stack and the rail drops beneath the
  headline.
- The rail is a vertical flex group with a left border; each entry is a group
  with a top border starting at that border. Rules are `currentColor`, always
  the colour of the type.
- Gaps are spacing presets; side padding on the inner groups is zero.

## What it inherits, what it decides

Inherits: every colour (veil `contrast`, type and rules `base`), the typeface,
the spacing scale. Decides: the veil's opacity, the type ramp, the measures,
the column split. The cover states its own text colour chain so core's white
cover text rule never applies.

## What a buyer changes first

The photograph: choose Replace on the cover. Then the headline and the six
entries; duplicate or delete an entry group to change the count. The last
entry has no bottom padding, so the rail ends on its event line.

## Variations

- **Paper veil**: the veil is `base` at 80% and every word and rule
  `contrast`, the photograph a pale ghost behind ink.

## The hand-off row

A short row on your theme's paper under the cover, a label and one paragraph
at a 34rem measure, so the cover reads as a section and shows where it ends.

## Included images

The copied markup includes a WordPress Photo Directory example photograph. The
public image URL keeps the example visible after pasting. Select the cover and
choose **Replace** to use your own Media Library file. See
[image credits](/image-credits/) for the source and license. Pasting an image
URL does not import a Media Library attachment.