Visibility
Hide content in a responsive and accessible way
Overview #
Use the visibility utilities to hide content in a responsive and accessible way.
Examples #
<div class="rvt-display-none">This element is hidden</div>
<p class="rvt-ts-xl">This text is visible. <span class="rvt-sr-only">This text is visually hidden but still accessible to screen readers.</span></p>
<div class="rvt-input-group">
<label for="search" class="rvt-sr-only">Search</label>
<input class="rvt-input-group__input rvt-text-input" type="text" id="search">
<div class="rvt-input-group__append">
<button class="rvt-button">Search</button>
</div>
</div>
<dl class="rvt-list-description">
<dt>.rvt-hide-sm-down</dt>
<dd class="rvt-hide-sm-down">Hidden at <strong>small breakpoint</strong> down</dd>
<dt>.rvt-hide-md-down</dt>
<dd class="rvt-hide-md-down">Hidden at <strong>medium breakpoint</strong> down</dd>
<dt>.rvt-hide-lg-down</dt>
<dd class="rvt-hide-lg-down">Hidden at <strong>large breakpoint</strong> down</dd>
<dt>.rvt-hide-xl-down</dt>
<dd class="rvt-hide-xl-down">Hidden at <strong>extra large breakpoint</strong> down</dd>
<dt>.rvt-hide-xxl-down</dt>
<dd class="rvt-hide-xxl-down">Hidden at <strong>extra extra large breakpoint</strong> down</dd>
</dl>
<dl class="rvt-list-description">
<dt>.rvt-hide-sm-up</dt>
<dd class="rvt-hide-sm-up">Hidden at <strong>small breakpoint</strong> up</dd>
<dt>.rvt-hide-md-up</dt>
<dd class="rvt-hide-md-up">Hidden at <strong>medium breakpoint</strong> up</dd>
<dt>.rvt-hide-lg-up</dt>
<dd class="rvt-hide-lg-up">Hidden at <strong>large breakpoint</strong> up</dd>
<dt>.rvt-hide-xl-up</dt>
<dd class="rvt-hide-xl-up">Hidden at <strong>extra large breakpoint</strong> up</dd>
<dt>.rvt-hide-xxl-up</dt>
<dd class="rvt-hide-xxl-up">Hidden at <strong>extra extra large breakpoint</strong> up</dd>
</dl>
Usage #
To hide an element, use the .rvt-display-none
utility class.
Use the .rvt-sr-only
utility class to visually hide content but still leave it accessible to screen readers.
Hide content on smaller screens #
The rvt-hide-*-down
responsive display utilities start out visible on any screen size above the largest breakpoint (1400px) and will hide content as the screen size becomes smaller.
.rvt-hide-sm-down
.rvt-hide-md-down
.rvt-hide-lg-down
.rvt-hide-xl-down
.rvt-hide-xxl-down
Hide content on larger screens #
The rvt-hide-*-up
responsive display utilities start out visible on small screens and will hide content as the screen size becomes larger.
.rvt-hide-sm-up
.rvt-hide-md-up
.rvt-hide-lg-up
.rvt-hide-xl-up
.rvt-hide-xxl-up