Duo weight

Two photograph frames in one row, at deliberately unequal weight. A tall 3:4 portrait takes 64% of the measure; a small 1:1 square takes 36% and sits on the same bottom line. Because the square is short and the portrait is tall, the square's column is left with a large empty area above it, and that area is the design. It carries one display numeral and one short line beneath it, and nothing else. A tracked label sits above the pair to place the section.

The idea is the refusal to fill the space above the small frame. Two frames of different weight, hung from a shared bottom edge, produce an empty rectangle by arithmetic; most layouts then find something to put in it. This one puts a single numeral in it, at a scale nothing else in the section approaches (clamp(3.5rem, 7vw, 6rem), weight 700, tracking -0.045em, line-height 1), and one short line under that.

The numeral is secondary to the frame relationship. It occupies the void; it is not the idea. Swap it for a year, a room number or a roman numeral and the section is unchanged, because what a visitor reads is the proportion between a tall frame and a small one and the quiet that sits over the small one.

It survives colourlessness because it is made of proportion, alignment and emptiness: 64/36, a shared bottom edge, and a scale collision between a 56px to 96px numeral and a 15px to 18px line. Nothing here is carried by a hue, so it looks the same argument in a theme whose base is cream and one whose base is white, and it reads the same in a serif face and a sans one.

The bottom alignment is set on each core/column (verticalAlignment: "bottom", rendered as is-vertically-aligned-bottom), not only on the core/columns block: the columns-level class is overridden by core's own align-items: normal !important on the front end and does nothing there. Set on the parent alone, the two frames would top-align, the void would open under the square instead of over it, and the section would read as a frame with a hole beneath it.

• Mirrored duo (duo-mirror): the spread flips. The square and its numeral move to the left column, the tall portrait takes the right, and the type in the void and the label above align right so the mirror is complete. Same two frames, same 64/36 proportion, same colours; only the composition changes, which is the one axis a variation is allowed to move. On a phone it stacks to numeral, line, square, portrait, so the mirror also reverses the order of the two frames.

Inherits: every colour (the band is a base chain, all four pieces of type a contrast chain, and there is no accent anywhere and no rule or border to carry one), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 between the label and the row, spacing|40 between the frames once stacked, spacing|30 under the numeral, spacing|50 above the square).

Decides: the 64/36 split, the 3:4 and 1:1 crops, the shared bottom edge, the 1240px measure with clamp(1.25rem, 4vw, 4rem) gutters, the clamp(1.25rem, 2.6vw, 2.5rem) gap between the frames, and the whole type ramp, which is three sizes and no more: a 14px tracked label, the display numeral, and a 15px to 18px line. The heading states its own text colour rather than inheriting the band's, because a theme's heading element style beats an inherited group colour.

Both images use "scale":"cover" with a stated aspectRatio, so whatever the buyer uploads is cropped to the proportion the composition needs rather than changing it.

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

• paragraph at clamp(3.5rem, 7vw, 6rem)

Core stacks core/columns below 782px, so the columns become two full-width rows, the bottom alignment has nothing left to act on, and the void closes. The section becomes portrait, then numeral and line, then square, in that order. That is an honest change rather than a preserved one: the empty rectangle is a consequence of two columns side by side and cannot exist in one column. What survives is the descent in scale, a tall frame, a large numeral with a small line under it, and a square half its height, which still reads as deliberate sequencing rather than three stacked blocks. Nothing shifts, overlaps or offsets on the way down, because the composition is built from column widths and alignment and not from a negative margin.

The two photographs. Both image blocks include example photographs; choose Replace to select an image from your media library. The pair wants two distinct subjects rather than two crops of one, since the whole section is a comparison of weights.

Then the numeral. Two characters is the size it was drawn for; three still work, four will wrap at 390px. Then the line under it, which should stay short enough to run to two lines at most in the 36% column, and the label above the pair, which is set in caps with wide tracking and reads best under about 25 characters.

If the void feels too large for a particular pair of photographs, the honest lever is the square's aspect ratio, not a margin: the empty area is exactly the difference between the two frames' heights.

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.