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]

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.