Diwa Design System

Text

A semantically correct text renderer that maps a visual type scale onto the right HTML element. Supports size, weight, alignment, colour, and ellipsis truncation.

Type scale

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<div class="space-y-3 w-full">
  <diwa-text size="x-small" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="small" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="large" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="x-large" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="xx-large" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>

Weight variants

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<div class="space-y-3 w-full">
  <diwa-text size="medium" weight="regular" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" weight="semibold" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" weight="bold" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>

Colour aliases

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<div class="space-y-3 w-full">
  <diwa-text size="medium" color="primary" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" color="secondary" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" color="tertiary" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>

Alignment variants

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<div class="space-y-4 w-full">
  <diwa-text size="medium" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" align="center">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text size="medium" align="end">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>

Ellipsis truncation

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

The quick brown fox jumps over the lazy dog.
<diwa-text size="medium" ellipsis style="display: block; max-width: min(280px, 90vw)">
  The quick brown fox jumps over the lazy dog.
</diwa-text>

Semantic tags

The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<div class="space-y-2 w-full">
  <diwa-text tag="p" size="medium" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text tag="span" size="medium" color="secondary" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
  <diwa-text tag="label" size="small" weight="semibold" align="start">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>