Skip to main content

Design System

Display/Visibility

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--[VALUE]

Available display utilities:

  • ds-u-display--block
  • ds-u-display--inline-block
  • ds-u-display--flex
  • ds-u-display--none
Code snippet
<p class="ds-u-display--block ds-base--inverse ds-u-padding--2">ds-u-display--block</p>
<p class="ds-u-display--inline-block ds-base--inverse ds-u-padding--2">ds-u-display--inline-block</p>
<p class="ds-u-display--flex ds-base--inverse ds-u-padding--2">ds-u-display--flex</p>
<p class="ds-u-display--none ds-base--inverse ds-u-padding--2">ds-u-display--none</p>

Visibility

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

Format: ds-u-visibility--[VALUE]

Available visibility utilities:

  • ds-u-visibility--hidden
  • ds-u-visibility--visible
  • ds-u-visibility--screen-reader

Accessibility

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.

Code snippet
<span class="ds-u-visibility--hidden">I'm hidden</span>
<span class="ds-u-visibility--screen-reader">I'm visible to screen readers only</span>
<span class="ds-u-visibility--visible">I'm visible</span>

Toggling visibility by breakpoint

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.

New tab
Code snippet

  <div class="ds-u-sm-display--none ds-u-color--muted">
    Hidden on sm screens and larger
  </div>
  <div class="ds-u-sm-display--block">
    Displayed as block on sm screens and larger
  </div>
  <div class="ds-u-sm-visibility--hidden ds-u-color--muted">
    Invisible on sm screens and larger
  </div>
  <div class="ds-u-sm-visibility--visible">
    Visible on sm screens and larger
  </div>

  <div class="ds-u-md-display--none ds-u-color--muted">
    Hidden on md screens and larger
  </div>
  <div class="ds-u-md-display--block">
    Displayed as block on md screens and larger
  </div>
  <div class="ds-u-md-visibility--hidden ds-u-color--muted">
    Invisible on md screens and larger
  </div>
  <div class="ds-u-md-visibility--visible">
    Visible on md screens and larger
  </div>

  <div class="ds-u-lg-display--none ds-u-color--muted">
    Hidden on lg screens and larger
  </div>
  <div class="ds-u-lg-display--block">
    Displayed as block on lg screens and larger
  </div>
  <div class="ds-u-lg-visibility--hidden ds-u-color--muted">
    Invisible on lg screens and larger
  </div>
  <div class="ds-u-lg-visibility--visible">
    Visible on lg screens and larger
  </div>

  <div class="ds-u-xl-display--none ds-u-color--muted">
    Hidden on xl screens and larger
  </div>
  <div class="ds-u-xl-display--block">
    Displayed as block on xl screens and larger
  </div>
  <div class="ds-u-xl-visibility--hidden ds-u-color--muted">
    Invisible on xl screens and larger
  </div>
  <div class="ds-u-xl-visibility--visible">
    Visible on xl screens and larger
  </div>