Display heading

Section heading

Subsection heading

Accessibility

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Heading } from '@dryui/ui';
</script>

<Heading level={2}>Launch readiness</Heading>

Import options

Root package

import { Heading } from '@dryui/ui'

Per-component subpath

import { Heading } from '@dryui/ui/heading'

API

Props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Description	Default	Required	Bindable
level	123456	Semantic heading level to render.	2	—	—
variant	defaultdisplay variant='display' uses --dry-font-display, which defaults to --dry-font-sans. For a distinct display typeface (e.g., a serif), override --dry-font-display on body or a scoped wrapper, not :root. See recipe: serif-display.	Visual style preset for the component.	'default'	—	—
maxMeasure	narrowdefaultwidefalse Caps the rendered inline size in ch units: narrow~22ch, default~45ch, wide~65ch. Use narrow for editorial hero headlines. Replaces the grid-wrapper hack that existed while dryui/no-width banned max-width.	Caps rendered inline size on an ergonomic text measure (ch unit). Pass narrow, default, or wide, or false to opt out.	false	—	—
className	HTMLAttributes<HTMLHeadingElement>['class']	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—