# 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. Canonical: https://patternpaste.com/pattern/timeline-numerals.html Section: Timeline Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. 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, paragraph Keywords: timeline, history, years, numerals, about, chronology, display ## Variations (3) ### Open numerals (the default) Identical markup in every theme. The years hang ranged right against the copy, at display size, on the ground your theme supplies. Nothing is drawn: the vertical edge down the middle of the section is the right edge of the numerals themselves, which is why adding or removing an entry cannot break it. ### Ink and vermilion This variation states its own colours and states its own type: identical in every theme. Bone ground and ink copy frame vermilion display years in a bold condensed grotesque. ### Numerals inverted Identical markup in every theme. One axis moves and nothing else does: the band inverts to a contrast ground with base type. At this scale that makes the column of years the loudest thing on the page, and the section reads as a plate rather than a page. The composition is identical to the base. --- ## 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. ## The one thing that decides the column split 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:1 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. ## 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 variation `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 timelines - `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. ## Notes - 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 type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(4rem, 10vw, 9rem)