# Visibility

Note: Requires @visibleHidden: true; be set at compile time and only provided for compatibility with older installs. The display classes should be used for new builds.

The visibility-* and hidden-* classes allow elements to be hidden and exposed based on the device width.

## Hiding Elements

The visible and hidden classes specify the device widths at which elements are hidden from view or exposed to the site user.

    <div class="row">
    	<div class="span-s6">visible-t / hidden-t</div>
    	<div class="span-s6 result hidden-t">hidden-t</div>
    	<div class="span-s6 result visible-t">visible-t</div>
    </div>
    <div class="row">
    	<div class="span-s6">visible-s / hidden-s</div>
    	<div class="span-s6 result hidden-s">hidden-s</div>
    	<div class="span-s6 result visible-s">visible-s</div>
    </div>
    <div class="row">
    	<div class="span-s6">visible-m / hidden-m</div>
    	<div class="span-s6 result hidden-m">hidden-m</div>
    	<div class="span-s6 result visible-m">visible-m</div>
    </div>
    <div class="row">
    	<div class="span-s6">visible-l / hidden-l</div>
    	<div class="span-s6 result hidden-l">hidden-l</div>
    	<div class="span-s6 result visible-l">visible-l</div>
    </div>

Top