SectionHeading

The section kit's heading block: an eyebrow, a title, a description and an action row.

Umbrella

The portable contract both renderers implement.

Shared

Install

npm install asheeui @asheeui/web

Import

import { SectionHeading } from "asheeui/section-kit";

The section kit's heading block; both renderers publish it on their section-kit subpath

One contract and a real implementation on both platforms.

The umbrella is the intersection; see the portable surface for the complete list and the monorepo guide for wiring one shared kit to both applications.

The live examples below run the web branch in this browser. The umbrella is the contract both branches implement; open Web for the browser's extra APIs and Native for the device's behaviour.

A section heading answers three questions in one block: what this region is, what it is for, and what a reader can do about it. SectionHeading states all three, and leaves the action row to ActionGroup or to a single control.

import { SectionHeading } from "asheeui/section-kit";

<SectionHeading
  eyebrow="Training"
  title="This week"
  description="Steps and active minutes, day by day."
  actions={<Button variant="ghost">See progress</Button>}
/>;

The heading and the id

titleAs decides the element on the web — h2 by default, h1 when the section is the page's main heading. titleId names it so a section's aria-labelledby can point at it. On a device the role is carried by accessibilityRole, and both ids warn once because a device has no document to address.