Patterns
Marketing Hero
The full-bleed landing hero — radial wash, pill badge, two-tone headline, actions, fact chips and a scroll chevron.
The full-bleed landing hero: a soft radial wash, a pill badge, a large two-tone headline, subcopy, the actions, a row of reassurance chips, and a bouncing scroll-down chevron.
Extracted from Yunxin, where the landing page and the Fellows page each hand-rolled the identical block. Everything is a slot — YunUI owns the geometry, the wash and the entrance stagger; you own every word.
Import
tsx
1import { MarketingHero, HeroAccent } from "@yuhuanowo/yunui/patterns";Basic
Wrap the tail of the headline in HeroAccent so it washes into the muted tone. fullHeight={false} is used here to keep the preview short.
Hero
Fellows programme
Build with us. On us.
Six weeks of credits, review and a room full of people shipping the same week you are.
Free to apply6 weeksOpen source
Anatomy
badge— anything; anEyebrowis the house choice.title— wrap part of it inHeroAccentfor the two-tone fade.facts— short reassurance chips under the actions.scrollToId— renders the bouncing chevron, linking to that anchor. Omit to hide it.fullHeight—min-h-dvhby default; turn it off for a shorter banner.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | ReactNode | — | Primary/secondary buttons. |
| badge | ReactNode | — | Pill badge above the title — pass an {@link Eyebrow } or any node. |
| facts | ReactNode[] | — | Short reassurance chips under the actions ("Free to apply", "6 weeks"). |
| fullHeight | boolean | true | Fill the viewport (`min-h-dvh`). |
| scrollLabel | string | Scroll down | Accessible label for the scroll-down chevron. |
| scrollToId | string | — | Anchor the scroll-down chevron links to. Omit to hide the chevron. |
| subtitle | ReactNode | — | Supporting paragraph. |
| title* | ReactNode | — | Headline. Wrap the part that should fade with {@link HeroAccent}. |