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.

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. "Orthopaedic surgeon".
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 “Goes to”. 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.

* required.