A series of utility classes that adjust the display property of a selector, with support for responsive modifiers.


npm install seed-display --save



seed-display provides a handful of utility classes that change the display CSS property of a selector. Below are all the utility classes and their affects.

All of the following classes support responsive modifiers.

Class Display Value
.u-d-initial initial
.u-d-none none
.u-d-block block
.u-d-inline inline
.u-d-inline-block inline-block


I'm hidden!
I'm inline!
I'm an inline!
I'm a block!
<div class="u-d-none">I'm hidden!</div>
<div class="u-d-inline">I'm inline!</div>
<div class="u-d-inline-block">I'm an inline!</div>
<div class="u-d-block">I'm a block!</div>

Showing and hiding

Combining the display classes with targeted responsive modifiers allows you to show/hide elements at desired viewport sizes.

If you’re on a desktop, resize your browser to see the example below in action.

I'm only visible until md viewports
I'm only visible at md viewports
<div class="u-d-none@md">I'm only visible until md viewports</div>
<div class="u-d-none u-d-block@md">I'm only visible at md viewports</div>

The first <div> becomes hidden at the md viewport. If the viewport is smaller than md, the display is unaffected by the utility class.

The second <div> is initially hidden, as specified by u-d-none. It only becomes visible at the md viewport size.


Below are the default Sass configuration variables for seed-display. The variables can be found in the pack’s _config.scss file.

// Namespaces
$seed-display-namespace: "u-d" !default;

// Displays
$seed-display: (
  initial: initial,
  none: none,
  block: block,
  inline: inline,
  inline-block: inline-block
) !default;