Component

SectionHead

Create section intros with eyebrow, title, subtitle, and size-based heading rhythm.

Usage

Import the component entry and start with its smallest complete example.

Import

import { SectionHead } from "@chitrank2050/monoline-ui/section-head"

Basic usage

<SectionHead
  size="lg"
  level={2}
  eyebrow="About · 02"
  title="Architecting scalable systems."
	subtitle="Let’s build the thing"
  lede="Interfaces for engineers who need speed without losing taste."
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

SectionHead gives a page section a consistent eyebrow, title, subtitle, and introduction.

Avoid when

The content does not introduce a section, or the document needs a heading below h3.

Accessibility

SectionHead chooses h1, h2, or h3 from level. Base that level on the document structure, not the desired visual size.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

as"div" | "header"Root HTML element (default: div)

sizesm | md | lg | xlHeading scale

level1 | 2 | 3Semantic heading element

eyebrowReactNode?Optional section label

titleReactNodeHeading content

subtitleReactNode?Optional subtitle within heading

ledeReactNode?Supporting paragraph

Design tokens

Theme variables this component reads for color, spacing, and motion.

--primaryCSS varHeading colour

--secondaryCSS varLede colour

font-monoCSS varHeadline face

Implementation

The source used by the example above, including any state it needs.

import { SectionHead } from "@chitrank2050/monoline-ui/section-head"

export function Intro() {
  return (
    <SectionHead
      eyebrow="Introduction"
      title="Opinionated where it counts."
			subtitle="Let’s build the thing"
      lede="Token-first components for editorial developer portfolios."
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentEyebrowComponent · ReferenceReference→02ComponentContainerComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview