The archive as a strip, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-strip.html Library (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # The archive as a strip A history taken in one pass: eight narrow 2:3 photographs in a single row across the whole measure, set hard against each other, each filed under a currentColor hairline with its date in wide-tracked capitals and nothing else. Nothing carries a title or a paragraph. The heading and lede above are generous and held to a measure, so one band holds an airy opening and a packed strip. Example images are included and can be replaced in the editor. States no colour and no font of its own. Start here ## What to change first - The eight photographs. Select each one in the editor; the crop and the layout are already set. - The dates. Months here, but a year, a quarter or a short word all set. - The heading and lede. Written to say the section is a strip of eight. - The number of frames. Duplicate a column to add one, delete one to drop one, and check 820px afterwards: that is where the columns are narrowest before they stack. The signature moment ## A history read in one sweep, not in rows The signature is that the whole history is one horizontal pass. A grid of photographs asks the reader to scan a block; a strip asks them to move their eye once, left to right, and the dates arrive in order as they do. Eight narrow columns at 1240px are about 145px each, which is a shape with room for a photograph and a date and room for nothing else, and that constraint is the design rather than a limitation of it. Nothing here carries a title, a caption or a paragraph. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your photographs. ### Set by this pattern - Full bleed with a 1240px measure - The tight gutter. - The portrait crop. - The date alone as the caption - Eight frames. 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 Eight months of an archive in one thin filmstrip across the page. Each frame is a narrow 2:3 photograph filed under a currentColor hairline with a date and nothing else, and the eight of them run the full 1240px measure with a 3-to-12px gutter between them. Core blocks only: core/group, core/columns, core/column, core/image, core/heading, core/paragraph. ### The signature moment: a history read in one sweep, not in rows The signature is that the whole history is one horizontal pass. A grid of photographs asks the reader to scan a block; a strip asks them to move their eye once, left to right, and the dates arrive in order as they do. Eight narrow columns at 1240px are about 145px each, which is a shape with room for a photograph and a date and room for nothing else, and that constraint is the design rather than a limitation of it. Nothing here carries a title, a caption or a paragraph. Nothing is at display size except the section heading. Every date sits at a clamp() floored at 0.9375rem in tracked capitals. The heading above carries the whole of the section's scale, so the strip below it can stay completely flat: no frame is louder than any other, which is what stops a strip becoming a timeline with a favourite in it. Density contrast holds the band together. Above the strip, the eyebrow, the heading and the lede get a spacing-70 run of air and the lede is held to a 40rem measure, so the opening breathes like the top of an essay. Below it, eight frames sit hard against each other with a clamp(0.5rem, 1.2vw, 0.75rem) gutter. One band, one ground, two densities. #### How a frame is built Each column is a core/group holding a populated core/image at aspectRatio 2/3 with scale: cover, then a second group carrying a 1px currentColor border-top and the date. The rule belongs to the caption, not to the image, so it sits under the frame like the line on a filing card and follows your text colour wherever your theme puts it. It cannot resolve to nothing, which a preset colour rung could. The wrapping group states contentSize: 1240px, and that is load-bearing. A nested constrained group with no contentSize re-caps its children at the THEME's content width rather than the band's, which in a stock theme is about 620px. Eight columns inside 620px are 67px each, and at that width even a three-letter month breaks across two lines. If you wrap the strip in a group of your own, give that group the same contentSize or take the wrapper away. #### What happens at 390, stated honestly The eight columns stack. Core sets flex-basis: 100% on a column below 782px and this pattern does not override it. isStackedOnMobile: false was deliberately not set: eight across at 390 leaves about 43px a frame, which is a smear rather than a photograph. So on a phone the strip becomes a single column of eight dated frames read top to bottom. It is a different reading from the one a laptop gets, and it is still the same archive: the rule and the date arrive in the same order under every photograph. Between 782px and about 820px the eight columns are roughly 90px each. That is the width the caption was written for, and it is why a date alone is the whole caption: a date cannot wrap, so the strip stays legible everywhere the frames do. Make it yoursVariations and the edits to make first ### What to change first - The eight photographs. Select each one in the editor; the crop and the layout are already set. They want to be shot in roughly the same light: a strip puts eight of them side by side with 6px between them and nothing to excuse a mismatch. - The dates. Months here, but a year, a quarter or a short word all set. Keep them short enough not to wrap at 90px. - The heading and lede. Written to say the section is a strip of eight. If you change the count, say so there too. - The number of frames. Duplicate a column to add one, delete one to drop one, and check 820px afterwards: that is where the columns are narrowest before they stack. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. - Your colours. base for the ground, contrast for the type, both ending on a colour WordPress guarantees. Every rule is currentColor. - Your spacing scale. The air above the strip and the gap between a frame and its rule are spacing presets, so a theme with a generous scale gets a more generous opening and the density contrast grows rather than shrinks. - Your photographs. The image blocks include example photographs. Choose Replace to select your own media; the 2:3 crop is already set. ### What it decides for itself - Full bleed with a 1240px measure, stated on the strip's own wrapper as well as the band's. - The tight gutter. clamp(0.5rem, 1.2vw, 0.75rem), so the eight frames read as one object rather than eight pictures. - The portrait crop. 2:3 is what makes a 145px column read as a frame rather than as a chip; a square at that width looks like a thumbnail. - The date alone as the caption, measured rather than stylistic. See the 390 note above. - Eight frames. Eight is a year's worth of selections at a sensible column width; ten drops each frame under 115px and twelve is a filmstrip nobody can see the pictures in. Technical notesBlock mechanics, responsive behaviour and constraints ### Why it is a history and not a gallery The dates mark a monthly selection from a studio image library, in order. Nothing is numbered, nothing is counted down and no caption asks the reader to do anything. The photographs are visual references selected during those months, not historical photographs of the studio or a record of when each source image was taken. It is also not the other photographic timeline. timeline-archive is the same eight frames as a contact sheet, four across and twice, square crops, with room under each for three or four words of title as well as the date. Take the sheet where the section is a block on the page that the reader stops at, and this one where the section is a band the reader crosses. ### Notes - Core blocks only. No plugin, no script, no separator, no core/gallery. - Grid layout on core/group was deliberately not used: this catalogue's floor is WordPress 6.6 and one core/columns row is the shape that is certain there. - Example photograph URLs travel with the copied markup; see image credits (https://patternpaste.com/image-credits/). ### Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. 17KB of core-block markup, 6 blocks (column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Team Team alternating profiles Three broad profile spreads alternate the portrait side, giving each person room for a biography and a personal approach. Example portraits are included, generated and nobody real; replace them with photographs of your own people. Inherits your theme’s palette and typeface. (https://patternpaste.com/pattern/team-alternating-profiles.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks column, columns, group, heading, image, paragraph Core only yes Chains 26, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 70, 80 font-size medium, xx-large Continue exploring ## Next in Timeline Explore all 16 Timeline patterns (https://patternpaste.com/patterns/timeline/)Also in Gallery (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Timeline Timeline Standard ### Timeline stair Six dated entries that step across the page as they descend. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/timeline-stair.html) Stair reversed (https://patternpaste.com/pattern/timeline-stair.html#variant=stair-descending) Shot in Twenty Twenty-Five Timeline Timeline Standard ### Timeline ahead A timeline that runs forward: six dated entries hung on one continuous currentColor hairline, three of them behind and three still to come, with the current entry set on an inverted plate so the reader can see at a glance where the work stands. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/timeline-ahead.html) Open road (https://patternpaste.com/pattern/timeline-ahead.html#variant=ahead-open) Shot in Twenty Twenty-Five Timeline Timeline Gallery Standard ### Timeline archive A history set as a contact sheet: eight square photographs four across in two tight rows, each filed under a currentColor hairline with the date in wide-tracked caps and three or four words of title. 6 blocks Open preview (https://patternpaste.com/pattern/timeline-archive.html)