Skip to main content
U.S. flag

An official website of the United States government

Latest release: Component Library: v51.1.0 released on Jun 25, 2025 | Guidance: Sprint 5 released on Jun 26, 2025 | Figma: Changelog

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 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

Example

<div class="vads-u-visibility--hidden desktop-lg:vads-u-visibility--visible">
Deprecated VADS Breakpoint Names USWDS Breakpoint Sass Variable USWDS Breakpoint Custom Property Width $xsmall-screen $mobile --mobile 320px $small-screen $mobile-lg --mobile-lg 481px $tablet --tablet 640px $medium-screen $medium-screen --medium-screen 768px $small-desktop-screen $desktop --desktop 1024px $large-screen $desktop-lg --desktop-lg 1201px

Read more about breakpoints.

Edit this page in GitHub (Permissions required)
Last updated: Mar 26, 2025