# Screen heading
> Generated from screen-heading.contract.json — do not edit by hand.

A product page header — a title/greeting or a breadcrumb trail on the left, action buttons on the right, responsive across desktop / tablet / phone.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: dashboard, editor, admin, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `title` | string | `—` | The page title — rendered via <aha-breadcrumb size="page-title"> (Heading4 24/600, text-default), unless `highlight` makes it an accent greeting |
| `highlight` | string | `—` | Optional substring of `title` rendered in color-primary — e.g. the person's name in a greeting |
| `breadcrumb` | JSON [{label, href?}] | `—` | When present, a `›` trail renders as the page title via the reused <aha-breadcrumb size="page-title"> (for a sub-page) |
| `description` | string | `—` | Optional subtitle under the title (14px, text-secondary) |
| `device` | 'desktop' | 'tablet' | 'phone' | `desktop` | Deterministic responsive layout — phone wraps the actions below the title |

## Visual standard (measured)
- Type: title = <aha-breadcrumb size="page-title"> — Heading4 24 / SemiBold 600 / line-height 1.3 / #1A1A1A (text-default) for a single-crumb page title; 18/600 with an ancestor path
- Highlight: optional `highlight` substring of the title in color-primary #6A1EBB (a person's name) → a local greeting <h1>, matched to the breadcrumb page-title solo
- Breadcrumb: `breadcrumb` JSON [{label, href?}] → the `›` trail renders as the page title via the reused <aha-breadcrumb size="page-title"> (heading-level 1)
- Description: optional subtitle, Plus Jakarta 14/22 · text-secondary #4A4A4A, under the title
- Actions: slot="actions" — the consumer drops <aha-button>s here (never a hand-rolled button)
- Gap: 16 between the title area and the actions · 8 title→description and between action buttons
- Layout: desktop / tablet: title left, actions right on one row · phone: actions wrap below the title

## When to use
- **Screen heading** — the header row of a product page — a title/greeting or a hierarchy trail plus the page's primary actions
- **Breadcrumb** — only the ancestor trail / page title is needed, with no right-hand actions (use <aha-breadcrumb size="page-title"> directly — it IS the title this header wraps)
- **Card** — a titled content container, not the page-level header

One primary action on the right at most; the rest secondary. Use a plain `title` for a top-level page (optionally with a `highlight` name), and a `breadcrumb` trail for a sub-page — both render the page heading via the reused <aha-breadcrumb size="page-title">, never a hand-rolled <h1>. Keep the title a short sentence-case phrase.