A light, magazine-style hero on warm paper: a large serif headline with an italic word that gets a hand-drawn underline, a floating collage of paper cards and a slow marquee of press names.
Margin for teams
Margin turns scattered notes, specs and decisions into one calm, searchable library. Drafts stay private until they are ready, and every page knows who owns it.
npx shadcn@latest add https://hyperblur.dev/r/hero-editorial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-editorial.tsx.
import { HeroEditorial } from "@/components/hyperblur/hero-editorial"
<HeroEditorial title="Plan trips your friends will actually join" highlight="actually" primaryCta={{ label: "Plan a trip", href: "/new" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Margin for teams" | Small uppercase line above the headline. Empty string hides it. |
| title | string | "Write the docs your team will actually read" | Headline, set in the serif font. |
| highlight | string | "actually" | Word or phrase inside title shown in italics with the animated hand-drawn underline. |
| subtitle | string | sample text | Supporting paragraph under the headline. |
| primaryCta | { label: string; href: string } | null | { label: "Start writing free", href: "#" } | Solid pill button. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "See how teams use it", href: "#" } | Underlined text link with an arrow. Pass null to hide it. |
| pressLabel | string | "Read about in" | Label before the press marquee. Empty string hides it. |
| press | string[] | 8 publication names | Names that scroll in the marquee. Empty array hides the row. |
| accent | string | "#e4572e" | Underline, highlight bars and sparkline color. |
| ink | string | "#173a2f" | Text, button and sticky note color. |
| paper | string | "#f7f5ef" | Background color of the section. |