Foundation

Visibilty

Change the visibility characteristics of an element

.vads-u-visibility--hidden

Hides an element while leaving the space where it would have been

.vads-u-visibility--visible

Makes a hidden element visible. DOES NOT override screen-reader visibility utility.

.vads-u-visibility--screen-reader

Hides content visually but allows access to screen readers

Guidance

If you want to hide an element visually and from screen readers as well as discard the space where it would have been, consider using a display utility instead.

Responsive prefixes

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Items made visible

Visible on small-screen breakpoint and larger

Visible on medium-screen breakpoint and larger

Visible on small-desktop-screen breakpoint and larger

Visible on large-screen breakpoint and larger

Items made hidden

Invisible on small-screen breakpoint and larger

Invisible on medium-screen breakpoint and larger

Invisible on small-desktop-screen breakpoint and larger

Invisible on large-screen and larger

Show HTML

<div class="vads-l-row">
  <div class="vads-l-col--6 vads-u-padding--2">
    <h4>Items made visible</h4>
    <div class="vads-u-visibility--hidden small-screen:vads-u-visibility--visible">
      Visible on <strong>small-screen</strong> breakpoint and larger
    </div>
    <div class="vads-u-visibility--hidden medium-screen:vads-u-visibility--visible">
      Visible on <strong>medium-screen</strong> breakpoint and larger
    </div>
    <div class="vads-u-visibility--hidden small-desktop-screen:vads-u-visibility--visible">
      Visible on <strong>small-desktop-screen</strong> breakpoint and larger
    </div>
    <div class="vads-u-visibility--hidden large-screen:vads-u-visibility--visible">
      Visible on <strong>large-screen</strong> breakpoint and larger
    </div>
  </div>
  <div class="vads-l-col--6 vads-u-padding--2">
    <h4>Items made hidden</h4>
    <div class="small-screen:vads-u-visibility--hidden">
      Invisible on <strong>small-screen</strong> breakpoint and larger
    </div>
    <div class="medium-screen:vads-u-visibility--hidden">
      Invisible on <strong>medium-screen</strong> breakpoint and larger
    </div>
    <div class="small-desktop-screen:vads-u-visibility--hidden">
      Invisible on <strong>small-desktop-screen</strong> breakpoint and larger
    </div>
    <div class="large-screen:vads-u-visibility--hidden">
      Invisible on <strong>large-screen</strong> and larger
    </div>
  </div>
</div>

Example

<div class="vads-u-visibility--hidden large-screen:vads-u-visibility--visible">