Heading levels

<Title order={1}>h1 heading</Title>
<Title order={2}>h2 heading</Title>
<Title order={3}>h3 heading</Title>
<Title order={4}>h4 heading</Title>
<Title order={5}>h5 heading</Title>
<Title order={6}>h6 heading</Title>

Size override

Use size to control the visual size independently of the semantic heading level.

<Title order={2} size="h1">Semantic h2, visual h1</Title>
<Title order={1} size="h4">Semantic h1, visual h4</Title>
<Title order={3} size="xl">xl size token</Title>
<Title order={3} size="sm">sm size token</Title>

Color

<Title order={2} c="violet">Violet title</Title>
<Title order={2} c="blue">Blue title</Title>
<Title order={2} c="green">Green title</Title>

Text wrap

<Title order={2} textWrap="balance">
  Balanced wrapping keeps heading lines close in length
</Title>
<Title order={2} textWrap="pretty">
  Pretty wrapping avoids orphaned words at the end
</Title>

Line clamp

<Title order={2} lineClamp={1}>
  A very long heading that will be clamped to a single line...
</Title>

Polymorphic component

Pass any Davaux component to component to change the rendered element while keeping heading styles. A common use case is rendering a heading as an Anchor so it becomes a styled, clickable link.

import { Anchor, Title } from '@davaux/ui'

<Title order={2} component={Anchor} href="#">
  Clickable h2 heading
</Title>
<Title order={3} component={Anchor} href="#" c="violet">
  Violet h3 link
</Title>