Playground

HeadingGroup

typography

Editorial hero pattern: primary heading + dimmed secondary line at the same scale

Keeps a single semantic <h*> per group — secondary renders as <div>

import { HeadingGroup } from "@everydayos/ui";

Usage

Centered hero heading with a dimmed secondary line

<HeadingGroup
  as="h1"
  size="xl"
  heading="Get notified."
  secondary="There's something in the air"
  className="items-center text-center"
  headingClassName="text-white"
/>

API

as

Default: h2

h1h2h3h4h5h6div

secondaryOpacity

Default: 50

305070100

defaultpreferredrare

Prop	Type	Default
`size`	`HeadingSize`	—
`heading`*	`React.ReactNode`	—
`secondary`	`React.ReactNode`	—
`secondarySize`	`HeadingSize`	—
`className`	`string`	—
`headingClassName`	`string`	—
`secondaryClassName`	`string`	—

Examples

Section heading with subtitle

Section-level pair with a smaller secondary line

<HeadingGroup
  as="h2"
  size="xl"
  heading="Work with us"
  secondary="Be part of what's next"
  secondaryOpacity="50"
/>

Composition

Pairs well with

Text

Stack

Section

When to avoid

Need a single heading — use Heading directly
Secondary line is body copy — use Text underneath Heading instead