Diwa Design System

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 - The quick brown fox jumps over the lazy dogH1 - The quick brown fox jumps over the lazy dogH2 - The quick brown fox jumps over the lazy dogH3 - The quick brown fox jumps over the lazy dogH4 - The quick brown fox jumps over the lazy dogH5 - The quick brown fox jumps over the lazy dogH6 - The quick brown fox jumps over the lazy dog
<div class="space-y-4">
  <diwa-heading size="display">Display - The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h1">H1 - The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h2">H2 - The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h3">H3 - The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h4">H4 - The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h5">H5 - The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h6">H6 - The quick brown fox jumps over the lazy dog</diwa-heading>
</div>

Semantic hierarchy

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

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
<div class="space-y-2">
  <diwa-heading size="h1">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h2">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h3">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h4" color="secondary">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h5" color="secondary">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h6" color="secondary">The quick brown fox jumps over the lazy dog</diwa-heading>
</div>

Weight variants

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
<div class="space-y-3">
  <diwa-heading size="h3" weight="semibold">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h3" weight="bold">The quick brown fox jumps over the lazy dog</diwa-heading>
</div>

Colour variants

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
<div class="space-y-3">
  <diwa-heading size="h3" color="primary">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h3" color="secondary">The quick brown fox jumps over the lazy dog</diwa-heading>
</div>

Alignment

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
<div class="space-y-3">
  <diwa-heading size="h4" align="start">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h4" align="center">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h4" align="end">The quick brown fox jumps over the lazy dog</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.

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
<div class="space-y-3">
  <diwa-heading size="h1" tag="h3">The quick brown fox jumps over the lazy dog</diwa-heading>
  <diwa-heading size="h5" tag="h2">The quick brown fox jumps over the lazy dog</diwa-heading>
</div>

Ellipsis truncation

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

The quick brown fox jumps over the lazy dog and keeps running through typography tests.
<diwa-heading size="h3" ellipsis style="display: block; max-width: 360px">
  The quick brown fox jumps over the lazy dog and keeps running through typography tests.
</diwa-heading>

Editorial hero

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

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog and keeps typography readable.
<diwa-heading size="display">The quick brown fox jumps over the lazy dog</diwa-heading>
<diwa-heading size="h3" color="secondary" style="margin-top: 12px">
  The quick brown fox jumps over the lazy dog and keeps typography readable.
</diwa-heading>