Visibility
Responsive display utilities to show or hide elements at specific breakpoints.
Basic
This is always hidden
This is always visible
<p class="ug-hidden">This is always hidden</p>
<p>This is always visible</p>Responsive: Hide Above Breakpoint
Use .ug-hidden--bp-up to hide an element above a breakpoint.
Visible on mobile, hidden on tablet and up
<p class="ug-hidden--md-up" style="background:#e8e5e0;padding:0.5rem">
Visible on mobile, hidden on tablet and up
</p>| Class | Hidden when |
|---|---|
.ug-hidden--sm-up | ≥ 480px |
.ug-hidden--md-up | ≥ 768px |
.ug-hidden--lg-up | ≥ 1024px |
.ug-hidden--xl-up | ≥ 1280px |
Responsive: Hide Below Breakpoint
Use .ug-hidden--bp-down to hide an element below a breakpoint.
Hidden on mobile, visible on tablet and up
<p class="ug-hidden--md-down" style="background:#e8e5e0;padding:0.5rem">
Hidden on mobile, visible on tablet and up
</p>| Class | Hidden when |
|---|---|
.ug-hidden--sm-down | < 480px |
.ug-hidden--md-down | < 768px |
.ug-hidden--lg-down | < 1024px |
.ug-hidden--xl-down | < 1280px |
Other Utilities
| Class | Description |
|---|---|
.ug-hidden | Always hidden (display: none) |
.ug-full-width | Span all grid columns (grid-column: 1 / -1) |
.ug-align--start|center|end|stretch | Vertical alignment (align-self) |
.ug-justify--start|center|end|stretch | Horizontal alignment (justify-self) |
.ug-place--center | Center both axes |