Cover trio: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-trio.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Free Standard # Cover trio Three photograph frames in a row, each a cover with a small caption plate in its bottom-left corner, and the middle frame raised above the other two. The type never touches the image. Includes replaceable example images. ## All patterns Search patterns Loading patterns… The signature moment ## The middle frame is raised The outer covers are 26rem tall and the middle one is 30rem, and the columns block is vertically aligned to the bottom, set on EACH core/column (verticalAlignment: "bottom", written as is-vertically-aligned-bottom), because the columns-level class is overridden by core's own align-items: normal !important and does nothing on the front end; the first draft set it on the parent only and the frames sat top-aligned, with the tall one dropping instead of rising. So the three bottoms sit flush and the centre frame rises 4rem above its neighbours: a podium, not a grid. The rise is structural, made of height and alignment rather than a margin, which is why it survives the phone. Below 782px core stacks the columns, each one becomes its own flex line, the alignment has nothing left to act on, and the three frames stack with the block gap between them and no stray offset. No margin-top was needed on any column, and none is set. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the band is base, its type contrast, the plates base with contrast type, the veil contrast at 30%), the typeface, the spacing scale (spacing|70 above and below, spacing|50 between intro and row, spacing|40 between stacked frames, spacing|30 and spacing|40 inside each plate). Decides: the proportion of the type (a 13px tracked label, a 15px to 17px line at 1.5), the 1240px measure, the clamp gutters, the 21rem plate width held by a constrained wrapper with justifyContent: left, the 26/30/26rem heights and the bottom alignment that makes the centre rise, and the cover element order. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview Three core/cover frames in a row, one per core/column, each on your own photograph with a small caption plate grown out of its bottom-left corner. An intro row above them carries a tracked label on the left and one short line on the right. Every word a visitor reads sits on a plate; the photographs carry atmosphere under a 30% veil of your theme's contrast colour. ### The signature moment: the middle frame is raised The outer covers are 26rem tall and the middle one is 30rem, and the columns block is vertically aligned to the bottom, set on EACH core/column (verticalAlignment: "bottom", written as is-vertically-aligned-bottom), because the columns-level class is overridden by core's own align-items: normal !important and does nothing on the front end; the first draft set it on the parent only and the frames sat top-aligned, with the tall one dropping instead of rising. So the three bottoms sit flush and the centre frame rises 4rem above its neighbours: a podium, not a grid. The rise is structural, made of height and alignment rather than a margin, which is why it survives the phone. Below 782px core stacks the columns, each one becomes its own flex line, the alignment has nothing left to act on, and the three frames stack with the block gap between them and no stray offset. No margin-top was needed on any column, and none is set. Make it yoursVariations and the edits to make first ### Variations - Ink captions: the plates invert, contrast ground and base type. Same corner, more weight, for photographs that are mostly light. The band, the veil and the intro row are unchanged. - In motion: ONLY the middle cover gains backgroundType: "video"; the outer two stay stills and everything else is identical to the base. The middle cover remains empty for your own clip (an empty video cover is valid at both versions); choose a short, silent, looping clip in its media picker. Core writes the