Skip to main content

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