Renders a canonical page-level heading (`` or ``) with an optional description paragraph, serving as the single source of truth for the ODS `text-h1`/`text-h2` typography tokens across the library.
## Key Components
| Export | Type | Description |
|---|---|---|
| `PAGE_HEADING_CLASS` | `string` | Tailwind class string for the ODS `text-h1` token (40/48/56px, Azeret Mono semibold) |
| `SECTION_HEADING_CLASS` | `string` | Tailwind class string for the ODS `text-h2` sub-title token (24/32/32px) |
| `PageHeadingProps` | `interface` | Props for the `PageHeading` component |
| `PageHeading` | `function` | Unified heading component rendering the heading element + optional description |
### `PageHeadingProps`
| Prop | Type | Default | Description |
|---|---|---|---|
| `children` | `ReactNode` | — | Heading content; plain text or nodes |
| `as` | `'h1' \| 'h2'` | `'h1'` | Semantic heading level |
| `description` | `ReactNode` | — | Supporting copy rendered as a `
` |
| `className` | `string` | — | Extra classes merged onto the heading |
| `descriptionClassName` | `string` | — | Extra classes merged onto the description `
` |
## Usage Example
```typescript
import { PageHeading, PAGE_HEADING_CLASS, SECTION_HEADING_CLASS } from './page-heading'
// Standard page title with description
Devices
// Section heading when an h1 already exists above (e.g. hero)
Active Endpoints
// With an accent span and extra margin class
Welcome to OpenFrame
// Apply the token class directly without the component (rare cases)
Custom Heading
Custom Section
```
> **Never hardcode pixel sizes or re-assert letter-spacing** for page or section headings — use `` or the exported class constants. See the [source](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/page-heading.tsx) for full implementation details.