PixelSectionHeader

Section header with eyebrow, title, description, and actions — rhythm-aware and surface-aware.

  • Configurable heading level (h1–h6) preserves document outline
  • Size and spacing scales (sm/md/lg, tight/normal/loose) use shared rhythm tokens
  • Optional eyebrow is decorative (aria-hidden) with sr-only restatement in the heading
  • Tone-aware title coloring via ToneKey
  • Surface-aware typography
Status
stable
Category
layout
Since
v1.6.0

API

import { PixelSectionHeader } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
eyebrowstring—Small uppercase line above the title.
title (required)string—The heading.
titleTone'neutral' | 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink'—Tone of the title and eyebrow.
descriptionstring—Paragraph under the title.
align'start' | 'center''start'Start-aligned, or centred with a capped width.
size'sm' | 'md' | 'lg''md'Type scale.
spacing'tight' | 'normal' | 'loose''normal'Gaps between the blocks.
actionsReact.ReactNode—Buttons or links under the description.
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h2'Heading level of the title.
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.

Also takes the native attributes and event handlers of its element (HTMLAttributes<HTMLElement>).

ref points to its element (HTMLElement).

Accessibility

WCAG target: 2.1 AA

  • Heading hierarchy via as=h1..h6
  • Decorative eyebrow tagged with aria-hidden and restated sr-only inside the heading

Choose as to match the document outline of the page. The eyebrow is visually decorative but is preserved for screen readers via sr-only prefix on the heading.

Usage

import { PixelSectionHeader } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelSectionHeader
      eyebrow="Section"
      title="Build pixel-perfect interfaces"
      description="A retro-cinematic component kit with surface awareness and rhythm tokens."
    />
  );
}

Examples

Default

import { PixelSectionHeader } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelSectionHeader
      eyebrow="Section"
      title="Build pixel-perfect interfaces"
      description="A retro-cinematic component kit with surface awareness and rhythm tokens."
    />
  );
}

Centered

import { PixelSectionHeader } from '@pxlkit/ui-kit';

export function Centered() {
  return (
    <PixelSectionHeader
      align="center"
      eyebrow="Features"
      title="Designed for clarity"
      description="Centered headers work great as page intros above a feature grid."
    />
  );
}

With Actions

import { PixelSectionHeader } from '@pxlkit/ui-kit';

export function WithActions() {
  return (
    <PixelSectionHeader
      eyebrow="Dashboard"
      title="Recent activity"
      description="What happened across your workspace today."
      titleTone="cyan"
      actions={
        <>
          <button type="button">Refresh</button>
          <button type="button">Export</button>
        </>
      }
    />
  );
}

Large Hero

import { PixelSectionHeader } from '@pxlkit/ui-kit';

export function LargeHero() {
  return (
    <PixelSectionHeader
      as="h1"
      size="lg"
      align="center"
      spacing="loose"
      eyebrow="Introducing pxlkit"
      title="The retro-cinematic UI kit"
      description="Build interfaces that feel handcrafted, with a coherent token system."
      titleTone="green"
    />
  );
}