PixelHeroSection

Surface-aware hero section with eyebrow, headline, subline, CTA cluster, install snippet, meta and optional media in centered, split or parallax variants.

  • Three variants: centered, split (with media column) and parallax (media behind text)
  • Density-aware vertical rhythm (compact / comfortable) and tunable min-height
  • Tone tokens for eyebrow accent + surface-aware typography and transitions
  • Composable slots: eyebrow, primary/secondary CTA, install, meta and media
  • Semantic <section> whose headline level is yours to set (as, h1 by default)
Status
stable
Category
hero
Since
v1.7.0

API

import { PixelHeroSection } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
variant'centered' | 'split' | 'parallax''centered''centered' and 'parallax' centre the text; 'split' puts the media in a column beside it. Default 'centered'.
eyebrowstring—Small upper-cased line above the headline, in the tone.
headline (required)string—The headline: the page's <h1>, unless as sets another level.
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h1'Element of the headline. Default 'h1', the page's heading: a hero embedded under the page's own <h1> (a demo, a template) takes a lower level.
headlineEffect'typewriter' | 'glitch' | 'none''none'Animates the headline: 'typewriter' types it out once — screen readers get the whole headline from the start — and 'glitch' plays PixelGlitch over it. Both hold still when the user prefers reduced motion. Default 'none'.
sublinestring—Paragraph under the headline.
primaryCtaReact.ReactNode—First call to action.
secondaryCtaReact.ReactNode—Second call to action, after the first.
installReact.ReactNode—Install snippet under the calls to action.
metaReact.ReactNode—Meta line at the end of the text.
mediaReact.ReactNode—Media, placed by the variant: beside the text, behind it or below it.
tone'neutral' | 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink''neutral'Tone of the eyebrow. Default 'neutral'.
density'compact' | 'comfortable''comfortable'Type sizes and vertical rhythm. Default 'comfortable'.
minHeight'sm' | 'md' | 'lg' | 'fullscreen''md'Minimum height of the section. Default 'md'.
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

  • region

Renders a <section> whose headline is the page's <h1>, or the level as sets for a hero embedded under the page's own <h1>. The headline is one heading with every effect: the glitch's colour copies are aria-hidden spans inside it. A section is a landmark only once it has an accessible name: give the hero an aria-label (it reaches the <section>) when it should be one, for instance on a page with several landmarks.

Usage

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

export function Default() {
  return (
    <PixelHeroSection
      eyebrow="Introducing"
      headline="Pixel-perfect retro UI for modern web"
      subline="A component kit that brings cinematic, terminal-grade interfaces to React apps."
      primaryCta={<button type="button">Get started</button>}
      secondaryCta={<button type="button">View docs</button>}
    />
  )
}

Examples

Default

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

export function Default() {
  return (
    <PixelHeroSection
      eyebrow="Introducing"
      headline="Pixel-perfect retro UI for modern web"
      subline="A component kit that brings cinematic, terminal-grade interfaces to React apps."
      primaryCta={<button type="button">Get started</button>}
      secondaryCta={<button type="button">View docs</button>}
    />
  )
}

Split with media

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

export function Split() {
  return (
    <PixelHeroSection
      variant="split"
      eyebrow="New in v2"
      headline="Compose richer hero sections"
      subline="Pair a tagline with media on the side using the split variant."
      primaryCta={<button type="button">Try it</button>}
      media={<div style={{ width: '100%', height: 240, background: '#111', border: '1px solid #333' }} />}
      tone="cyan"
    />
  )
}

Compact density

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

export function Compact() {
  return (
    <PixelHeroSection
      density="compact"
      minHeight="sm"
      headline="Compact density"
      subline="Tighter rhythm for denser layouts."
    />
  )
}

Typewriter headline

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

export function TypewriterHeadline() {
  return (
    <PixelHeroSection
      eyebrow="Boot sequence"
      headline="Loading retro interfaces"
      headlineEffect="typewriter"
      subline="The headline types itself out; screen readers get it whole from the start."
    />
  )
}

Glitch headline

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

export function GlitchHeadline() {
  return (
    <PixelHeroSection
      density="compact"
      minHeight="sm"
      headline="Signal lost"
      headlineEffect="glitch"
      subline="The headline glitches, and holds still for readers who prefer reduced motion."
      tone="red"
    />
  )
}

Heading level

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

export function HeadingLevel() {
  return (
    <PixelHeroSection
      as="h2"
      density="compact"
      minHeight="sm"
      eyebrow="Embedded"
      headline="A hero inside a page"
      subline="Its headline is an h2, under the page's own h1."
    />
  )
}

Related