APPENDIX D

Section Opener

Eyebrow strip → display-italic title → hairline. Never hand-roll a section label strip.

HANDLE: section-opener
LIVES IN: src/components/PageBadge.jsx (SectionOpener)
USED ON: Home, About, Colophon, System
PROPS: no · label · meta · title

EXAMPLE

LIVE

As it renders.

¶ 02SECTION OPENER

META AT RIGHT

A section begins.

CODE

COPY AND PASTE

How it is called.

JSX

import { SectionOpener } from '../components/PageBadge.jsx'

<SectionOpener
  no="02"                       {/* omit when sections are not a sequence */}
  label="HOW I LEAD"
  meta="TEAMS · SYSTEMS · ENGINEERING"
  title="Fewer handoffs, more shared vocabulary."
/>
{/* icon={…} leads the strip; className replaces the default mb-8 */}

RULES

What must stay true.

Eyebrow strip → display-italic title → hairline. Never hand-roll a section label strip.

EXAMPLESSECTION OPENER

¶ 02SECTION OPENER

META AT RIGHT

A section begins.

CODE

JSX

import { SectionOpener } from '../components/PageBadge.jsx'

<SectionOpener
  no="02"                       {/* omit when sections are not a sequence */}
  label="HOW I LEAD"
  meta="TEAMS · SYSTEMS · ENGINEERING"
  title="Fewer handoffs, more shared vocabulary."
/>
{/* icon={…} leads the strip; className replaces the default mb-8 */}