Typography Helper Classes
TIP
See Color Helper Classes for Color Helper Classes.
These utility classes (prefixed with h-) provide quick overrides for text alignment, weight, and decoration without writing custom CSS for every component.
Alignment Helpers
Controls the horizontal flow of text within its container.
| Class | Purpose | Preview (Live) | Code Snippet |
|---|---|---|---|
.h-type-align-left | Left-aligned text | Text aligned left (Default) | <p class="h-type-align-left">...</p> |
.h-type-align-center | Centered text | Text aligned center | <p class="h-type-align-center">...</p> |
.h-type-align-right | Right-aligned text | Text aligned right | <p class="h-type-align-right">...</p> |
Emphasis & Decoration
Used to highlight specific words or apply visual transformations.
| Class | Purpose | Preview (Live) | Code Snippet |
|---|---|---|---|
.h-type-emphasize | Italicized style | Emphasized text | <p class="h-type-emphasize">...</p> |
.h-type-bold | Heavier font weight | Bolded text | <p class="h-type-bold">...</p> |
.h-type-uppercase | All capital letters | uppercase text | <p class="h-type-uppercase">...</p> |
.h-type-underline | Standard text decoration | Underlined text | <p class="h-type-underline">...</p> |
.h-type-underline-pseudo | Custom hover/pseudo underline | <button class="h-type-underline-pseudo">...</button> |
Typography Size Utilities
These helper classes allow you to apply specific font sizes from your design scale to any text element, regardless of its HTML tag.
| Class | Scale Level | Preview (Live) | Code Snippet |
|---|---|---|---|
| Extra Large | .h-type-extra-large | Extra Large Text Size | <p class="h-type-extra-large">...</p> |
| Largest | .h-type-largest | Largest Text Size | <p class="h-type-largest">...</p> |
| Larger | .h-type-larger | Larger Text Size | <p class="h-type-larger">...</p> |
| Large | .h-type-large | Large Text Size | <p class="h-type-large">...</p> |
| Base | .h-type-base | Base Text Size (Standard) | <p class="h-type-base">...</p> |
| Small | .h-type-small | Small Text Size | <p class="h-type-small">...</p> |
| Extra Small | .h-extra-small | Extra Small Text Size | <p class="h-extra-small">...</p> |
Text Wrapping & Breaking
These classes control how the browser handles line breaks when a string of text is too long for its container.
| Class | Behavior | Preview (Live) | Code Snippet |
|---|---|---|---|
.h-break-word | Wraps long words at logical points to prevent overflow. | Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod | <span class="h-break-word">...</span> |
.h-no-wrap | Forces text to stay on a single line; collapses extra spaces. | <span class="h-no-wrap">...</span> | |
.h-break-all | Breaks words at any character to strictly fit the width. | Loremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmod | <span class="h-break-all">...</span> |
.h-break-spaces | Behaves like pre-wrap but breaks at any whitespace sequence. | Lorem ipsum dolor sit amet | <span class="h-break-spaces">...</span> |
Overflow Management
Utilities for handling content that exceeds the dimensions of its parent container.
| Class | Purpose | Preview (Live) | Code Snippet |
|---|---|---|---|
.h-overflow-hidden | Hides any content that spills outside the box. | Long text hidden here | <div class="h-overflow-hidden">...</div> |
.h-overflow-auto | Adds scrollbars only if content overflows. | Scrollable content goes here | <div class="h-overflow-auto">...</div> |
.h-overflow-ellipsis | Adds ... to truncated text (requires block & width). | This text is way too long for this small box | <span class="h-overflow-ellipsis">...</span> |
Visual Transformation
| Class | Purpose | Preview (Live) | Code Snippet |
|---|---|---|---|
.h-capitalize-first-letter | Automatically capitalizes the first character of a string. | lorem ipsum (transformed) | <span class="h-capitalize-first-letter">...</span> |