Dev Tools

PageHeader

Standard page header with optional badge and description. Used at the top of every content page.

Import

import PageHeader from '../../components/utility/PageHeader.astro';

Props

PropTypeRequiredDescription
title string Yes Main heading text
description string No Subheading paragraph below the title
badge string No Uppercase label above the title
tabs { id: string; label: string }[] No Tab definitions. When provided, renders TabToggle instead of separator
defaultTab string No ID of the initially active tab. Defaults to first tab

Usage

<!-- With separator (default) -->
<PageHeader title="Page Title" badge="Brand" description="..." />

<!-- With tabs -->
<PageHeader
  title="Page Title"
  badge="Brand"
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'usage', label: 'Usage' },
  ]}
/>

Preview — with separator

Section

Example Title

This is a description paragraph.

Preview — with tabs

Section

Example Title

This is a description paragraph.

Notes

  • When tabs is provided, the separator is replaced by TabToggle automatically.
  • Tab content panels use class .tab-section with id tab-{id} in the page.
  • The separator prop has been removed — separator vs tabs is determined by the presence of tabs.
Page tokens