## Screen heading
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.
Default to the HTML snippet — <aha-screen-heading> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, editor, admin, settings.
Props:
- title: string, default —. The page title — rendered via <aha-breadcrumb size="page-title"> (Heading4 24/600, text-default), unless `highlight` makes it an accent greeting
- highlight: string, default —. Optional substring of `title` rendered in color-primary — e.g. the person's name in a greeting
- breadcrumb: JSON [{label, href?}], default —. When present, a `›` trail renders as the page title via the reused <aha-breadcrumb size="page-title"> (for a sub-page)
- description: string, default —. Optional subtitle under the title (14px, text-secondary)
- device: 'desktop' | 'tablet' | 'phone', default desktop. Deterministic responsive layout — phone wraps the actions below the title
Tokens: text-default, text-secondary, color-primary.
Use when: 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).