Timeline numerals: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-numerals.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The five entries. Duplicate a row to add one. - The years. Keep them the same number of digits. - The entry copy. One or two sentences. - The heading and the eyebrow. The eyebrow is ranged right in the numeral column on purpose; it is the top of the vertical. - 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 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px measure. - The 38/62 split - The type ramp, and the hole in it. - The reading measure. - Optical alignment of the first line of copy to the numeral's cap height. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview 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. Make it yoursVariations and the edits to make first ### What to change first - 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. - 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. - 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. - The heading and the eyebrow. The eyebrow is ranged right in the numeral column on purpose; it is the top of the vertical. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(4rem, 10vw, 9rem) Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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. Questions ## Timeline numerals: common questions Does Timeline numerals need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Timeline numerals match my theme? Choose by variation. Open numerals and Numerals inverted take your theme’s palette; Ink and vermilion brings its own colours. How many variations does Timeline numerals have? 3: Open numerals, Ink and vermilion and Numerals inverted. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline numerals free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 18KB of core-block markup, 5 blocks (column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Team About day in hours An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/about-day-in-hours.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Timeline Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 4, font-size 3 WordPress 7.0+ Continue exploring ## Next in Timeline Explore all 20 Timeline patterns (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline frames An image-led history: four dated milestones, each a portrait photograph cropped to 4:5 with its date and title on a slab beneath it, under a currentColor hairline that butts the frame. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-frames.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline order of service The order of the day as an order-of-service booklet opened flat: a cover page with the names, the date, a small photograph and the place meets a running page at the fold, where each time is a small tracked label over the event in a larger line, centred and divided by short rules. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-order-of-service.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline parallel Two histories run down the page together and are compared row by row: one track is the organisation itself, the other is the wider field it worked in, and a shared year sits between them. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-parallel.html)