Hero

Hero · sample rowDesktopTabletPhoneOpen ↗

Renders HeroSweep from @bison-lab/ui. This slug is the sweep hero for one release, so rows saved as hero still paint. Re-key those rows to heroSweep. The next release drops hero.

tone is how the band is painted: the brand sweep, a flat dark band, or Plain (light), which is the page surface. A section background replaces that fill. overlapBelow — set when the next band floats — adds the bottom clearance the sweep keeps for that seam.

The fields are the shared hero fields plus tone, an optional lead image, and imageAspect, the image’s frame (landscape by default, portrait, or square). The image covers the frame, cropped toward the focal point set on its Media document. Sweep hero is the same block under its own slug. Compact hero is the image-led one.

Calls to action. links holds up to two buttons, shared by every hero. In the admin they are edited with the kit items list (ITEMS_FIELD): each closed row reads as the button’s label and where it goes, the picked page’s title or the URL of an external link. An open row is the label and the published-page picker. Add is withheld at two, so a third cannot be added.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
hero: HeroBlockRenderer,

Put the heroes a site uses in the pages hero blocks field with maxRows: 1, and spread that field ahead of layout when calling RenderBlocks.

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. Optional.
heading *	text
body	textarea
tone	select	How the band is painted. Plain is the page surface. One of sweep, dark, light. Default "sweep".
image	upload	Optional lead image. From the large breakpoint it sits beside the copy. Set its focal point on the image to choose what the crop keeps. From the media collection.
imageAspect	select	The lead image's shape. The image fills it, cropped toward the focal point set on the image. One of landscape, portrait, square. Default "landscape".
align	select	Where the copy sits when the hero has no image. One of start, center. Default "start".
links	array	Up to 2 rows.
links[].type	radio	Labelled “Link”. One of page, external. Default "page".
links[].page *	relationship	Relationship to pages.
links[].href *	text	Labelled “URL”. A full URL ("https://example.com"), "mailto:" or "tel:", or a site path ("/contact").
links[].label *	text	Labelled “Label”.
links[].newTab	checkbox	Labelled “Open in a new tab”. 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. 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.