Library · Foundations

Heading

Semantic heading with the level decoupled from the visual style — `size` uses the primitives fluid scale, `typeStyle` applies a .type-* Figma text style instead (marketing-section contexts).

Live preview — edit theme bottom-right

---
import Heading from "../components/primitives/heading/Heading.astro";
---
<Heading level="h2" typeStyle="h2">typeStyle="h2" — Figma text style</Heading>
<Heading level="h2" typeStyle="h4">Semantic h2, visual .type-h4</Heading>
<Heading level="h3" size="h5">size="h5" — primitives fluid scale</Heading>

Props

Name	Type	Required	Description
`level`	`keyof typeof headingOptions`	—	The tag name of the heading (semantic level)
`size`	`keyof typeof headingOptions`	—	The size of the heading (primitives fluid scale)
`typeStyle`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'body' \| 'important' \| 'caption'`	—	Apply a .type-* text style (marketing-section px scale) instead of the fluid `size` scale — decouples semantic level from Figma text style
`(slot)`	`children`	—	Heading text.

Example with all props

<Heading level="h2" typeStyle="h3">
  Visually H3, semantically an h2
</Heading>

<!-- Primitives fluid scale (library/UI contexts) -->
<Heading level="h3" size="h5">Fluid-scale heading</Heading>