Testimonial masonry

Testimonial masonry · sample rowDesktopTabletPhoneOpen ↗

Renders TestimonialMasonry from @bison-lab/ui. An avatar is optional; initials from the author’s name stand in when it is empty. Once there are at least minItemsForFade quotes the grid clips at maxVisibleRows and the link shows under the fade. In the admin the quotes are edited with the kit items list (ITEMS_FIELD): each closed row reads as the author’s name with their avatar, or their initials while it is empty, and the opening of the quote. The last quote cannot be deleted.

Usage

payload.config.ts / collections

import { TestimonialMasonryBlock } from "@bison-lab/payload-blocks";

// In the collection's `blocks` array:
TestimonialMasonryBlock

blocks/registry.ts

import { TestimonialMasonryBlockRenderer } from "@bison-lab/payload-blocks/react";

// In the site's registry:
testimonialMasonry: TestimonialMasonryBlockRenderer,

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. Leave empty to hide the row.
title *	text
description	textarea
items *	array	At least 1 row. Opens with 1 empty row; the admin field will not remove below that.
items[].content *	textarea	Labelled “Quote”.
items[].author	group
items[].author.name *	text
items[].author.title	text	Role or organisation, e.g. "Head of design".
items[].author.avatar	upload	Optional. Initials from the name are used when empty. From the media collection.
link	group	Labelled “Link”. Shown under the fade, once there are enough quotes to clip.
link.type	radio	Labelled “Link”. One of page, external. Default "page".
link.page	relationship	Relationship to pages.
link.href	text	Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact").
link.label	text	Labelled “Label”.
link.newTab	checkbox	Labelled “Open in a new tab”. Default false.
minItemsForFade	number	How many quotes before the grid clips and the bottom fade appears. At least 1. Default 7.
maxVisibleRows	number	Rows shown before the fade. Optional. At least 1.
settings	group	Labelled “Block Settings”.
settings.background	select	Labelled “Background”. The surface this section sits on. Page is the plain page background. One of page, card, muted, color, gradient. Default "page".
settings.backgroundColor	text	Labelled “Color”.
settings.backgroundColorDark	text	Labelled “Dark mode color”.
settings.gradientTo	text	Labelled “Gradient end”.
settings.gradientToDark	text	Labelled “Dark mode gradient end”.
settings.gradientDirection	text	Labelled “Gradient direction”.
settings.spacing	select	Labelled “Spacing”. The air above and below this section. Default is the block's own padding; Compact and Spacious replace it. This is the band, not the site-wide spacing in Theme → Appearance. One of compact, default, spacious. Default "default".
settings.anchor	text	Labelled “Anchor”. In-page links can target this section. Leave blank for none.
settings.hidden	checkbox	Labelled “Hidden”. The section stays in the editor and is left off the page. Default false.

* required.