# 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. The second and fourth columns are dropped by one spacing preset, so the row reads as a drifting run with direction rather than a tidy grid of four. Includes replaceable example images. It is a history and not a process: nothing is numbered and nothing asks the reader to act. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/timeline-frames.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, image, paragraph Keywords: timeline, history, milestones, years, about, photographs, stagger, chronology ## Variations (2) ### Staggered frames (the default) Identical markup in every theme. Four frames of the same proportion with the second and fourth dropped by a fixed offset, so the eye moves along the row the way it moves along a timeline. On a phone the columns stack and the offset becomes extra breathing room between entries. ### Frames with a ledger Identical markup in every theme. The composition changes rather than the colour: the four staggered frames are unchanged, and a full-width ruled row is added beneath them listing the same four dates with a short note for each. The drift is resolved by one flat line, so the section carries the pictures and the record together. --- ## The signature moment: the stagger **The signature is that columns two and four are dropped by a fixed offset.** Four frames of identical proportion, two of them pushed down by one spacing preset, so a row of photographs acquires direction. A flush row of four pictures is a gallery and the eye reads it as a set; a row where every second frame sits lower is a sequence, and the eye walks it left to right the way it walks a timeline. Nothing else in the section carries that meaning: there is no rail, no arrow and no number. The offset is `var:preset|spacing|70` as a top padding on the two dropped columns, so it is the buyer's own spacing scale and not a fixed length. A theme with a generous scale gets a longer drift. **At 390 the columns stack and the stagger disappears, and that is correct.** Once the frames are one above another there is no row for them to drift along; the same padding then reads as extra breathing room before the second and fourth entries, which is the right amount of separation for a list of dated pictures on a phone. The section loses its signature at phone width and does not acquire a defect in its place. ### It is not `drift-columns` The other staggered pattern in this catalogue is a gallery: six frames in three columns of two, each column lower than the one before, a monotonic descending diagonal, and no captions at all. This one is a timeline: four frames in one row, alternating rather than descending, every frame carrying a date, and the whole point of the offset is chronology rather than diagonal. It is also not `timeline-rail` or `timeline-decades`, the two existing timelines: both are type only, and neither has a photograph in it. ## How the caption is built, and why type never sits on the picture A photograph's luminance is unknowable, exactly like an accent's: the buyer chooses the image, so a date set on top of one can land white on white with nothing to warn anybody. So the caption group sits **beneath** its frame, on the section's own `base` ground, with a `currentColor` top border that butts the image. The border is what ties the caption to the picture, and because it is `currentColor` it cannot resolve to nothing and it follows whatever text colour the theme sets. Inside the caption is a scale collision, which is what carries the design when there is no colour to spend: the date is a display clamp from 1.5rem to 2.25rem with `-0.04em` tracking and a line-height of 1, set directly against a 15px uppercase title with `0.12em` tracking. Large against small, tight against wide, with nothing in between. The four images include example photographs, with `aspectRatio: 4/5` and `scale: cover`, so whatever the buyer uploads is cropped to the portrait proportion the row depends on. Frames of unequal height would read as an accident rather than as a stagger. ## 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 chains ending on a colour WordPress guarantees. Every rule is `currentColor`. - **Your spacing scale.** The section padding, the caption offsets and the stagger itself are all spacing presets. ## What it decides for itself - **Full bleed with a 1240px measure.** - **Four equal 25% columns and the 4:5 crop**, because the stagger only reads if the frames match. - **Which columns drop.** The second and the fourth, so the row alternates rather than descends. - **The reading measure of the lede**, held at 40rem in a nested constrained group rather than by padding. ## How the entries are structured Each entry is one `core/column` holding two things in this order: 1. A populated `core/image` at `aspectRatio: 4/5`, `scale: cover`, margins zeroed. 2. A `core/group` with a `currentColor` top border, holding the date paragraph and the title paragraph. A dropped entry is exactly that column with `padding-top: var:preset|spacing|70` set in the `core/column`'s own block settings. ## What to change first 1. **The four photographs.** Every image block includes an example photograph; choose Replace to select from your own media library. Portrait originals crop best. 2. **The dates and titles.** The date is plain text, so `1968`, `Spring 1968` or `1968-71` all set. Keep titles to two or three words: at tablet width a column is about 190px and a long uppercase title falls down it. 3. **The stagger.** Change `var:preset|spacing|70` on the two dropped columns to `80` for a stronger drift or `60` for a quieter one, or move the padding to columns one and three to tip the row the other way. 4. **The heading and lede.** Written to say this is four pictures out of a longer record. If you add entries, change that sentence too. 5. **The number of entries.** Six frames of 16.66% still work; keep the drop on alternate columns so the alternation survives. ## The variation **`frames-ledger`** moves the composition and nothing else. The four staggered frames are identical to the base, and a single full-width ruled row is added beneath them: the same four dates, each with a short note on the reference, under one `currentColor` hairline. The drifting row is resolved by one flat line, so the section carries the pictures and the record at once. The ledger stacks on a phone, where four dated labels side by side would ladder into ribbons. ## Notes - Core blocks only. No plugin, no script, no separator block. - The preview and copied markup use the same example photographs; see [image credits](/image-credits/). - Every colour is a fallback chain ending on a guaranteed colour, and every rule and border is `currentColor`. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.5rem, 2.6vw, 2.25rem) ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.