Hero aperture

An opening section set on your theme's own paper. A tracked line, a display headline, one short paragraph held to a 34rem measure, then a picture, then two buttons. The picture is a core/cover with an example photograph, and it is the only image in this catalogue that deliberately stops short of the viewport.

Every other full-width section in the library runs its photograph edge to edge. This one cuts a window in the page instead: the cover sits inside the band's 1240px measure, so there is paper to its left, to its right, above it and below it, and the margin is the thing you notice before the image is. At 1400 that is about 84px of paper on each side; at 390 it is 24px, which is deliberately small but never nothing, because a window that touches the frame is not a window. Nothing about this is decoration: it is a structural mark made only of where the picture is allowed to end.

• Ink aperture: the colour axis, by inversion. The band's ground becomes contrast and all its type base; the caption plate inverts with it, and so do the two buttons. Inversion between base and contrast is the only colour move that arrives in every theme, and it turns the aperture into a window cut in a dark page with the picture as the brightest thing in the section.
• In motion: backgroundType: "video" and nothing else. The same aperture over a clip. The cover remains empty for your own clip; core writes the <video> with autoplay muted loop playsinline, which is what iOS requires to play inline without a gesture. No type moves, so the caption is exactly as legible.

Inherits: every colour (paper is base, type is contrast, the veil and the plate are the same two slugs), the typeface, the spacing scale for the band's vertical padding. Decides: the proportion (a 13px tracked eyebrow at 0.24em, a headline from 40px to 72px at 1.02 and -0.035em, a 17px to 20px lede at 1.55 on a 34rem measure), the aperture's margin, the cover's 26rem height, and the plate.

Headings state their own colour rather than inheriting the band's, because a theme's heading element style beats an inherited group colour and that is how a headline ends up the same colour as its ground.

align: full on a core/group with a constrained inner at 1240px, so the section spans the viewport and the content does not. Horizontal padding is clamp(1.5rem, 6vw, 7rem), and that padding IS the aperture's margin: it is the only thing keeping the cover off the edge, so it never goes to zero.

The band sets blockGap: 0 and every child states its own margin, because the rhythm here is uneven on purpose: the eyebrow and the headline sit close, the lede sits under them, and then a large gap (clamp(2.5rem, 5vw, 4.5rem)) opens before the picture. That gap is the top edge of the window.

A cover clips its overflow and forms no stacking context, so anything lapping it from outside paints under the photograph, invisibly. The caption plate is therefore built inside wp-block-cover__inner-container.

Reaching the bottom-right corner without contentPosition is deliberate: .has-custom-content-position .wp-block-cover__inner-container { width: auto } shrink-wraps the inner container to its content, and a shrink-wrapped container cannot put anything at the far right of the picture. So the cover keeps the default position, and the inner container holds a vertical flex group with minHeight: 26rem (matching the cover) and verticalAlignment: bottom, whose single child is a horizontal flex row with justifyContent: right and its own padding. The plate lands at the bottom-right, inset from the picture's corner by clamp(1rem, 2vw, 1.75rem).

The rule is that type on a cover goes on an opaque plate or under a veil at 80 or more, and there is no third option. The plate is the option taken: it is an opaque base ground with contrast type, so the caption is measured as an ordinary guaranteed pair and the contrast walk finds the plate before it reaches the veil. Nothing else in the cover carries a word. The 20% contrast veil is pure decoration; it takes the edge off a bright photograph so the paper margin still reads as the lighter surface, and it may recede without loss.

The cover states style.color.text as a base chain anyway, so core's :where(.wp-block-cover:not(.has-text-color)) { color: #fff } never fires and nothing a buyer drops into the picture inherits a literal hex.

The photograph. The still-image cover includes an example photograph. Choose Replace to select your own image from the media library. The caption on the plate is second; it is set in caps with wide tracking and reads best under about 36 characters.

A full-bleed cover ships a short row of page copy under it so it reads as a section and not the whole page. This pattern needs none: the band is the paper, and it already surrounds the picture on four sides. The buttons below the cover are inside the band, and the band's bottom padding is the hand-off.

minHeight is 26rem, never vh. The preview on this page sizes its frame to the pattern, so a viewport-relative height would size the pattern to the frame in turn, and that loop only ever shrinks.

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.