Stats band

Stats band · sample rowDesktopTabletPhoneOpen ↗

Renders StatsBand from @bison-lab/ui. The count, the order and the desktop column count are the editor’s. Phones show two per row and tablets three, whatever columns says; with an odd number of stats, wide names the one that takes a phone row to itself, and only a stat that starts a row (the 1st, 3rd or 5th) can. The array’s own validate says so on the field when the editor saves, and publish refuses the same. In the admin the stats are edited with the kit items list (ITEMS_FIELD): each closed row reads as its figure and label, one opens at a time, and the ⋯ menu reorders and deletes.

Overlap. With overlap on, the band floats across the join with the block above and the block below as a card. An overlapping band is headless: the heading fields leave the admin the moment the switch is on, and the renderer ignores them if they were filled in first. See the seam for what the neighbours do.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
statsBand: StatsBandBlockRenderer,

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. The heading and eyebrow are optional; without them the band stands alone.
title	text
description	textarea
items *	array	2 to 6 rows. Opens with 2 empty rows; the admin field will not remove below that.
items[].value *	text	The figure as visitors see it, such as "98%" or "10,000+".
items[].label *	textarea
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[].wide	checkbox	Labelled “Full width on phones”. Phones show two per row. With an odd number of stats, this one takes a row to itself. Only the 1st, 3rd or 5th stat can. Default false.
columns	select	From large screens up, and never more than there are stats. Phones show two per row and tablets three. One of 2, 3, 4, 5, 6. Default "4".
tone	select	One of card, plain. Default "card".
align	select	One of start, center. Default "start".
overlap	checkbox	Labelled “Float over the seam with the block above”. The band sits across the join between the block above and the block below. Both make room for it automatically. A floating band is headless: the heading fields above are hidden while this is on. Default false.
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. Ignored while Overlap is on: a floating band has no padding to replace. 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.