Page Headers

Three header variants for different page contexts. Each supports slots for navigation and actions.

PageHeader--Centered @components/page-headers/PageHeader--Centered.astro
Development Timeline

Changelog

Track the evolution of Dark Matter's design system, components, and features. Every commit, every breakthrough, documented.

Use cases:

  • Landing pages with dramatic headers
  • Changelog/updates pages
  • Feature announcement pages

Props:

  • title - Main heading (gradient text)
  • subtitle - Description text
  • badgeText - Pill badge content
  • badgeIcon - clock | archive | updates | none

Slots:

  • actions - Buttons/togglers below subtitle
PageHeader--SplitNav @components/page-headers/PageHeader--SplitNav.astro
24 Updates

Changelog

New features, improvements, and fixes. Browse our development journey.

Timeline Cards Releases

Use cases:

  • List pages with filtering
  • Dashboard headers
  • Archive/collection pages

Props:

  • title - Main heading
  • subtitle - Description text
  • count - Number for badge
  • countLabel - Text after count

Slots:

  • navigation - Right-aligned nav buttons
  • filters - Filter pills below header
PageHeader--Compact @components/page-headers/PageHeader--Compact.astro

Releases

3 releases published

Timeline Cards Releases

Use cases:

  • GitHub-style releases pages
  • Simple content listings
  • Secondary pages that don't need drama

Props:

  • title - Main heading
  • count - Optional count number
  • countLabel - Text after count

Slots:

  • navigation - Right-aligned nav buttons