# Cover mosaic

> Five photographs as cover tiles locked into one bento grid: a large square, a tall portrait, two small tiles and a wide panorama, with an ink slab carrying the eyebrow, heading, lede and button in the sixth cell. Each photograph wears a short label on a small paper plate pinned to its corner, so no word sits on an image. The grid re-packs from four columns to three, two and one without leaving a hole. Includes replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-mosaic.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, bento, mosaic, photo grid, gallery, programme

## Variations (2)

### Ink slab (the default)

Identical markup in every theme.

The title tile is your contrast with your base as its type and an inverted button; the label plates are your base with your contrast as their type.

### Track red and bone

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

A sports-club look: bone ground and label plates under near-black ink, the title tile in track red with bone type and a square black button, all in Arial Black over Arial.


---

## The signature moment: five covers locked into one bento

A large square, a tall portrait, two small tiles and a wide panorama interlock
with the title slab so the grid closes flat on every side. Density contrast
does the work: one big picture against four smaller ones, and a dark slab of
words against the photographs. The grid is `minimumColumnWidth` only, so it
re-packs from four columns (wide screens) to three, two and one, and the tile
order was chosen by simulating each count so no width leaves a hole. On a phone
WordPress resets the spans and the tiles stack.

## Type never sits on a photograph

Every photograph runs with no veil. Its label sits on a small plate of your
`base` with `contrast` type, pinned to the bottom corner, so the words are
measured against the plate, never the image. The title slab is `contrast`
with `base` type and a `base` button on it; its heading is display type, a bare `clamp()` up to 64px, because
the slab is one tile of the composition and its size holds the tile. Text
`contrast` on `base` and the reverse both pass 4.5:1 in the stock themes.

## What it inherits, what it decides

Inherits: every colour, the typeface, the spacing scale. Decides: the spans,
the square and 2:1 shapes, the 22rem column floor, the 1760px measure, the 0.75rem joint between
tiles and the plates' padding.

## What a buyer changes first

The photographs (select a tile, choose Replace) and the five labels. Keep a
label to a few words; the plate grows with it. The square tile wants a
landscape or square picture, the tall one a portrait.

## The Styled look

`variations/track-red-and-bone.html` states its own colours and faces: a bone ground (#efe8d8) and bone label plates under near-black ink (#16130f), with the title tile in track red (#b3261a) carrying bone type and a square near-black button. Arial Black sets the uppercase headline and the button, Arial everything else. Bone on the red measures 5.36:1.

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