Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Foundation

Visibilty

Change the visibility characteristics of an element

Visibility

CSS property: visibility

.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-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">
Breakpoint sass variable Width
$xsmall-screen 320px
$small-screen 481px
$medium-screen 768px
$small-desktop-screen 1008px
$large-screen 1201px

Read more about breakpoints.

Edit this page in GitHub (Permissions required)
Last updated: Apr 29, 2022