Sweep hero

Sweep hero · sample rowDesktopTabletPhoneOpen ↗

Renders HeroSweep from @bison-lab/ui. Same fields as Hero. New pages save this slug. Existing hero rows re-key here. Its calls to action are edited as on Hero: the kit items list, label and destination on each row, two at most.

tone is the brand sweep, a flat dark band, or Plain (light), the page surface. A section background replaces that fill. The band keeps its own padding, including the clearance under a floating header. When the next band floats, overlapBelow lengthens the bottom so the neighbour can sit across the seam.

imageAspect is the lead image’s frame: landscape (3:2, the default and the frame every existing row keeps), portrait (4:5, the product-shot shape), or square (1:1). The image covers the frame rather than letterboxing in it, and the crop lands on the focal point set on the image’s Media document; an image with no focal point crops from the centre. There is no per-placement zoom or pan: to change what a crop keeps, move the focal point on the image.

align is where the copy sits when the hero has no image: Left (start, the default) or Centered (center), which centers the eyebrow, heading, body and calls to action on the measure. The editor offers it only while Image is empty, and the renderer ignores it beside an image, where the copy keeps its column. For centered prose further down a page, the Rich text block’s Align control already carries through to the page.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
heroSweep: HeroSweepBlockRenderer,

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.