Visibility

Hide content in a responsive and accessible way

Overview #

Use the visibility utilities to hide content in a responsive and accessible way.

Examples #

Choose an example

<div class="rvt-display-none">This element is hidden</div>

Open in new window Copy link to example

<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>

Open in new window Copy link to example

<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>

Open in new window Copy link to example

<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>

Open in new window Copy link to example

<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