Visibility

CSS file

Use the display and visibility utility classes to show and hide elements.

Display

sba- u- display--[VALUE]
Namespace
Prefix
BEM syntax

Available display utilities:

  • sba-u-display--block
  • sba-u-display--inline-block
  • sba-u-display--flex
  • sba-u-display--none - Hides content from all users. Alternatively, you also use the HTML5 hidden attribute.

Visibility

sba- u- visibility--[VALUE]
Namespace
Prefix
BEM syntax

Available visibility utilities

  • sba-u-visibility--hidden - Hides an element while leaving the space where it would have been.
  • sba-u-visibility--visible
  • sba-u-visibility--screen-reader

Accessibility

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

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 sba-u-visibility--screen-reader.

sba- u- lg- display--[VALUE]
Namespace
Prefix
Breakpoint
BEM syntax
sba- u- lg- visibility--[VALUE]
Namespace
Prefix
Breakpoint
BEM syntax