# Testimonial overlap cards

> Three review cards lapped up over the foot of a wide photograph at three different heights, each card a plate with one rounded corner, a large opening quotation mark, the review and a round portrait with the reviewer's name at its foot. The laps shrink with the screen so the photograph stays visible on a phone. Example images are included and can be replaced in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/testimonial-overlap-cards.html
Section: Testimonials
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 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, group, heading, image, paragraph
Keywords: testimonials, reviews, cards, overlap, cafe, local business

## Variations (2)

### Lapped cards (the default)

Identical markup in every theme.

Two outlined cards on your base ground and one inverted in your contrast colour, each with one rounded corner, lapped over the photograph.

### Pistachio and plum

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

Pistachio ground, plum ink, ivory cards and one plum card, plum quotation marks and an underlined plum link, in Baskerville over Helvetica.


---

## The signature moment: the cards climb the photograph at three heights

**The row of cards is pulled up over the photograph by a negative margin, and
each card starts at a different depth, so their tops step across the picture
while their feet stay level.** Every card is a plate with one rounded corner,
top right, like a page corner lifting. The photograph and the card row are
children of a vertical flex group, so the lap never collapses into the section
margin and the cards always paint over the picture rather than under it.

## How it collapses

The lap is `clamp(-9rem, -9vw, -2rem)` and the steps are `clamp()` too, so on
a phone the cards overlap the photograph by 2rem and the picture stays in
view. The cards sit in a grid with an 18rem minimum column: three across on a
desktop, two and one on a tablet, one on a phone.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** The ground is your `base` and the text your `contrast`. The
  outer cards are plates (`role-plate` falling back to `base`, text
  `role-plate-text` falling back to `contrast`) with a `currentColor`
  hairline, and the middle card is inverted: `contrast` behind `base` type.
- **Buttons.** The link under the cards is a transparent, underlined core
  button in `role-link`, falling back to `contrast`.

## What it decides for itself

- **The lap, the steps and the one rounded corner.**
- **Proportion.** Section heading on `xx-large` (hierarchy), the reviews on
  `large`; the opening quotation mark is off the ladder because its size is
  the composition.

## What to change first

1. **The reviews.** Keep them close in length; the feet line up either way.
2. **The photographs.** Select the band or a portrait and choose **Replace**.
   The portraits keep their circle and the band its crop.
3. **The link.** It points at `#reviews`.

## The Pistachio and plum look

A Styled variation with its own colours and type: pistachio ground `#e4ebd3`,
plum ink `#2e1a2c`, ivory cards `#fffdf6` on a `#c9d2b4` hairline, a deep plum
middle card `#4d1f45` with blush type, plum quotation marks `#7a2f6c` and an
underlined plum link `#5c2452`. Reviews and the heading are Baskerville, names
and labels Helvetica at 400. Every text pair is measured on its painted
ground. Take the base if you want your theme's colours.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(4rem, 6vw, 5.5rem) (the quotation marks)

## Notes

- Core blocks only: group, heading, paragraph, image, buttons, button. No
  plugin, nothing to keep updated.
- Text is measured at 4.5:1 against the ground it actually sits on.

## 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.