Cover seam stamp

Two full-height photographs side by side at full bleed with no gap. The left sits under a heavy veil carrying the headline; the right is clean. A round stamp with a short phrase and a figure sits across the seam between them.

The stamp is a core/cover painted solid by a full veil, aspectRatio 1 at 50% radius, in a row after the two photographs, pulled up over them by a negative margin. It is centred on the page, which is the seam, and its centre sits 24rem above the foot of the pair. The clean photograph is never shorter than 24rem, so on a phone, where the pair stacks, the same margin puts the stamp exactly on the horizontal seam. The pair is a wrapping flex row whose two covers are each max(50%, min(100%, calc((52rem - 100%) * 999))) wide: half the row from 832px up, the whole row below it. On a wide screen the pair is 48rem tall, and the stamp sits half on each photograph at mid-height. Being a later cover, it paints above both; an ordinary group would slide under them.

Inherits: every colour, the typeface, the spacing scale. Decides: the 80% veil, the 48rem height, the 24rem floor of the clean photograph, the stamp's size (160px to 240px) and the display ramp.

The left photograph sits under an 80% veil of your contrast with your base as the type; below 80 that stops being guaranteed. The headline is display type, a bare clamp() from 44px to 92px, because its size is the composition. The stamp is your base under your contrast; its figure is a paragraph at display size, its phrase and footnote labels in small. Nothing sits on the clean photograph. The copy keeps clear of the stamp: its column stops short of the seam by more than the stamp's radius, and it carries extra space at its foot for the phone, where the stamp laps up into it.

The two photographs, then the stamp: three short lines, the middle one a figure of two to four characters.

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.