Visibility

Hide Show

<div class="joy-hide">I am hidden</div>
<div class="joy-show">I am shown as a block</div>
<div class="joy-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 .joy-hide.

Use .joy-show to make the element visible again.

To make a hidden inline-block element visibile again, use .joy-show--inline-block.

Hidden Visible

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

To hide an element and have it retain the space on the page from when it was visibile, use .joy-hidden.

Use .joy-visible to make the element visibile again.

Collapsed Expanded

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

The .joy-is-collapsed class hides the elements contained inside by controlling the height and overflow properties.

Use .joy-is-expanded to show the elements contained in their normal expanded state.

Assistive Text

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

Use the .joy-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.

Responsive

<div class="joy-x-small-show">Show on 320px and up</div>
<div class="joy-x-small-show-only">Show only between 320px and 560px</div>
<div class="joy-max-x-small-hide">Hide on 559px and down</div>
<div class="joy-small-show">Show on 560px and up</div>
<div class="joy-small-show-only">Show only between 560px and 767px</div>
<div class="joy-max-small-hide">Hide on 559px and down</div>
<div class="joy-medium-show">Show on 768px and up</div>
<div class="joy-medium-show-only">Show only between 768px and 1007px</div>
<div class="joy-max-medium-hide">Hide on 1007px and down</div>
<div class="joy-large-show">Show on 1008px 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 .joy-medium-show to produce the class of .joy-medium-show--inline-block will give you that outcome.