Hero

Hero · sample rowDesktopTabletPhoneOpen ↗

Unlike every other block here, the hero has no @bison-lab/ui counterpart. A hero is where a site’s brand is loudest, so the shipped renderer is deliberately plain markup: the site swaps in its own by overriding this one registry entry. The fields are the shared part, and that is what makes a page portable between sites.

tone describes how the band is painted. Sites map the three values to their own surfaces; light means the page surface, which in the dark theme is dark.

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 it in its own blocks field with maxRows: 1 so a page has at most one, and spread it 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. Sites map these to their own surfaces. One of sweep, dark, light. Default "sweep".
image	upload	Optional background or lead image. From the media collection.
links	array	Up to 2 rows.
links[].type	radio	Labelled “Goes to”. 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.

* required.