Billboard Hero
A brutalist hero with a visible grid, oversized condensed type, a skewed marquee band and a stamped CTA.
Overview
For brands that would rather be remembered than liked by everyone. The grid is drawn on the page, coordinates sit in a ruled header, and the headline is set huge in condensed black uppercase. Every letter reacts on its own when the pointer crosses it.
A safety-orange marquee band, skewed a couple of degrees, runs across the bottom and pauses on hover. The primary button is stamped: a hard offset shadow that presses flat when clicked.
Use it for studios, agencies, festivals, record labels and product drops. The type scales fluidly from 56px on phones to nearly 200px on wide screens.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/billboard-hero.jsonnpx shadcn@latest add https://sundaeui.dev/r/billboard-hero.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/billboard-hero.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/billboard-hero.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy billboard-hero.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { BillboardHero } from '@/components/sundae/billboard-hero'
<BillboardHero
headline={['Loud by', 'default.']}
marquee="Type foundry · Print studio · Open late"
intro="An independent print and type studio…"
primary={{ label: 'See the work', href: '/work' }}
secondary={{ label: 'Commission', href: '/contact' }}
/>Props
| Prop | Type | Default |
|---|---|---|
headline*Headline lines. Keep each to 1–3 words. | string[] | — |
marquee*Phrase repeated in the band. | string | — |
intro*Supporting paragraph. | string | — |
primary*Stamped primary CTA. | { label: string; href: string } | — |
secondaryOutlined secondary CTA. | { label: string; href: string } | — |
coordinatesLabels in the header rule. | [string, string, string, string] | — |
Accessibility
- The headline stays a real <h1>. The per-letter spans are inline and read as normal text.
- The marquee is aria-hidden, and its phrase is repeated once for screen readers.
- The marquee and letter motion stop under prefers-reduced-motion.
Customization
- Swap #ff3d00 for your loud colour. It is used in three places: band, hover and stamp shadow.
- Use a true condensed face, such as Druk, Anton or Oswald, for the intended rhythm.
FAQ
- Is Billboard Hero free?
- Billboard Hero is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Billboard Hero?
- Run npx shadcn@latest add https://sundaeui.dev/r/billboard-hero.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Billboard Hero support keyboard and screen readers?
- The headline stays a real <h1>. The per-letter spans are inline and read as normal text. The marquee is aria-hidden, and its phrase is repeated once for screen readers.
- Does Billboard Hero respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All sections →Margin Quote
Sections · Editorial- Pro
Ledger Pricing
Sections · Editorial - Pro
Bento Features
Sections · Understated - Pro
Newsletter CTA
Sections · Refined - Pro
Product Footer
Sections · Understated - Pro
Changelog Timeline
Sections · Editorial