Stats band

Stats band · sample rowOpen ↗

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 as the editor builds, and publish refuses the same.

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

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

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

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 it should read: "98%", "12,000+", "L1–S1".
`items[].label` *	textarea
`items[].href`	text	Optional. Makes the whole stat a link: a site path ("/outcomes") or a full URL.
`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`.

* required.