Editorial panel

Editorial hero with pixel icons on key headline words.

Usage

import { HeroTerracotta } from '@/components/blocks/hero-section-07'


<HeroTerracotta />


// Strings render as plain text; objects become accented words with a pixel icon.
<HeroTerracotta
  brand="Broadsheet"
  navLinks={[{ label: 'Stories', href: '/stories' }, { label: 'Subscribe', href: '/subscribe' }]}
  headline={[
    'Stories that ',
    { word: 'inspire', icon: 'spark' },
    ', ',
    { word: 'inform', icon: 'book' },
    ', and ',
    { word: 'entertain', icon: 'play' },
  ]}
  articles={[
    { title: 'Inside the studio', href: '/stories/studio', category: 'Profile', date: 'May 2' },
  ]}
  style={{ '--pp-heading-font': "'Geist Variable', sans-serif", '--pp-heading-weight': 600 } as React.CSSProperties}
/>


// Hide the browse row
<HeroTerracotta articles={[]} />

Install

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-07

npx shadcn@latest add @pastaui-pro/hero-section-07

yarn dlx shadcn@latest add @pastaui-pro/hero-section-07

bunx --bun shadcn@latest add @pastaui-pro/hero-section-07

Source

Props

Editorial panel props
Prop	Type	Default	Description
brand / brandHref	string	= Northlight / #	Wordmark in the top bar and its link. Uses the headline font.
navLinks	{ label: string; href: string }[]	= Stories, Guides, Podcast, Newsletter	Text links on the right. Only the last one shows on small screens.
eyebrow	string	= Welcome to {brand}	Small line above the headline.
headline	Array<string \| { word: string; icon?: 'spark' \| 'book' \| 'play' \| 'smile' \| 'heart' }>	= Field notes for people who make, ship, and grow	Headline parts. Objects render with a blue pixel icon and dashed underline.
description	string	= —	Optional line under the headline. Hidden unless provided.
startEyebrow / startHeading	string	= Get started / Browse by craft, series, or maker	Eyebrow and heading for the left column of the browse row.
latestTitle	string	= Latest	Heading above the article cards.
articles	{ title: string; href: string; category: string; date: string; author?: string }[]	= Two sample stories	Up to two cards, each paired with a built-in wide painted image. Pass [] to hide the whole browse row.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline overrides for the --pp-* variables. Type defaults: --pp-heading-font 'Manrope Variable', --pp-heading-weight 450, --pp-subheading-weight 550, --pp-heading-size 40px (48px from 640px, 64px from 1024px), --pp-heading-tracking -0.035em, --pp-heading-leading 1.08, --pp-eyebrow-size 11px, --pp-eyebrow-tracking 0.16em.