Timeline frames

An image-led notebook. Four dated references across the page, each one a portrait photograph with its date and title on a slab directly beneath it. Core blocks only: core/group, core/columns, core/column, core/image, core/heading, core/paragraph.

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.

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.

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.

• 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.

• 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.

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

• paragraph at clamp(1.5rem, 2.6vw, 2.25rem)

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.

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.

• Core blocks only. No plugin, no script, no separator block.
• The preview and copied markup use the same example photographs; see image credits.
• Every colour is a fallback chain ending on a guaranteed colour, and every rule and border is currentColor.

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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.