# Quote wall

> Eight short testimonials at reading size in three columns of unequal width, three, two and three, each quote hanging under a currentColor hairline with a small portrait and its name tracked beneath it, eight distinct faces. The rules line up once across the top of the wall and never again, so the section reads as a mass of voices rather than as a row of cards. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/quote-wall.html
Section: Testimonials
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: column, columns, group, image, paragraph
Keywords: testimonials, quotes, reviews, social proof, wall, many, dense

## Variations (2)

### Uneven columns (the default)

Identical markup in every theme.

Three columns of different widths carrying different numbers of quotes, the longest two in the widest column. The hairlines agree on the first line and diverge after it.

### Offset wall

Identical markup in every theme.

The same eight voices in two columns of four, the second dropped by most of an entry, so no rule ever meets a rule across the seam and the wall is laid like brickwork. Same quotes, same ground, same type.


---

## The signature moment: density, and rules that agree only once

**Eight voices in the space the rest of the section gives to one, and the
hairlines line up across the wall exactly once.** Every quote hangs under its own
`currentColor` rule. The three columns start level, so the top of the section is
one broken line running the full 1240. After that the columns hold three, two and
three quotes of deliberately different lengths, so no rule below the first ever
meets another, and the wall reads as a mass rather than as a grid of cards.

The unevenness is structural, not decorative. The widest column, 38, carries the
two longest quotes; the narrowest, 28, carries the three shortest; the middle
count is the odd one. That is what stops the section resolving into a tidy
three-up, which the catalogue already has in `testimonial-trio`.

Against the rest of the section: `testimonial-band` gives one quote a full-bleed
inverted band, `testimonial-trio` gives three quotes three bordered cards, and
`testimonial-portrait` builds half its composition out of one large frame. All
three are low-density by design. This is the only one that is a crowd, and the
quotes are short at reading size for that reason: eight display quotes would be
a poster and eight cards would be a directory. Every section here carries the
faces of the people quoted; only this one carries enough of them to read as a
room.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere. The quotes take your body
  face and the tracked names take the same one, which is why the caps lines read
  as small caps in a serif theme and as spec labels in a sans one.
- **Your colours.** The ground asks for `base` and the type for `contrast`, the
  two slugs every stock block theme defines, each behind a fallback chain ending
  on a colour WordPress itself guarantees.
- **Every rule.** The hairlines are `currentColor`, so they are the type colour
  by definition. They cannot blank, they cannot clash, and they invert with the
  section if you invert it.
- **The vertical rhythm inside a column.** The gap between one entry and the next
  is your theme's block gap, so a theme with a generous scale gets a looser wall
  and a tight one gets a denser one. Only the section's outer padding and the
  gap under each rule are stated here.

## What it decides for itself

- **Reading size, and a floor.** Quotes are `clamp(1rem, 1.15vw, 1.125rem)` and
  names `clamp(0.9375rem, 1vw, 1rem)`, so nothing a visitor actually reads falls
  below 15px. Core's `small` preset is 13px in a theme with no size scale, which
  is why this pattern states its own sizes instead.
- **The three widths and the three counts.** 34 with three quotes, 38 with two,
  28 with three. Change them and the wall becomes a grid.
- **The quote lengths.** Between six and twenty-six words, assigned to columns by
  length. This is copy doing structural work: the ragged column feet are the
  quote lengths, not a setting.
- **A face for every voice.** Each name sits under a 4.5rem square portrait,
  eight distinct people across the wall and the same eight in the same pairings
  in the variation. The face is above the name rather than beside it because
  the narrowest column is 28% of the band, and a chip in the same row laddered
  the names into a ribbon at 820px. At this size the faces read as a crowd
  rather than as eight photographs, which is what a wall of voices is for. None
  of them states a colour.
- **Full bleed with its own measure.** The section spans the viewport and holds
  its content to 1240px, and it states its own ground and padding so it can sit
  between any two neighbours.

## What a buyer changes first

1. **The eight quotes.** Keep them short and keep them unequal. One long
   testimonial in the narrow column will pull that column past the others and
   the wall will start to look like a mistake rather than a mass.
2. **The names and the faces.** One line each, "Name, Company", tracked and set
   in caps, with a portrait beside it. A name that wraps is not a defect here,
   unlike in `testimonial-trio`, because nothing in this section is level below
   the first rule. Every frame is a square head-and-shoulders chip, so a
   waist-up photograph squared from the middle loses the crown of the head; keep
   the eight faces distinct or the wall reads as one person repeated.
3. **The count.** Delete a quote or duplicate one, and take its face with it. Six is the fewest that still
   reads as a wall; ten is comfortable at 1240 if you shorten the copy.
4. **The eyebrow.** "Eight of them, unedited" is a paragraph rather than a
   heading, so it stays out of your page outline. If you change the number of
   quotes, change this line with it, because it is the one place in the section
   that states a count.
5. **The rules.** They are a 1px `currentColor` top border on each entry, stated
   as a literal length because there are no border presets at this catalogue's
   WordPress floor. Remove them and the section is a wall of text; that is a
   legitimate design and it is not this one.

## The variation

- **Offset wall** (`variations/offset-wall.html`) is the structural axis. The
  same eight voices are laid in two columns of four, 46 and 54, and the second
  column is dropped by `clamp(2.5rem, 5vw, 5.5rem)`, most of an entry. So the one
  line the base's rules agree on is broken as well, and the wall is laid like
  brickwork. The copy, the ground, the type and the sizes are the base's.

## Notes

- Core blocks only: group, columns, column, paragraph, image. No plugin, no
  script, no stylesheet, nothing to keep updated.
- The quotes are paragraphs rather than `core/quote` blocks, for the reason
  `testimonial-trio` gives: a blockquote arrives with the theme's own decoration,
  usually a rule or an indent, and a second rule under a hairline fights it.
- Every pair in the section is `base` against `contrast`. Nothing is display
  size, so every pair is judged at the full 4.5:1 rather than the large-text
  floor.
- At 390 the columns stack and the wall becomes eight ruled entries down the
  page. It stays dense, which is the point; the offset in the variation collapses
  to a single extra gap at the seam.
