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

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

Example

<div class="vads-u-visibility--hidden desktop-lg:vads-u-visibility--visible">

VADS Breakpoint Sass Variable USWDS Breakpoint Custom Property Width

$xsmall-screen --mobile 320px

$small-screen --mobile-lg 481px

--tablet 640px

$medium-screen --medium-screen 768px

$small-desktop-screen --desktop 1024px