Testimonial carousel

Testimonial carousel · sample rowDesktopTabletPhoneOpen ↗

Renders TestimonialCarousel from @bison-lab/ui with variant="portrait". The header is a left-aligned heading, a short paragraph and an optional outline button with an arrow, a picked link. Each card is a tall portrait on a muted fill with the quote in large type and the author line under it: the name, then the role with the company after it in muted text. The track always loops. The round previous and next buttons sit in a row under the track, and each has an accessible name. A slide is nearly full width on a phone and a quarter of the track at the widest breakpoint. A polite live region says which testimonial is showing after the track moves.

Each portrait goes through the site’s imageComponent, cropped toward the focal point set on its Media document; set the focal point on the face. The portrait is decorative, since the author is named in the caption.

In the admin the testimonials are edited with the kit items list (ITEMS_FIELD) in its portrait grid, in carousel order. Each tile is the portrait, or the author’s initials while it is empty, and opens the quote and author fields below the grid. The last testimonial cannot be deleted.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
testimonialCarousel: TestimonialCarouselBlockRenderer,

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. Leave empty to hide the row.
title *	text
description	textarea
link	group	Labelled “Link”. An outline button under the heading, e.g. to every story. Optional.
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.
items *	array	At least 1 row. Opens with 1 empty row; the admin field will not remove below that.
items[].content *	textarea	Labelled “Quote”. Short reads best: the quote is set in large type.
items[].author	group
items[].author.name *	text
items[].author.title	text	Labelled “Role”. e.g. "Head of design".
items[].author.company	text	Shown after the role, in muted text. Optional.
items[].author.portrait	upload	A tall photo, cropped toward the focal point set on the image. Set the focal point on the face. From the media collection.
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.