Visibility

Utility classes to hide elements when viewport is above or below a given breakpoint.

• The up classes hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-up hides an element on medium, large, and extra-large viewports.
• The down classes hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-down hides an element on extra-small, small, and medium viewports.
• You can combine one up class with one down class to show an element only on a given interval of screen sizes. For example, .ui-hidden--small--down.ui-hidden--large--up shows the element only on medium and large viewports.

Syntax

The BEM class syntax is the following:

Available Classes

Examples

Resize your browser or load on different devices to test the responsive utility classes.

Current breakpoint is: xsmall small medium large xlarge xxlarge

<!-- down -->
<div class="ui-hidden--xsmall--down">...</div>
<div class="ui-hidden--small--down">...</div>
<div class="ui-hidden--medium--down">...</div>
<div class="ui-hidden--large--down">...</div>
<div class="ui-hidden--xlarge--down">...</div>
<div class="ui-hidden--xxlarge--down">...</div>

<!-- up -->
<div class="ui-hidden--xsmall--up">...</div>
<div class="ui-hidden--small--up">...</div>
<div class="ui-hidden--medium--up">...</div>
<div class="ui-hidden--large--up">...</div>
<div class="ui-hidden--xlarge--up">...</div>
<div class="ui-hidden--xxlarge--up">...</div>