Foundations

Display

Display utilities control how elements render in the document flow. Use them to show, hide, or change the display type of any element.

Display classes

.nys-display-block

.nys-display-inline

.nys-display-inline-block

.nys-display-flex

.nys-display-inline-flex

<div class="nys-display-block">Block element</div>
<div class="nys-display-inline">Inline element</div>
<div class="nys-display-inline-block">Inline-block element</div>
<div class="nys-display-flex">Flex container</div>
<div class="nys-display-inline-flex">Inline flex container</div>

All display classes

Class	CSS value
`.nys-display-block`	`display: block`
`.nys-display-flex`	`display: flex`
`.nys-display-inline`	`display: inline`
`.nys-display-inline-block`	`display: inline-block`
`.nys-display-inline-flex`	`display: inline-flex`
`.nys-display-none`	`display: none`
`.nys-display-table`	`display: table`
`.nys-display-table-cell`	`display: table-cell`
`.nys-display-table-row`	`display: table-row`

Hiding elements

Use .nys-display-none to hide an element entirely. Combine with responsive prefixes to hide elements at specific breakpoints — for example, hiding a sidebar on mobile.

Visible

Hidden

Visible

<!-- Hide on all screen sizes -->
<div class="nys-display-none">This content is hidden</div>
<!-- Hide only on desktop and wider -->
<div class="nys-desktop:nys-display-none">Hidden on desktop</div>
<!-- Show as flex only on tablet and wider -->
<div class="nys-display-none nys-tablet:nys-display-flex">
Visible on tablet+
</div>

Table display

Use table display utilities to create table-like layouts without using <table> elements.

.nys-display-table-cell

<div class="nys-display-table">
  <div class="nys-display-table-row">
    <div class="nys-display-table-cell">Cell 1</div>
    <div class="nys-display-table-cell">Cell 2</div>
    <div class="nys-display-table-cell">Cell 3</div>
  </div>
</div>

Responsive variants

All display utilities support responsive prefixes. See Responsive Utilities for breakpoint details.

<div class="nys-display-none nys-tablet:nys-display-block">
  Visible on tablet and wider
</div>

Edit this page on GitHub (Permissions required)

Last updated: May 20, 2026