Components › Utilities

Visibility

You can specify how to show and hide elements.

Hide ShowHide Showdev ready

Preview

Code

<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>

To hide an element and have it not take up space on the page, use the .slds-hide class. You can toggle the state with JavaScript to show the element at a later time.

To make the element visible again, use .slds-show.

If you need to make the hidden element visible again in an inline-block state, use .slds-show--inline-block.

Hidden VisibleHidden Visibledev ready

Preview

Code

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

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.

Transition Hide ShowTransition Hide Showprototype

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

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.

Collapsed ExpandedCollapsed Expandeddev ready

Preview

Code

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

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.

Assistive TextAssistive Textdev ready

Preview

Code

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

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.

ResponsiveResponsivedev ready

Preview

Code

<div class="slds-x-small-show">Show on 320px and up</div>
<div class="slds-x-small-show-only">Show only between 320px and 479px</div>
<div class="slds-max-x-small-hide">Hide on 319px and down</div>
<div class="slds-small-show">Show on 480px and up</div>
<div class="slds-small-show-only">Show only between 480px and 767px</div>
<div class="slds-max-small-hide">Hide on 479px and down</div>
<div class="slds-medium-show">Show on 768px and up</div>
<div class="slds-medium-show-only">Show only between 768px and 1023px</div>
<div class="slds-max-medium-hide">Hide on 1023px and down</div>
<div class="slds-large-show">Show on 1024px and up</div>

Responsive visibility classes will show and hide content on specific breakpoints. By default, -show renders as display: block;, but you may pass through a display property of your choice by adding a modifier to the end of the classname. For example, you may need to render an element as display: inline-block at a medium breakpoint, adding --inline-block to the end of .slds-medium-show to produce the class of .slds-medium-show--inline-block will give you that outcome.

Class Name Less than 320px X-Small (320px) Small (480px) Medium (768px) Large (1024px) Greater than 1024px
.slds-x-small-show Show Show Show Show Show
.slds-small-show Show Show Show Show
.slds-medium-show Show Show Show
.slds-large-show Show Show
.slds-x-small-show-only Show
.slds-small-show-only Show
.slds-medium-show-only Show
.slds-max-x-small-hide Initial Initial Initial Initial Initial
.slds-max-small-hide Initial Initial Initial Initial
.slds-max-medium-hide Initial Initial Initial

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-hide
Applied to:

any element

Outcome:

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

Required:

No, optional element or modifier

Comments:

An element hidden with this class will take up no space on the page and will not be announced by screenreaders.

.slds-show
Applied to:

the hidden element

Outcome:

Shows the element by setting display property to block

Required:

No, optional element or modifier

Comments:

This is toggled on the element. .slds-hide class is removed and .slds-show is added.

.slds-show--inline-block
Applied to:

the hidden element

Outcome:

Shows the element by setting display to inline-block

Required:

No, optional element or modifier

Comments:

This is toggled on the element. .slds-hide class is removed and .slds-show--inline-block is added.

.slds-hidden
Applied to:

any element

Outcome:

Hides an element from the page by setting the visibility property to hidden

Required:

No, optional element or modifier

Comments:

An element hidden with this class will reserve the normal space on the page and will not be announced by screenreaders.

.slds-visible
Applied to:

the hidden element

Outcome:

Shows the element by setting the visibility property to visible

Required:

No, optional element or modifier

Comments:

This is toggled on the element. .slds-hidden class is removed and .slds-visible is added.

.slds-transition-hide
Applied to:

any element

Outcome:

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

Required:

No, optional element or modifier

Comments:

This works like the .slds-hidden class and reserves the space but allows you to add the transition property to transition the speed that it is shown or hidden.

.slds-transition-show
Applied to:

the hidden element

Outcome:

Shows the element using the opacity property set to 1

Required:

No, optional element or modifier

Comments:

This is toggled on the element. .slds-transition-hide class is removed and .slds-transition-show is added.

.slds-is-collapsed
Applied to:

Any containing element

Outcome:

Hides elements inside a parent

Required:

No, optional element or modifier

Comments:

This hides the elements contained inside the container by controlling the height and overflow properties.

.slds-is-expanded
Applied to:

the collapsed element

Outcome:

Shows the elements inside the parent

Required:

No, optional element or modifier

Comments:

--

.slds-collapsed
Deprecated
Applied to:

Any containing element

Outcome:

Hides elements inside a parent

Required:

No, optional element or modifier

Comments:

This hides the elements contained inside the container by controlling the height and overflow properties.

.slds-expanded
Deprecated
Applied to:

the collapsed element

Outcome:

Shows the elements inside the parent

Required:

No, optional element or modifier

Comments:

--

.slds-assistive-text
Applied to:

any element

Outcome:

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

Required:

No, optional element or modifier

Comments:

This should be used over other methods when you don't want to hide from screenreaders

.slds-assistive-text--focus
Applied to:

.slds-assistive-text

Outcome:

Enables .slds-assistive-text to become visible on focus

Required:

No, optional element or modifier

Comments:

--