[Library] Timeline

Catalogue accessStandard

Timeline numerals

Five dated entries and no rule anywhere. Each year is set at display size in a narrow left column, ranged right, with the entry title and one short paragraph set at reading size immediately beside it and nothing in between. The years are the same four digits at the same size, so the column of numerals forms a hard vertical edge against the copy and does the work a hairline does in every other timeline. No border, no separator, no line of any kind. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

Five dated entries with no rule, no border and no separator anywhere in the section. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph.

The signature moment

Scale collision as structure

The signature is that the year is at display size and the copy beside it is at reading size, with nothing in between, and the column of numerals does the work a hairline does in every other timeline. That is why this pattern has no rule.

Each entry is a two-column row. The left column holds the year alone, at clamp(4rem, 10vw, 9rem) with line-height: 0.9 and -0.045em tracking, ranged right. The right column holds the entry title at about 17px and one paragraph at 15 to 17px. There is no intermediate size in the section: the eye goes from 140px to 17px in one step, which is what makes the numerals read as structure rather than as labels.

Every year is four digits set at the same size, so the numeral column has a true vertical on both edges. The right one is the one that matters: it lands one column gap from the left edge of every title and every paragraph, and that pair of edges is the only line in the section. Nothing is drawn, so nothing can resolve to a colour that is not there, and adding or removing an entry cannot break the alignment the way an authored rule of a fixed length can.

The eyebrow above the entries sits in the same left column, also ranged right, so the vertical runs from the top of the section to the bottom of it.

Why the years are ranged right

Left-ranged numerals would put the vertical on the outside of the section, where the copy cannot see it, and leave a widening void between the numeral and the text it belongs to as the viewport grows. Ranged right, the numeral is always one gap from its own sentence at every width, and the space the column does not need collects in the left margin, where it reads as the section's indent. That margin is the composition, not a leftover: it is what stops five display numerals from looking like a price list.

What it inherits from your theme

  • The typeface. No font family is stated anywhere, in the base or the variation.
  • Your colours. Ground and type are the base and contrast chains, and the variation swaps which is which.
  • Your spacing scale. The gap between entries is spacing|70 and the gap between the heading and the first entry is spacing|80, so a theme with a generous scale gets a more open section. With no rule to hold the entries apart, that whitespace is the only thing separating them, which is why it is set at the top of the scale.

What it decides for itself

  • Full bleed with a 1240px measure.
  • The 38/62 split, and that the row never stacks.
  • The type ramp, and the hole in it. Display years, 17px titles, 15 to 17px copy, and nothing between 17px and the year.
  • The reading measure. Each paragraph sits in a nested constrained group at 32rem, so the copy runs at about 65 characters instead of the full column.
  • Optical alignment of the first line of copy to the numeral's cap height. The copy group takes a clamp(0.25rem, 0.72vw, 0.65rem) top padding, which scales with the numeral the way a fixed value would not.

What to change first

  1. The five entries. Duplicate a row to add one. The only value that differs between rows is the top margin: the first entry carries spacing|80 because it follows the heading, and every other entry carries spacing|70.
  2. The years. Keep them the same number of digits. Two entries of different digit counts break the vertical, and the vertical is the whole pattern.
  3. The entry copy. One or two sentences. A third turns the right column into a document and the numeral stops being the largest thing in its own row.
  4. The heading and the eyebrow. The eyebrow is ranged right in the numeral column on purpose; it is the top of the vertical.
  5. The ground. Ship the base on a page that already has weight, and numerals-inverted where the section is meant to be the loudest thing on it.
The one thing that decides the column split206 words

The year column is 38% and the copy column is 62%, and the number comes from the phone rather than from the desktop. At 390 the clamp() floor holds the year at 64px; four digits at 64px measure about 116px in a sans and less in a serif, and 38% of the content width at 390 is about 128px. isStackedOnMobile is false, so the row never stacks and the numeral stays the rail on a phone, where a stacked year would drop above its own copy and the vertical would disappear at exactly the width that needs it most. The copy column is then about 210px, which holds roughly 28 characters a line: narrow, but well clear of a ladder.

If you lengthen the years (a range such as 1979-90, or a season) widen the year column percentage rather than shrinking the type. Shrinking the type is what kills the pattern; a wider column only moves the left margin.

The heading row above the entries is the one row that does stack on a phone, deliberately: a 56px headline squeezed into 62% of a 390px screen wraps three words to a line. Stacked, the eyebrow sits ranged right above a headline that has the full width.

Contrast, and what is claimed at 3:192 words

Every colour is a chain: base for the ground, contrast for the type, each ending on a colour WordPress guarantees. The years are claimed at the 3:1 large text floor, not 4.5:1, and they earn it: the floor of the clamp() is 64px, four times the 24px threshold, at weight 600. Everything else in the section, the eyebrow, the titles, the lede and the entry paragraphs, is judged at 4.5:1. Every heading states its own text colour explicitly, because a theme's heading element style beats a colour inherited from the wrapping group.

The variation79 words

numerals-inverted moves one axis, colour, and moves it the only way a chain can move: the ground goes to the contrast chain and the type to the base chain. Every other byte is the base's, which is the point of it. At display size the inversion does something an inversion of a smaller section does not: the numerals stop being dark marks on a page and become the lit part of a plate, and the copy beside them recedes.

How it differs from the other timelines142 words
  • timeline-rail is six milestones hung on one continuous currentColor hairline that runs past both ends. It has a rule, and the rule is its subject.
  • timeline-decades is twenty single lines under four decade heads, opened by a 2px rule each. It is a record you scan.
  • This one is five entries and no line at all. The structure is made entirely of type size and alignment. At thumbnail size the three are obviously different objects: a line with things hung off it, four ruled blocks of text, and a column of huge numbers.

The subject differs too. The rail is a design studio and the decades are a manufacturer; this is a public open-air pool, and it is a history rather than a process: nothing is numbered, nothing is a step, and nothing asks the reader to do anything.

Notes43 words
  • Core blocks only. No plugin, no script, no separator, no border.
  • Default promise on all three axes: no colour, font family or motion is stated.
  • No image is shipped and none is needed; the section is type on a ground.
Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(4rem, 10vw, 9rem)
Back to the library

Continue exploring

Next in Timeline

Explore all 12 Timeline patterns