Heading

A responsive heading renderer that maps a visual size scale onto the correct semantic HTML heading element. Supports fluid typography, colour, alignment, weight, and ellipsis truncation.

Type scale

All seven heading sizes rendered with fluid type tokens — sizes scale fluidly between viewport breakpoints.

Display — Diwa Design System

H1 — Diwa Design System

H2 — Diwa Design System

H3 — Diwa Design System

H4 — Diwa Design System

H5 — Diwa Design System

H6 — Diwa Design System

<div class="space-y-4">
  <diwa-heading size="display">Display — Diwa Design System</diwa-heading>
  <diwa-heading size="h1">H1 — Diwa Design System</diwa-heading>
  <diwa-heading size="h2">H2 — Diwa Design System</diwa-heading>
  <diwa-heading size="h3">H3 — Diwa Design System</diwa-heading>
  <diwa-heading size="h4">H4 — Diwa Design System</diwa-heading>
  <diwa-heading size="h5">H5 — Diwa Design System</diwa-heading>
  <diwa-heading size="h6">H6 — Diwa Design System</diwa-heading>
</div>

Semantic hierarchy

Use the size scale to reflect document structure. Screen readers and search engines both rely on correct heading order.

Page title

Section heading

Subsection heading

Card title

Group label

Sub-label

<div class="space-y-2">
  <diwa-heading size="h1">Page title</diwa-heading>
  <diwa-heading size="h2">Section heading</diwa-heading>
  <diwa-heading size="h3">Subsection heading</diwa-heading>
  <diwa-heading size="h4" color="secondary">Card title</diwa-heading>
  <diwa-heading size="h5" color="secondary">Group label</diwa-heading>
  <diwa-heading size="h6" color="secondary">Sub-label</diwa-heading>
</div>

Weight variants

Semibold heading

Bold heading

<div class="space-y-3">
  <diwa-heading size="h3" weight="semibold">Semibold heading</diwa-heading>
  <diwa-heading size="h3" weight="bold">Bold heading</diwa-heading>
</div>

Colour variants

Primary heading

Secondary heading

<div class="space-y-3">
  <diwa-heading size="h3" color="primary">Primary heading</diwa-heading>
  <diwa-heading size="h3" color="secondary">Secondary heading</diwa-heading>
</div>

Alignment

Start aligned heading

Center aligned heading

End aligned heading

<div class="space-y-3">
  <diwa-heading size="h4" align="start">Start aligned heading</diwa-heading>
  <diwa-heading size="h4" align="center">Center aligned heading</diwa-heading>
  <diwa-heading size="h4" align="end">End aligned heading</diwa-heading>
</div>

Tag override

Use the tag prop to decouple visual size from semantic level — useful when page structure constraints differ from visual intent.

Visual size h1, semantic h3

Visual size h5, semantic h2

<div class="space-y-3">
  <diwa-heading size="h1" tag="h3">Visual size h1, semantic h3</diwa-heading>
  <diwa-heading size="h5" tag="h2">Visual size h5, semantic h2</diwa-heading>
</div>

Ellipsis truncation

Set ellipsis on a fixed-width host to clip overflow to a single line.

Diwa Design System — Building the future, one component at a time.

<diwa-heading size="h3" ellipsis style="display: block; max-width: 360px">
  Diwa Design System — Building the future, one component at a time.
</diwa-heading>

Editorial hero

Pair a display heading with a secondary subtitle for high-impact hero sections.

Diwa Design System

Build faster. Ship consistently. Scale with confidence.

<diwa-heading size="display">Diwa Design System</diwa-heading>
<diwa-heading size="h3" color="secondary" style="margin-top: 12px">
  Build faster. Ship consistently. Scale with confidence.
</diwa-heading>