[Library] Gallery

Catalogue accessStandard

Gallery ledger

A gallery set as an index rather than a grid: four ruled rows, each with a small numeral in the left margin, one panoramic 21:9 frame in the middle and a title with a tracked meta line on the right. Ships all four image blocks empty; you choose the photographs and they are cropped to the band. States no colour and no font of its own.

Variation View
Before you copy Corners As authored

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A gallery set as an index rather than a grid. Four ruled rows run down a full-width band: a small numeral in the left margin, one panoramic 21/9 frame in the middle, and on the right a title with a tracked place-and-year line under it. Above them an intro row carries a tracked label on the left and one short line on the right. All four core/image blocks ship EMPTY; the buyer points them at their own media library and scale: cover crops whatever they upload to the band.

The signature moment

The gallery reads as a ledger

Four rows, each ruled off from the one above by a 1px currentColor hairline, with an index numeral in the left margin and a meta line on the right. The section is scanned like an index of works rather than browsed like a grid: the photographs are entries in a list, not tiles on a wall, and the eye runs down the numerals and the rules instead of across a mosaic.

It survives colourlessness because the whole device is hairlines, numerals and alignment. There is no wash, no tint and no accent anywhere in it: the rules are currentColor, so they are whatever the theme paints text, and the numerals are the same colour as everything else, distinguished by size and tracking rather than by hue. Take every colour away and the ledger is still a ledger.

It survives 390px because a ledger is defined by its rules, not by its columns. Core stacks core/columns below 782px, so each entry becomes numeral, then frame, then title and meta, in one ruled block. The hairline sits on the row GROUP rather than between the columns, so it does not stack with them: on a phone each entry is still fenced top and bottom, still numbered, still read in order. What is lost is the left margin, and what is kept is the index.

The hairlines are per-side group borders, not core/separator blocks. Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub, and a group border is the shape that cannot be narrowed. The last row carries a bottom border as well as a top one, so the index closes rather than trailing off.

What it inherits, what it decides

Inherits: every colour (the band is a base chain, all type a contrast chain, every rule currentColor), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 under the intro row, spacing|40 inside each row, spacing|30 between stacked columns and spacing|20 between a title and its meta line).

Decides: the ledger itself. The 1240px measure and the clamp gutters; the 8 / 60 / 32 column split, which gives the frame roughly 700px at 1400 so a 21:9 band is a band and not a strip; the row rhythm, which comes from padding on the row group rather than from block gap, so the hairlines sit tight against the rows they fence; the type proportion, a 13px numeral and a 13px meta line in wide caps against a clamp(1.125rem, 1.6vw, 1.5rem) title at 1.15 with a touch of negative tracking. The title states its own clamp because it is read; the numeral and the meta line are genuinely incidental labels, both well under 30 characters, which is the only place a flat 13px belongs.

What a buyer changes first139 words

The photographs. All four image blocks ship EMPTY, which is valid at WordPress 6.6 and 7.0: click each frame, choose an image from the media library, and the 21/9 aspect ratio with scale: cover crops it. Panoramic subjects suit it; a portrait crops hard and that is the point of the proportion being set for them.

Then the entries. The numerals are plain text, so an index of six is two more rows copied and renumbered, and an index of three is one row deleted; nothing else needs touching, because the rules and the rhythm belong to the rows. Keep each title short enough to hold one or two lines in a 32% column, and keep the meta line to a place and a year, or anything else under about 20 characters, so the tracking still reads as tracking.

Variations94 words
  • Ink ledger: the band inverts. A contrast chain becomes the ground and a base chain becomes every word in it, including each heading's own explicit text colour, because a theme's heading element style beats an inherited group colour and would otherwise paint the titles the same colour as the plate. The hairlines are currentColor in both files and need no change at all: they follow the type from dark-on-light to light-on-dark by themselves, which is the argument for currentColor in one line. Rows, widths, frames and everything else are identical to the base.
Measured24 words

The base and the variation both take every colour and typeface from the theme. Both were checked in the editor, rendered and looked at.

Back to the library