An official website of the United States government
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.
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.
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 mobile-lg breakpoint and larger
Visible on medium-screen breakpoint and larger
Visible on desktop breakpoint and larger
Visible on desktop-lg breakpoint and larger
Items made hidden
Invisible on mobile breakpoint and larger
Invisible on medium-screen breakpoint and larger
Invisible on desktop breakpoint and larger
Invisible on desktop-lg and larger
<divclass="vads-grid-row"><divclass="vads-grid-col-6 vads-u-padding--2"><h4>Items made visible</h4><divclass="vads-u-visibility--hidden mobile-lg:vads-u-visibility--visible">
Visible on <strong>mobile-lg</strong> breakpoint and larger
</div><divclass="vads-u-visibility--hidden tablet:vads-u-visibility--visible">
Visible on <strong>medium-screen</strong> breakpoint and larger
</div><divclass="vads-u-visibility--hidden desktop:vads-u-visibility--visible">
Visible on <strong>desktop</strong> breakpoint and larger
</div><divclass="vads-u-visibility--hidden desktop-lg:vads-u-visibility--visible">
Visible on <strong>desktop-lg</strong> breakpoint and larger
</div></div><divclass="vads-grid-col-6 vads-u-padding--2"><h4>Items made hidden</h4><divclass="mobile-lg:vads-u-visibility--hidden">
Invisible on <strong>mobile</strong> breakpoint and larger
</div><divclass="tablet:vads-u-visibility--hidden">
Invisible on <strong>medium-screen</strong> breakpoint and larger
</div><divclass="desktop:vads-u-visibility--hidden">
Invisible on <strong>desktop</strong> breakpoint and larger
</div><divclass="desktop-lg:vads-u-visibility--hidden">
Invisible on <strong>desktop-lg</strong> and larger
</div></div></div>