# Hero corner notes

> An image-led architecture opening with a compact headline plate in the upper-left corner and a project invitation in the lower-right. A broad diagonal window keeps the photograph visible between them. Includes a replaceable architectural photograph, an inherited Core version and a Porcelain and cobalt Styled look.

Canonical: https://patternpaste.com/pattern/hero-corner-notes.html
Section: Hero
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: button, buttons, cover, group, heading, paragraph, spacer
Keywords: hero, cover, photo, architecture, corners, notes

## Variations (2)

### Use my theme (the default)

Identical markup in every theme.

Your theme paints the upper note and inverts the smaller invitation. Opposite corners and a clear photographic interval survive on smaller screens.

### Porcelain and cobalt

This variation states its own colours and states its own type: identical in every theme.

Porcelain ground, navy ink and a cobalt invitation plate, with Arial throughout. A square porcelain button reverses out of the cobalt note.


---

## The signature moment: opposite corner notes leave a diagonal window through the photograph

The buyer gets a first-screen opening for an architecture practice: its name and statement in a pale upper note, a short project invitation in the opposite lower corner, and a photograph with room to be seen. Alder Lane is fictional; the example photograph is an architectural reference, not a claim of completed client work.

The Cover keeps its default content position. A native vertical flex stack contains two wrapping rows, one left-aligned and one right-aligned, with a six-rem photographic interval between them. The stack has a 36rem minimum height inside the Cover padding. At phone width the plates fit the available width and retain that interval. Both plates remain inside the Cover, so no clipped overlap is involved.

## What it inherits, what it decides

The Core version inherits the theme's colours and faces. Opaque plates use base and contrast fallback chains; the photograph has no veil and no text sits directly on it. The root and plates let headings and links follow their painter. Ordinary Core buttons inherit the theme's fill and radius, with explicit padding for a usable target.

The headline is display type, sized outside the theme ladder because the compact two-line note is the composition. The practice label stays at 14px; the invitation uses the medium type ladder.

Body copy meets 4.5:1 contrast and large display type 3:1 on its painted plate. The Cover uses rem dimensions, editable native groups and spacers, and no CSS or script.

## Styled look

**Porcelain and cobalt**: Porcelain ground, navy ink and a cobalt invitation plate, with Arial throughout. A square porcelain button reverses out of the cobalt note. Its matching inherited Core version remains available as Use my theme.

## What a buyer changes first

Replace the brand name, short heading, supporting line and action. Then replace the Cover photograph and adjust its focal point. Keep the copy compact so the photograph retains its breathing space.

## Included images

The copied markup includes a WordPress Photo Directory example photograph. The public URL keeps it visible after pasting. Select the Cover and choose **Replace** to use a Media Library image. See [image credits](/image-credits/) for the source and license. Pasting a URL does not create a Media Library attachment.