Heading

wu-title sets a visual heading size on any element, in four steps. Pick the heading level for the document outline, and the size for the look.

Class	Effect
`wu-title`	Root. Extra large, semibold, tight leading, balanced wrapping
`sm`	Large
`lg`	2xl
`xl`	3xl

Sizes

Extra large title

Large title

Default title

Small title

<div class="flex col gap-3">
  <h2 class="wu-title xl">Extra large title</h2>
  <h2 class="wu-title lg">Large title</h2>
  <h2 class="wu-title">Default title</h2>
  <h2 class="wu-title sm">Small title</h2>
</div>

Level and size apart

An h3 with the large size

<h3 class="wu-title lg">An h3 with the large size</h3>

Load only the title

@use "@wovenui/components/title";

The title needs no other component.