Simple hero

Simple hero · sample rowDesktopTabletPhoneOpen ↗

Renders HeroSimple from @bison-lab/ui. One centered column on the page surface: an optional eyebrow, the heading as the page’s <h1> (larger at wider breakpoints), a muted body with a capped measure, and one outline button. There is no image and no motion. A Block Settings background replaces the page surface.

It is built on the same heroFields() as the other heroes, so the copy has the same names to an editor; the calls to action are capped at one. The button is a picked link: a published page or, for an external destination, a URL. A link to a page that is not published renders its label as text. In the Block library it is a hero: Anchor only, and Hidden is refused.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
heroSimple: HeroSimpleBlockRenderer,

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. Optional.
heading *	text
body	textarea
links	array	Up to 1 row.
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.