Visibility

Visibility

Specify the visibility of elements by showing and hiding. It's best practice to swap the hide and show classes rather than use them concurrently, as this will cause issues.

Visibility: Assistive Text

Preview

Assistive Text

Use the slds-assistive-text class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text.

Overview of CSS Classes

Selector.slds-assistive-text
Summary

Hides an element yet enables a screen reader to read the element that is hidden

Restrict*
ModifierTrue
Selector.slds-hide
Summary

Hides an element from the page by setting display propery to none

Restrict*
ModifierTrue
Selector.slds-show
Summary

Shows the element by setting display property to block

Restrict*
ModifierTrue
Selector.slds-show_inline-block
Summary

Shows the element by setting display to inline-block

Restrict*
ModifierTrue
Selector.slds-show_inline
Summary

Shows the element by setting display to inline

Restrict*
ModifierTrue
Selector.transition-hide
Summary

Hides an element from the page by setting the opacity property set to 0

Restrict*
ModifierTrue
Selector.transition-show
Summary

Shows the element using the opacity property set to 1

Restrict*
ModifierTrue
Selector.slds-hide_*
Summary

Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.

Restrict*
ModifierTrue
Selector.slds-show_*
Summary

Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large.

Restrict*
ModifierTrue