Skip to content
Site volume
Colourway

Components

SectionHead

Eyebrow, title, sub and an action at the end; the title in the card or section heading role.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/section-head
On this page

Example#

Look of this example

What I do

Four kinds of work, mostly websites.

After launch I look after SEO, analytics and hosting.

Live render of examples/section-head/basic.tsx

Usage#

Use a section head to open each section: an eyebrow, the title, an optional line under it and one action at the end, such as "See all work".

  • Sizes. size="md" sets the title in the card heading role, lg in the section heading role. From Press the type layer prints the second ink on section heads (10 §3.6).
  • Level. level is 2 by default; use 3 for a head inside a section.
  • Actions sit at the end from md, aligned with the bottom of the text, and stack under it on phones. One standalone Link or Button.
  • Centred (align="center") only for short heads on landing sections; long titles read better at the start.

Anatomy#

What I do

Four kinds of work, mostly websites.

After launch I look after SEO, analytics and hosting.

The parts of examples/section-head/basic.tsx, numbered:
  1. EyebrowLabel role, sentence case..mk-eyebrow
  2. Titledata-mk-part="title"
  3. Subdata-mk-part="sub"

Volume#

Reading layer: identical at every volume, apart from the second ink the type layer adds to section heads at Press and Rave.

  • Quiet

    What I do

    Four kinds of work, mostly websites.

    After launch I look after SEO, analytics and hosting.

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    What I do

    Four kinds of work, mostly websites.

    After launch I look after SEO, analytics and hosting.

    The site default. Art on its own plates, one display moment per view.

  • Press

    What I do

    Four kinds of work, mostly websites.

    After launch I look after SEO, analytics and hosting.

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    What I do

    Four kinds of work, mostly websites.

    After launch I look after SEO, analytics and hosting.

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Eyebrow: two to four words of context ("What I do"). Never all caps.
  • Title: the section's claim in a sentence, ten words or fewer.
  • Sub: one supporting sentence; drop it when the title says enough.

Do and don't#

Do

What I do

Four kinds of work, mostly websites.

The eyebrow sets context, the title makes a claim.

Don't

Services

Services

The same word twice says nothing.

The eyebrow and the title are two lines of reading. Repeating a word wastes both.

Accessibility#

  • The eyebrow is a paragraph, never a heading; the title takes level 2 (default) or 3.
  • Pass titleId and give the Section labelledBy to make the section a named region.

Props#

PropTypeDefaultDescription
eyebrowstring | { text: string; line: LineId; }none
title requiredReactNodenone
level2 | 32Default 2.
titleIdstringnoneThe title's id (for `Section labelledBy`).
subReactNodenone
actionsReactNodenoneA standalone Link or Button at the inline end.
align"center" | "start"none
size"lg" | "md"none

Plus 278 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from SectionHeadProps in packages/overprint-react/src/reading/section-head/section-head.tsx.

Tokens#

System tokens (8)

Scanned from its CSS at build and checked against its registry entry; 1 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry