Utilities in Amazium are small, single-purpose classes used to apply common styling patterns quickly. They cover layout, typography, visibility, and resets, helping reduce the need for custom CSS in components.
Text utilities control alignment, wrapping, and overflow behaviour for typography.
| Utility Class: | Description: | Example: |
|---|---|---|
| .txt--truncate | Truncates text with an ellipsis (...) when it overflows. | I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. |
| .txt--left | Aligns text to the left. | Left-aligned text |
| .txt--right | Aligns text to the right. | Right-aligned text |
| .txt--center | Centers the text horizontally. | Centered text |
| .txt--justify | Justifies text for full-width alignment. | Justified text - I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain. |
Border utilities control the corner radius of elements using the Amazium design tokens. These utilities map directly to the global radius scale to ensure consistent visual treatment across components.
| Utility Class: | Description: | Example: |
|---|---|---|
| .radius--none | Removes border radius | |
| .radius--sm | Applies small radius (4px) | |
| .radius--md | Applies medium radius (6px) | |
| .radius--lg | Applies large radius (12px) | |
| .radius--xl | Applies extra large radius (24px) | |
| .radius--pill | Applies fully rounded pill radius (999px) | |
| .rounded | Alias for fully rounded pill radius |
Reset utilities remove default browser spacing and styling.
| Utility Class | Description: |
|---|---|
| .reset--padding | Removes padding from an element. |
| .reset--margin | Removes margin from an element. |
| .reset--indent | Removes text indentation. |
| .reset--bullet | Removes bullet points from lists. |
| .reset--styling | Resets all default styling for an element. |
Display utilities control how elements are rendered in the layout.
| Utility Class: | Description: |
|---|---|
| .inline | Displays an element inline. |
| .block | Displays an element as a block. |
| .show | Forces an element to be visible. |
| .hidden | Hides an element while keeping its space in the layout. |
| .hide | Completely removes an element from the layout. |
Visibility utilities control whether elements are visible while maintaining or removing layout space.
| Utility Class: | Description: |
|---|---|
| .invisible | Hides an element while keeping it accessible to screen readers. |
| .visible | Makes an element explicitly visible. |
Responsive visibility utilities control element visibility across breakpoints.
Utilities should be used for small, reusable styling adjustments. Avoid overusing utilities for complex layouts where components or custom CSS are more appropriate. Combine utilities where necessary to reduce duplication and maintain consistency.