Feature checklist

Feature checklist · sample rowDesktopTabletPhoneOpen ↗

Renders FeatureChecklistBlock from @bison-lab/ui: a pill badge, a large heading, a short divider pair around a small label, then two lists of short items, each with a check tinted primary. Each list is its own <ul>. They sit side by side from md up; below that the left list comes first. The check is decorative (aria-hidden). There is no animated background: the band takes its surface from Block Settings like every other band.

The two lists are the editor’s own, not one list split in half. Both use the kit items list (ITEMS_FIELD) as a pair, so a row’s ⋯ menu has Move to Right column (or Left column), which moves the item with its text. Each row is a single line, so either list takes a pasted list, one item per line, with bullets and numbers stripped. The left list needs one item; the right is optional. Wrap words in **double asterisks** to bold them (Weekly **check-ins**); the renderer turns each matched pair into <strong> and reads no other markup, so an unmatched ** stays as typed.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
featureChecklist: FeatureChecklistBlockRenderer,

Fields

Field	Type	Notes
badge	text	The pill above the heading. Leave empty to hide it.
title *	text
dividerLabel	text	The small label between the two rules. Leave empty to hide it. Default "Features".
leftItems *	array	The left column, and the first list on a phone. Wrap words in **double asterisks** to bold them. At least 1 row. Opens with 1 empty row; the admin field will not remove below that.
leftItems[].label *	text
rightItems	array	The right column, after the left list on a phone. Optional. Wrap words in **double asterisks** to bold them.
rightItems[].label *	text
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.