Compact hero

Compact hero · sample rowDesktopTabletPhoneOpen ↗

Renders HeroCompact from @bison-lab/ui. The picture is the surface and the copy sits on the dark wash. The lead image is required. A draft with no image yet still renders the dark band. Its calls to action are edited as on Hero: the kit items list, each row the button’s label and where it goes, two at most.

The eyebrow tint is not a field in this package. A site that has one — Spinal Simplicity’s Anatomy field, which stays in the site — passes it to heroCompactBlock({ extraFields }) and paints it with look or eyebrowClassName on HeroCompact. The shipped renderer leaves the eyebrow on the foreground token. Wiring that field on the site is SPI-51.

Usage

payload.config.ts / collections

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

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

blocks/registry.ts

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

// In the site's registry:
heroCompact: HeroCompactBlockRenderer,

HeroCompactBlock is heroCompactBlock() with no extra fields. A site with its own eyebrow source uses the factory and withSectionSettings is already applied.

Fields

Field	Type	Notes
eyebrow	text	Small label above the heading. Optional.
heading *	text
body	textarea
image *	upload	Lead image. The band paints the copy over it. From the media collection.
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.