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.

Examples#

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.

I am hidden from sight

<div class="slds-assistive-text">I am hidden from sight</div>

Collapsed / Expanded#

The .slds-is-collapsed class hides the elements contained inside by controlling the height and overflow properties. Use the .slds-is-expanded class to show the elements contained inside in their normal expanded state.

I am collapsed

I am a child inside a collapsed element

I am expanded

I am a child inside an expanded element

<div class="demo-only">
  <div class="slds-is-collapsed">
    <h3>I am collapsed</h3>
    <p>I am a child inside a collapsed element</p>

Hidden / Visible#

You can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the slds-hidden class. To make it visible again, use the slds-visible class.

Note that .slds-hidden and any of the .slds-visible utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.

I am hidden

I am visible

<div class="demo-only">
  <div class="slds-hidden">I am hidden</div>
  <div class="slds-visible">I am visible</div>
</div>

Hide / Show#

To hide any type of element from view and from screen readers, use the .slds-hide class. Once hidden, you can display the content by using JavaScript to swap .slds-hide with .slds-show; This class will set the display property to block. If you need to display your hidden element as inline or inline-block, you can use the .slds-show_inline or .slds-show_inline-block classes, respectively.

Note that .slds-hide and any of the .slds-show-* utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.

I am hidden

I am shown as a block

I am shown as an inline-block

<div class="demo-only">
  <div class="slds-hide">I am hidden</div>
  <div class="slds-show">I am shown as a block</div>
  <div class="slds-show_inline-block">I am shown as an inline-block</div>

Transition Hide / Show#

To slowly transition an element from hiding and showing, use the slds-transition-hide and slds-transition-show classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional transition property to control the opacity change.

I have zero opacity

I have 100% opacity

<div class="demo-only">
  <div class="slds-transition-hide">I have zero opacity</div>
  <div class="slds-transition-show">I have 100% opacity</div>
</div>

Responsive#

Responsive visibility classes will hide content on specific breakpoints. slds-show_[breakpoint] renders display: none when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. slds-hide_[breakpoint] does the opposite by rendering display: none when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller.

Class Name	Less than 320px	X-Small (>= 320px)	Small (>= 480px)	Medium (>= 768px)	Large (>= 1024px)	X-Large (>= 1280px)
`.slds-hide_x-small`	Show	Hide	Hide	Hide	Hide	Hide
`.slds-show_x-small`	Hide	Show	Show	Show	Show	Show
`.slds-hide_small`	Show	Show	Hide	Hide	Hide	Hide
`.slds-show_small`	Hide	Hide	Show	Show	Show	Show
`.slds-hide_medium`	Show	Show	Show	Hide	Hide	Hide
`.slds-show_medium`	Hide	Hide	Hide	Show	Show	Show
`.slds-hide_large`	Show	Show	Show	Show	Hide	Hide
`.slds-show_large`	Hide	Hide	Hide	Hide	Show	Show
`.slds-hide_x-large`	Show	Show	Show	Show	Show	Hide
`.slds-show_x-large`	Hide	Hide	Hide	Hide	Hide	Show

Hides on 319px and down

Hides on 320px and up

Hides on 479px and down

Hides on 480px and up

Hides on 767px and down

Hides on 768px and up

Hides on 1023px and down

Hides on 1024px and up

Hides on 1279px and down

Hides on 1280px and up

<div class="demo-only demo-visibility">
  <div class="slds-show_x-small">Hides on 319px and down</div>
  <div class="slds-hide_x-small">Hides on 320px and up</div>
  <div class="slds-show_small">Hides on 479px and down</div>

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-assistive-text`
Summary	Hides an element yet enables a screen reader to read the element that is hidden
Restrict	`*`
Modifier	True

Selector	`.slds-hide`
Summary	Hides an element from the page by setting display propery to `none`
Restrict	`*`
Modifier	True

Selector	`.slds-show`
Summary	Shows the element by setting display property to `block`
Restrict	`*`
Modifier	True

Selector	`.slds-show_inline-block`
Summary	Shows the element by setting display to `inline-block`
Restrict	`*`
Modifier	True

Selector	`.slds-show_inline`
Summary	Shows the element by setting display to `inline`
Restrict	`*`
Modifier	True

Selector	`.transition-hide`
Summary	Hides an element from the page by setting the opacity property set to `0`
Restrict	`*`
Modifier	True

Selector	`.transition-show`
Summary	Shows the element using the opacity property set to `1`
Restrict	`*`
Modifier	True

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	`*`
Modifier	True

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	`*`
Modifier	True

Visibility Utility Release Notes

Sections