QsHeading

<qs-heading>alpha

A heading in one of the system's display styles. level sets the document outline (<h1>–<h6>); appearance sets the look, so the visual hierarchy never forces you to skip a level. Sizes are fluid and shrink on small screens.

Appearances

HeroDisplayLarge titleHeadlineTitle

<qs-heading level="1" appearance="hero">Hero</qs-heading>
<qs-heading level="2">Large title (default for level 2)</qs-heading>
<qs-heading level="3">Headline (default for level 3)</qs-heading>

Prop

Prop	Type	Default	Description
level	number	2	Heading level in the document outline (1–6). Out-of-range values clamp.
appearance	"hero" | "display" | "large-title" | "headline" | "title" | ""	""	Visual style. Defaults from `level`: 1 → display, 2 → large-title, 3 → headline, 4–6 → title.
text	string	—	The text content of the element, captured from light DOM before the first render.

Usage

level decides which element is rendered (<h1>–<h6>), which is what screen readers use to navigate. appearance only decides the look. That lets the visual size follow the design without breaking the outline.

Level	Default appearance	Tokens
1	display	--text-display-*
2	large-title	--text-large-title-*
3	headline	--text-headline-*
4–6	title	--text-title-*
any	hero (opt-in)	--text-hero-*

• Use one level="1" per page, and don't skip levels. Change appearance instead.
• hero, display and large-title are fluid (clamp()): they shrink smoothly on small screens, so a 96px hero becomes 48px on a phone.
• Content is plain text. For rich inline markup, use your own <h2 class="text-headline">; the typography utilities apply the same tokens.
• In the Industrial theme, headings are uppercase (--type-case-heading).

In a framework

Children are the static content of the first render, and their markup (links, <em>, lang spans) is kept. For text that changes, bind Elena's text property instead of rendering a child, as Elena recommends:

<!-- React -->  <qs-heading text={label} />
<!-- Vue -->    <qs-heading :text="label" />
<!-- Angular --><qs-heading [text]="label" />

Don't let a framework add or remove individual children inside qs-heading: once rendered, they live inside the component's own element.