CMS Design System

Use the display and visibility utility classes to show and hide elements.

Display

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. — MDN

Format: .ds-u-display--[block|flex|inline|inline-block|none]

Responsive format: .ds-u-[breakpoint]-display--[block|flex|inline|inline-block|none]

.ds-u-display--block .ds-u-display--flex .ds-u-display--inline .ds-u-display--inline-block .ds-u-display--none

Code snippet

<div>
  <code
    class="ds-u-display--block ds-u-padding--1 ds-u-margin-bottom--2 utility-example"
  >
    <!-- -->
    .ds-u-display--block
    <!-- -->
  </code>
  <code
    class="ds-u-display--flex ds-u-padding--1 ds-u-margin-bottom--2 utility-example"
  >
    <!-- -->
    .ds-u-display--flex
    <!-- -->
  </code>
  <code
    class="ds-u-display--inline ds-u-padding--1 ds-u-margin-bottom--2 utility-example"
  >
    <!-- -->
    .ds-u-display--inline
    <!-- -->
  </code>
  <code
    class="ds-u-display--inline-block ds-u-padding--1 ds-u-margin-bottom--2 utility-example"
  >
    <!-- -->
    .ds-u-display--inline-block
    <!-- -->
  </code>
  <code class="ds-u-display--none ds-u-padding--1 utility-example">
    .ds-u-display--none
  </code>
</div>

Visibility

The visibility property can be used to hide an element while leaving the space where it would have been. — MDN

There may be times when you want to hide an element, but still want its text to be read by a screen reader. The ds-u-visibility--screen-reader class will hide the content visually, but provide the content to screen readers.

The ds-u-visibility--hidden-print class uses a print media query to hide content during printing, but otherwise display it normally.

Format: .ds-u-visibility--[hidden|visible|screen-reader|hidden-print]

Responsive format: .ds-u-[breakpoint]-visibility--[hidden|visible]

.ds-u-visibility--visible

I'm visible and take up space

.ds-u-visibility--hidden

I'm hidden and take up space

.ds-u-visibility--screen-reader

.ds-u-visibility--hidden-print

Code snippet

<div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-visibility--visible</code>
    <div class="utility-example">
      <span class="ds-u-padding--1 ds-u-visibility--visible">
        I&#x27;m visible and take up space
      </span>
    </div>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-visibility--hidden</code>
    <div class="utility-example">
      <span class="ds-u-padding--1 ds-u-visibility--hidden">
        I&#x27;m hidden and take up space
      </span>
    </div>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-visibility--screen-reader</code>
    <div class="utility-example" style="min-height: 2px">
      <span class="ds-u-padding--1 ds-u-visibility--screen-reader">
        I&#x27;m visible to screen readers only and don&#x27;t take up space
      </span>
    </div>
  </div>
  <div class="ds-u-margin-bottom--2">
    <code class="ds-u-margin-bottom--1">.ds-u-visibility--hidden-print</code>
    <div class="utility-example">
      <span class="ds-u-padding--1 ds-u-visibility--hidden-print">
        I&#x27;m visible and take up space except when printing
      </span>
    </div>
  </div>
</div>

Responsive visibility

Use a breakpoint prefix to show/hide content at specific breakpoints.

A breakpoint prefix is supported on all of the utility classes mentioned above, except for .ds-u-visibility--screen-reader and .ds-u-visibility--hidden-print.

Code snippet