Heading

Display title, with the accent underline.

The display/page-title recipe as a component: display font, oversized clamp() sizing, a primary accent underline behind the lower third of the text, and a background-coloured text-shadow so the glyphs cut into the highlight. The `level` prop picks the rendered `h1`…`h6` independently of the styling, `accent` toggles the underline, and `centered` centres it. Self-contained — usable without importing `theme.css` (the recipe ships in the component, not the global stylesheet).

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Heading } from 'dssoca';
</script>

<Heading>hub_dashboard</Heading>
<Heading level={2} accent={false}>quiet subtitle</Heading>
<Heading centered>centered title</Heading>

Pick `level` for the document outline (one `h1` per page; don’t skip levels) and let the visual treatment stay constant — semantics and styling are decoupled on purpose. The accent underline sits behind the text (`z-index: -1`) and is purely decorative, so contrast is carried by the text colour itself (WCAG 1.4.3 holds with or without it). Sizing reads the `--ss-heading-*` tokens and rescales across sm/md/lg.

Props

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	Heading level — picks the rendered element (h1…h6); styling is level-independent.
`accent`	`boolean`	`true`	Primary accent underline behind the text.
`centered`	`boolean`	`false`	Center the heading.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`children`	`Snippet`	—	Heading text.