Introduction
Utility classes can be used on any component and they are prefixed with has-. Consider using Tailwind CSS if you need additional utility classes.
Usages
Hide an element; can also be used with Responsive to hide elements on specific devices.
| Class | Style |
|---|---|
| has-invisible |
visibility: hidden;
|
| has-hidden |
display: none;
|
| has-hidden-light |
Applies display: none; in light theme.
|
| has-hidden-dark |
Applies display: none; in dark theme.
|
Add padding to any element; background color is an example and won't be visible in use.
| padding-top | has-top-padded | -small | -large | -big | -huge |
| padding-bottom | has-bottom-padded | -small | -large | -big | -huge |
| padding-left | has-start-padded | -small | -large | -big | -huge |
| padding-right | has-end-padded | -small | -large | -big | -huge |
| padding | has-padded | -small | -large | -big | -huge |
| padding-top padding-bottom |
has-vertically-padded | -small | -large | -big | -huge |
| padding-left padding-right |
has-horizontally-padded | -small | -large | -big | -huge |
| 1rem | 0.5rem | 1.5rem | 3rem | 4.5rem |
|---|
Padded element
Larger padded element
<div class="has-padded">Padded element</div>
<div class="has-padded-large">Larger padded element</div>Add margin to any element; classes also have -auto variants.
| margin-top | has-top-spaced | -small | -large | -big | -huge |
| margin-bottom | has-bottom-spaced | -small | -large | -big | -huge |
| margin-left | has-start-spaced | -small | -large | -big | -huge |
| margin-right | has-end-spaced | -small | -large | -big | -huge |
| margin | has-spaced | -small | -large | -big | -huge |
| margin-top margin-bottom |
has-vertically-spaced | -small | -large | -big | -huge |
| margin-left margin-right |
has-horizontally-spaced | -small | -large | -big | -huge |
| 1rem | 0.5rem | 1.5rem | 3rem | 4.5rem |
|---|
