Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Visibility

Use the visibility utility classes to show and hide elements.

Visibility

The visibility property can be used to hide an element while leaving the space where it would have been. MDN

There may be times when you want to hide an element, but still want its text to be read by a screen reader. The ds-u-visibility--screen-reader class will hide the content visually, but provide the content to screen readers.

The ds-u-visibility--hidden-print class uses a print media query to hide content during printing, but otherwise display it normally.

Format: .ds-u-visibility--[hidden|visible|screen-reader|hidden-print]

Responsive format: .ds-u-[breakpoint]-visibility--[hidden|visible]

.ds-u-visibility--visible
I'm visible and take up space
.ds-u-visibility--hidden
I'm hidden and take up space
.ds-u-visibility--screen-reader
I'm visible to screen readers only and don't take up space
.ds-u-visibility--hidden-print
I'm visible and take up space except when printing

Responsive visibility

Use a breakpoint prefix to show/hide content at specific breakpoints.

A breakpoint prefix is supported on all of the utility classes mentioned above, except for .ds-u-visibility--screen-reader and .ds-u-visibility--hidden-print.

Scale: 0.22