naUITypography
Font size, weight, style, transform, alignment, line-height, and text colour utilities.
Text size
Set font size using the named scale. Each step maps to a --na-font-size-{name} token.
na-text-xs - extra small
na-text-s - small
na-text-base - base (default)
na-text-m - medium
na-text-l - large
na-text-xl - extra large
na-text-2xl
na-text-3xl
<p class="na-text-xs">extra small</p>
<p class="na-text-s">small</p>
<p class="na-text-base">base</p>
<p class="na-text-m">medium</p>
<p class="na-text-l">large</p>
<p class="na-text-xl">extra large</p>
<p class="na-text-2xl">2xl</p>
<p class="na-text-3xl">3xl</p>Font weight
na-font-weight-400 - 400
na-font-weight-500 - 500
na-font-weight-600 - 600
na-font-weight-700 - 700
<p class="na-font-weight-400">normal</p>
<p class="na-font-weight-500">medium</p>
<p class="na-font-weight-600">semibold</p>
<p class="na-font-weight-700">bold</p>Font style
na-italic - italic text
na-not-italic - normal style
<p class="na-italic">italic</p>
<p class="na-not-italic">normal</p>Text transform
na-uppercase - uppercase text
NA-LOWERCASE - lowercase text
na-capitalize - capitalised words
<p class="na-uppercase">...</p>
<p class="na-lowercase">...</p>
<p class="na-capitalize">...</p>Text alignment
na-text-left - left aligned
na-text-center - centred
na-text-right - right aligned
<p class="na-text-left">...</p>
<p class="na-text-center">...</p>
<p class="na-text-right">...</p>Line height
na-leading-none (1) - Line one
Line two
na-leading-tight (1.25) - Line one
Line two
na-leading-normal (var) - Line one
Line two
<p class="na-leading-none">...</p>
<p class="na-leading-tight">...</p>
<p class="na-leading-normal">...</p>Overflow & whitespace
<div class="na-truncate">...</div>
<div class="na-whitespace-nowrap">...</div>
<div class="na-break-word">...</div>Text colors
Apply a semantic or neutral colour to text. Pairs with background utilities on the Background page.
na-text-primary
na-text-secondary
na-text-success
na-text-warning
na-text-danger
na-text-info
na-text-muted
na-text-dark
na-text-white (on dark bg)
<p class="na-text-primary">...</p>
<p class="na-text-secondary">...</p>
<p class="na-text-success">...</p>
<p class="na-text-warning">...</p>
<p class="na-text-danger">...</p>
<p class="na-text-info">...</p>
<p class="na-text-muted">...</p>
<p class="na-text-dark">...</p>
<p class="na-text-white">...</p>List style
- First item - no bullets or indent
- Second item
- Third item
<ul class="na-list-none">
<li>...</li>
</ul>Class reference
| Class | Property | Value |
|---|---|---|
na-text-xs - na-text-3xl | font-size | token scale |
na-font-weight-400 | font-weight | 400 |
na-font-weight-500 | font-weight | 500 |
na-font-weight-600 | font-weight | 600 |
na-font-weight-700 | font-weight | 700 |
na-italic | font-style | italic |
na-not-italic | font-style | normal |
na-uppercase | text-transform | uppercase |
na-lowercase | text-transform | lowercase |
na-capitalize | text-transform | capitalize |
na-text-left | text-align | left |
na-text-center | text-align | center |
na-text-right | text-align | right |
na-leading-none | line-height | 1 |
na-leading-tight | line-height | 1.25 |
na-leading-normal | line-height | var token |
na-truncate | overflow + text-overflow | ellipsis |
na-whitespace-nowrap | white-space | nowrap |
na-break-word | overflow-wrap | break-word |
na-list-none | list-style | none; m/p: 0 |
na-text-primary - na-text-white | color | semantic tokens |