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 and the admin field will not remove below that.

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[].href	text	Optional "read more" destination for this panel.
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.

* required.