Visibility

Assistive Text

Collapsed / Expanded

Hidden / Visible

Hide / Show

Transition Hide / Show

Responsive

.slds-assistive-text

.slds-assistive-text — Hides an element yet enables a screen reader to read the element that is hidden

.slds-hide

.slds-hide — Hides an element from the page by setting display propery to `none`

.slds-show

.slds-show — Shows the element by setting display property to `block`

.slds-show_inline-block

.slds-show_inline-block — Shows the element by setting display to `inline-block`

.slds-show_inline

.slds-show_inline — Shows the element by setting display to `inline`

.transition-hide

.transition-hide — Hides an element from the page by setting the opacity property set to `0`

.transition-show

.transition-show — Shows the element using the opacity property set to `1`

.slds-hide_*

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

.slds-show_*

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