public-product pattern

PublicHero

Lead a public product page with a specific user decision, boundary, and evidence-backed action.

complyeaze/core · candidate · @sanchika/patterns

Product job

Understand the product outcome and trust boundary before choosing a route.

Lead a public product page with a specific user decision, boundary, and evidence-backed action.

Anatomy and required fields

eyebrow

Product or operating-boundary context.

title

Decision-led public promise.

lede

Scope, audience, and boundary explanation.

actions

Primary and optional secondary action.

proof

Short visible evidence or operating-mode note.

boundaryStatement

Optional visible account, upload, custody, or review boundary.

Required fields

eyebrow
title
lede
actions
proof

Default and edge states

default

The outcome, support, and primary action are available.

outcome-first heading
supporting paragraph
primary action

with-proof-artifact

A bounded proof object accompanies the public claim.

proof object
source or limitation
boundary

compact-mobile

The same claim and proof are sequenced for a narrow viewport.

single heading
proof after claim
safe action

Composed synthetic exemplar

Evidence contract · synthetic proof

Make the boundary visible before the action.

A public product introduction names the job, the proof, and the limit without pretending to make the professional decision.

Inspect source Read adoption limits

State coverage

Default and consequential edges remain inspectable.

defaultThe outcome, support, and primary action are available.outcome-first heading · supporting paragraph

with proof artifactA bounded proof object accompanies the public claim.proof object · source or limitation

compact mobileThe same claim and proof are sequenced for a narrow viewport.single heading · proof after claim

Trust, source, and consumer obligations

Trust boundaries

Do not imply government affiliation, guaranteed outcomes, or unstated production readiness.
Name account, upload, local-processing, external-destination, and human-review boundaries before action.

Consumer owns

Supply current product copy, sources, destinations, prices, review ownership, and all runtime behavior.

Responsive behavior

Collapse split editorial compositions to a single reading column below the content breakpoint.
Keep proof, boundary, and action copy adjacent; never move proof after unrelated promotion content.

Forced colors and reduced motion

Retain labelled boundaries, native link underlines, focus outlines, and status text without authored color.
Keep all claims, proof, boundaries, and actions visible without entrance or layout motion.

Compact API reference

Package: @sanchika/patterns
CSS: @sanchika/patterns/styles.css
Base class: sk-pattern-public-hero
Group: public-product