Feature highlights

Feature highlights · sample rowDesktopTabletPhoneOpen ↗

Renders FeatureHighlightsBlock from @bison-lab/ui. Each card has a title, a subtitle, a stat (a figure and the words under it) and an image that covers the top of the card, cropped toward its focal point. From the large breakpoint the heading, the progress rail and the quote hold still in a sticky column while the cards scroll past.

The rail is a progressbar whose value is the card crossing the middle of the viewport (or the last card, once it is wholly in view), watched with IntersectionObserver; there is no animation library. Its fill moves only under motion-safe, so with reduced motion on it jumps to place. The quote under the rail shows once it has both a quote and a name.

In the admin the cards are edited with the kit items list (ITEMS_FIELD): each closed row reads as the card title, its image and its stat. The last card cannot be deleted. The layout is designed for three to five cards.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
featureHighlights: FeatureHighlightsBlockRenderer,

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. Leave empty to hide the row.
title *	text
description	textarea
items *	array	The cards, in reading order. The layout is designed for three to five. At least 1 row. Opens with 1 empty row; the admin field will not remove below that.
items[].title *	text
items[].subtitle	textarea
items[].statValue	text	Labelled “Stat”. The figure the card leads with, as it should read: "3×", "98%".
items[].statLabel	text	Labelled “Stat label”. The words under the figure, e.g. "faster sign-off".
items[].image	upload	Optional. Fills the top of the card, cropped toward the focal point set on the image. From the media collection.
testimonial	group	Optional. Shown under the progress rail once it has a quote and a name.
testimonial.quote	textarea
testimonial.name	text
testimonial.title	text	Role or organisation, e.g. "Head of design".
testimonial.avatar	upload	Optional. Initials from the name are used when empty. From the media collection.
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.