Responsive Utilities
Used to hide content based on the current breakpoint.
Add u-hidden-{up|down}-{breakpoint} to hide an element based on the brakpoint specified.
Breakpoints are based on Bootstrap grid breakpoints, found at settings/_settings.global.scss.
Hide & Up
Hide from specified breakpoint and up.
| Utility / Breakpoint | Mobile | Tablet | Desktop | Wide |
|---|---|---|---|---|
u-hidden-up@mobile |
Visible | Hidden | Hidden | Hidden |
u-hidden-up@tablet |
Visible | Visible | Hidden | Hidden |
u-hidden-up@desktop |
Visible | Visible | Visible | Hidden |
u-hidden-up@wide |
Visible | Visible | Visible | Hidden |
Hide & Down
Hide from specified breakpoint and down.
| Utility / Breakpoint | Mobile | Tablet | Desktop | Wide |
|---|---|---|---|---|
u-hidden-down@mobile |
Hidden | Visible | Visible | Visible |
u-hidden-down@tablet |
Hidden | Hidden | Visible | Visible |
u-hidden-down@desktop |
Hidden | Hidden | Hidden | Visible |
u-hidden-down@wide |
Hidden | Hidden | Hidden | Visible |