Design System

Display Utilities

display-utilities



Adjust the display property on any element. To adjust the property at specific breakpoints only, use the breakpoint-specific modifier classes.

<div className="-block">Display block</div>
<div className="-inline-block">Display inline-block</div>
<div className="-none">Display none</div>

Optional classes:

  • -block
  • -block--xs
  • -block--sm
  • -block--md
  • -block--lg
  • -block--xl
  • -inline-block
  • -inline-block--xs
  • -inline-block--sm
  • -inline-block--md
  • -inline-block--lg
  • -inline-block--xl
  • -none
  • -none--xs
  • -none--sm
  • -none--md
  • -none--lg
  • -none--xl
  • -vis-hidden
  • -sr-only
  • -flex
  • -flex--xs
  • -flex--sm
  • -flex--md
  • -flex--lg
  • -flex--xl