Showcase panels

Showcase panels · sample rowDesktopTabletPhoneOpen ↗

Renders ShowcasePanelsBlock from @bison-lab/ui. The layout is designed around three to six panels: fewer and the accordion reads as a mistake, more and each collapsed spine is unreadable. The block opens with three empty panels. In the admin the panels are edited with the kit items list (ITEMS_FIELD): each closed row reads as its title with its image beside it, and its numeral when one is set. One row opens at a time, the ⋯ menu reorders and deletes, Delete is withheld at three panels, and Add at six. An open panel’s read-more link is the published-page picker.

A panel without a resolved image is dropped rather than rendered empty. defaultActiveIndex is clamped to the panels that survived.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
showcasePanels: ShowcasePanelsBlockRenderer,

Fields

Field	Type	Notes
items *	array	3 to 6 rows. Opens with 3 empty rows; the admin field will not remove below that.
items[].title *	text
items[].summary *	textarea	Revealed when the panel expands.
items[].image *	upload	From the media collection.
items[].type	radio	Labelled “Link”. One of page, external. Default "page".
items[].page	relationship	Relationship to pages.
items[].href	text	Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact").
items[].newTab	checkbox	Labelled “Open in a new tab”. Default false.
items[].numeral	text	Overrides the spine numeral ("01", "II"). Leave empty to number automatically.
spineVariant	select	One of numbered, volume, minimal. Default "numbered".
watermark	text	Faint mark behind the panels, e.g. a brand word.
defaultActiveIndex	number	Which panel is open on load, counting from 0. At least 0. Default 0.
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.