# Cover portholes

> A tall full-bleed photograph with three large circular photographs of decreasing size centred on its lower edge, half on the picture and half on your theme's paper, each captioned below. Under them on the paper, a display heading beside a short lede and a text link. Includes four replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-portholes.html
Section: Cover
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
Keywords: cover, photo, circles, portholes, overlap, collection

## Variations (2)

### Three portholes (the default)

Identical markup in every theme.

The large photograph carries no type; the circles lap its edge onto your base, and every word sits on that paper in your contrast.

### Smoke and brass

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

A lighting-maker look: smoke-grey ground under near-black ink, brass labels and a brass pill button in ink; Avenir Next throughout.


---

## The signature moment: portholes lap the frame

Each circle is a `core/cover` with `aspectRatio: 1` and a 50% radius, pulled
up by exactly half its own width, so all three centres sit on the photograph's
lower edge whatever their size: the largest reaches furthest into the picture
and the smallest barely breaks it. Widths and laps are the same `vw` ratio,
so the centres stay on the edge from 390 to 1920.

## Why the paper band is inside the cover

A cover clips its overflow and its photograph is a positioned layer, so a
sibling lapped up after it paints under the picture. The paper band is a group
INSIDE the cover's inner container, and its top margin is what gives the
photograph its height. The circles are flex items in a flex row, so their
negative margins never collapse into the band.

## Type never sits on a photograph

The large photograph and the circles carry no veil and no text. The heading
(a bare `clamp()` display, 44px to 88px: its size is the composition), the
lede (`medium` at 1.6) and the captions (14px to 16px, under 30 characters)
sit on the paper in your contrast.

## What it inherits, what it decides

Inherits every colour, the typeface and the spacing scale. Decides the three
circle sizes (34rem, 23rem and 14.5rem at their widest), the photograph height
(half the viewport width, 24rem to 60rem) and its focal point on the lamps,
and a 1440px measure; below about 1000px the lede drops under the heading.

## What a buyer changes first

The four photographs: select a cover and choose Replace. The circles crop to
the middle of whatever you choose, so pick photographs with a centred subject.

## The Styled look

`variations/smoke-and-brass.html` states its own colours and face: a smoke-grey paper (#d8d6d1) under near-black ink (#17171a), deep brass (#6b4e17) for the circle labels and a brass (#c9a24a) pill button with ink type. Avenir Next (Avenir, Futura) sets everything.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The
public image URLs keep the examples visible after pasting. Select a cover and
choose **Replace** to use your own Media Library files. See
[image credits](/image-credits/) for the sources and licenses.