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.

Utilities

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.

---
layout: iframe
permalink: utilities/html/visibility
---
<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-name width
xsmall-screen 320px
small-screen 481px
medium-screen 768px
small-desktop-screen 1008px
large-screen 1201px