Semantic heading component that renders the appropriate HTML heading tag (`h1`–`h6`) with flexible typography styling...

Semantic heading component that renders the appropriate HTML heading tag (`h1`–`h6`) with flexible typography styling via preset variants. Decouple visual hierarchy (size/style) from semantic hierarchy (heading level) by independently controlling `tagName` (h1–h6) and `variant`. This ensures correct document structure while allowing flexible visual presentation. By default, if no `variant` is set, the component auto-applies a variant based on `tagName`: h1 → headline-lg, h2 → headline-default, h3 → headline-sm, etc.

<ed-heading></ed-heading>

Properties

Name Type Default Description
variant String | 'display-xl' | 'display-lg' | 'display-default' | 'headline-lg' | 'headline-default' | 'headline-sm' | 'title-lg' | 'title-default' | 'title-sm' | 'label-lg' | 'label-default' | 'label-sm' | 'body-lg' | 'body-default' | 'body-sm' | 'meta-default' | 'meta-sm' Semantic heading component that renders the appropriate HTML heading tag (`h1`–`h6`) with flexible typography styling via preset variants. Decouple visual hierarchy (size/style) from semantic hierarchy (heading level) by independently controlling `tagName` (h1–h6) and `variant`. This ensures correct document structure while allowing flexible visual presentation. By default, if no `variant` is set, the component auto-applies a variant based on `tagName`: h1 → headline-lg, h2 → headline-default, h3 → headline-sm, etc. / export class EdHeading extends EdElement { static get styles() { return unsafeCSS(styles); } /** Typography variant that controls visual style independently of heading level. Variants are organized in preset tiers: display (largest), headline, title, label, body, meta (smallest). If not set, defaults based on `tagName`: h1→headline-lg, h2→headline-default, h3→headline-sm, h4→title-lg, h5→title-default, h6→title-sm.
tagName String 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2' The semantic HTML heading tag (h1–h6). Decoupled from visual style to allow correct document structure regardless of visual hierarchy. Defaults to h2.

Slots

Name Description
- The heading text content

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/heading/heading.ts