# Social scatter

> A copy column with a label, a large heading, a paragraph and one button beside four photographs in two columns, each column one tall frame and one short one, the second column dropped lower so the cluster reads pinned to a wall rather than laid on a grid. The frames take the larger share of the row. For a social feed, a studio diary or a follow call. Includes replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/social-scatter.html
Section: Gallery
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 7.0. 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, column, columns, group, heading, image, paragraph
Keywords: gallery, instagram, social, photos, feed, follow

## Variations (2)

### Copy left (the default)

Identical markup in every theme.

The words on the left, the four frames on the right with their right-hand column dropped. On a phone the copy comes first and the frames stay two across.

### Frames left

Identical markup in every theme.

The cluster on the left with its left-hand column dropped, the copy on the right. On a phone the photographs lead and the copy follows.


---

## The signature moment: the frames are pinned, not gridded

Each column holds one tall frame and one short one, in opposite order (2:3
over 5:4, then 4:3 over 3:5), and the second column starts lower than the
first, by a padding that grows from 4rem to 10rem with the screen. Nothing
lines up across the pair, top or bottom, so the cluster reads as photographs
pinned to a wall rather than a feed laid on a grid. The drop is spacing on a
core group, not CSS, so it survives the editor and any theme.

## What it inherits, what it decides

Inherits: every colour (ground `base`, text `contrast`, the button from your
theme's button style), the typeface, the spacing scale. Decides: the 5:7 split,
the frame shapes, the column drop, the gaps, the 32rem copy measure and the
1240px band.

The heading is on the theme's ladder, one rung above an ordinary section h2
(`xx-large`): it has to hold its own beside a cluster of four photographs, and
at `x-large` the frames swallowed it. Body copy is `medium`; the label states
its own size with a 15px floor. All text is `contrast` on `base`, held to 4.5:1.

## How it holds at every width

The row is a core columns block at 41.66% and 58.34%, vertically centred. It
stays side by side down to a tablet and stacks below 782px, copy first. The
cluster itself is a two-column grid at every width, so on a phone the frames
stay two across and the drop still shows.

## What a buyer changes first

The photographs: select each image and choose Replace. Then the heading and
the button's link, which ships empty.

## Variations

- **Frames left**: the cluster on the left with its left column dropped, the
  copy on the right. Stacked, the photographs come first.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The
public image URLs keep the examples visible after pasting. Select an image 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.