SectionHead

Eyebrow, title and lead, in the five sizes the pages use.

import { SectionHead } from '@zitdevs/ui';

Examples

The demos below render real headings; on a product page there is one h1.

Why a managed team

More capacity. Less operational load.

Growing companies rarely need a dozen vendors or a full in-house department.

Build

Platforms and products

Web and mobile products, designed, built and run.

Start here

Tell us what you need to launch.

A specialist replies within one business day.

IT audit

Know what you run before it fails.

Infrastructure, security and spend, in one report.

<section aria-labelledby="why">
  <SectionHead
    headingId="why"
    eyebrow="Why a managed team"
    title="More capacity. Less operational load."
    text="Growing companies rarely need a dozen vendors or a full in-house department."
  />
</section>
<SectionHead level="hero" tone="primary" eyebrow="Managed technology partner" title="Your technology team, fully managed." />

Props

Prop	Type	Default	Notes
eyebrow	string	—	Rendered as an Eyebrow.
title	string	required
text	string	—	The lead paragraph under the title.
tone	'light' | 'inverse' | 'primary'	'light'	The field it sits on.
level	'hero' | 'page' | 'section' | 'cta' | 'card'	'section'	Picks the element and the size.
headingId	string	—	The heading’s id, for the section to name itself (aria-labelledby).
className	string	—	Placement.
anything else	<div> attributes	—

level	Element	Title	Lead
hero	h1	text-display-hero, 40–72px	text-lead-hero, 18–21px
page	h1	text-display-page, 32–52px	text-lead-page
section	h2	text-display-section, 30–48px	text-lead-section
cta	h2	text-display-cta, 32–56px	text-lead-cta
card	h3	text-card-title, 22px	text-card

The website’s tones map as navy → inverse and blue → primary. Exported types: SectionLevel, SectionTone.

Accessibility

• The level chooses the heading element and the size together, so the outline and the look cannot drift. A page has one h1: use hero or page once.
• The eyebrow and the lead are paragraphs outside the heading, so the heading’s name is the title alone. Pair headingId with aria-labelledby to name the section.
• A word wider than its line breaks rather than running past the column, under any text spacing.

Without JavaScript

Plain markup, nothing to run.

Theming

tone	Title	Lead	Eyebrow tone
light	text-ink	text-body	light
inverse	text-on-inverse	text-on-inverse-muted	inverse
primary	text-on-primary	text-on-primary	primary

Capped at max-w-heading (760px); each lead at its own line length (max-w-measure-lead…).