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
.