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
<div class="space-y-3">
<diwa-text size="x-small">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="small">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="medium">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="large">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="x-large">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="xx-large">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>Weight variants
<div class="space-y-3">
<diwa-text size="medium" weight="regular">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="medium" weight="semibold">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="medium" weight="bold">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>Colour aliases
<div class="space-y-3">
<diwa-text size="medium" color="primary">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="medium" color="secondary">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text size="medium" color="tertiary">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.
<diwa-text size="medium" ellipsis style="display: block; max-width: 280px">
The quick brown fox jumps over the lazy dog.
</diwa-text>Semantic tags
<div class="space-y-2">
<diwa-text tag="p" size="medium">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text tag="span" size="medium" color="secondary">The quick brown fox jumps over the lazy dog.</diwa-text>
<diwa-text tag="label" size="small" weight="semibold">The quick brown fox jumps over the lazy dog.</diwa-text>
</div>