Hero aperture: WordPress Block Pattern, Pattern Paste

Canonical: https://patternpaste.com/pattern/hero-aperture.html

Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/)

Catalogue access Standard

# Hero aperture

An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side.

The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version.

## All patterns

Search patterns

Loading patterns…

The signature moment

## The picture does not bleed

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.

Theme handoff

## What comes from where

### Theme and pattern

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.

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

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.

### The signature moment: the picture does not bleed

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.

Make it yoursVariations and the edits to make first

### Variations

- 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.

Theme behaviourInheritance, fixed decisions and contrast

### What it inherits, what it decides

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.

Technical notesBlock mechanics, responsive behaviour and constraints

### How it is built

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.

### The plate lives INSIDE the cover

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).

### Why dimRatio: 20 is legitimate here

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.

### What a buyer changes first

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.

### No hand-off row, on purpose

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.

### Why the height is in rem

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.

### Included images

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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

Questions

## Hero aperture: common questions

Does Hero aperture need a plugin?

No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Hero aperture match my theme?

Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted.

How many variations does Hero aperture have?

3: Paper aperture, In motion and Ink aperture. Each is its own markup; choose one in the toolbar above the preview before you copy.

Can I use my own images?

Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.

Is Hero aperture free?

It is included with a subscription, with every Core Pattern and variation. 64 Core Patterns are free to copy without one.

7.6KB of core-block markup, 6 blocks (button, buttons, cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns (https://patternpaste.com/patterns/)

Catalogue access

### £49 a year

All patterns, variations and theme downloads.

What you copy is yours forever. Not for you? We refund within 14 days.

Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/)

Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country.

#### Pair with

Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html)

#### Before you paste

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/)

Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/).

## Specifications

Section

Hero

Access

Subscription

Plugin

None, core blocks only

Variations

3

Colour

From your theme

Type

From your theme

Motion

None

Blocks

button, buttons, cover, group, heading, paragraph

Presets

color 8, spacing 1, font-size 2

WordPress

7.0+

Continue exploring

## Next in Hero

Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/)

Shot in Twenty Twenty-Five Hero No plugin needed

### Split hero

An asymmetric hero with a headline, supporting copy and actions in one top-aligned column, beside a compact four-row facts panel.

Hero Preview pattern (https://patternpaste.com/pattern/split-hero.html)

Shot in Twenty Twenty-Five Hero No plugin needed

### Hero arch

A shop or studio hero with the photograph cut into an arch, rounded across the top and square at the foot, beside a display headline, a short lead and two actions.

Hero Preview pattern (https://patternpaste.com/pattern/hero-arch.html)

Shot in Twenty Twenty-Five Hero No plugin needed

### Hero column portrait

An opening section whose photograph stands as a column rather than a band: a tracked eyebrow, a display headline, a lede held to a 30rem measure and two actions on the left, and on the right a single portrait cover taller than everything beside it, carrying nothing but one tracked caption on an opaque plate at its foot.

Hero Preview pattern (https://patternpaste.com/pattern/hero-column-portrait.html)