Display

Display utilities set how an element generates its box (display), whether it is painted (visibility), what happens to content that does not fit (overflow), and how long text is cut short. Each class is named after the value it sets: block is display: block, invisible is visibility: hidden.

How display works

• One class per value. block, inline, inline-block, contents, table, table-row and table-cell set display. There is no configuration map and no token.
• Hide and show. hide removes an element (display: none); show gives it back its natural display (display: revert).
• Layout containers. flex and grid also set display, but they belong to the Flex and Grid layout pages and their feature flags.
• Mobile first. Every display, visibility and overflow class has a responsive variant: hide@md, block@lg.

Group	Classes
Display	block, inline, inline-block, contents, table, table-row, table-cell
Layout containers	flex, grid, flex inline, grid inline
Hide and show	hide, show, hidden
Visibility	visible, invisible, collapse
Overflow	overflow-{hidden,visible,scroll,auto}, overflow-x-{hidden,scroll,auto}, overflow-y-{hidden,scroll,auto}
Truncation	truncate, truncate-2 to truncate-5, overflow-label

Display values

block block

inline-block inline-block

inline

inline

HTML

<div class="space-y-3">
  <div>
    <span class="block p-2 bg-brand-subtle rounded">block</span>
    <span class="block p-2 mt-1 bg-brand-subtle rounded">block</span>
  </div>
  <div>
    <span class="inline-block w-24 p-2 bg-alternate rounded">inline-block</span>
    <span class="inline-block w-24 p-2 bg-alternate rounded">inline-block</span>
  </div>
  <div>
    <div class="inline p-2 bg-surface border rounded">inline</div>
    <div class="inline p-2 bg-surface border rounded">inline</div>
  </div>
</div>

SCSS

.thumbnail {
  @include apply(block);
}
.badge {
  @include apply(inline-block);
}

• block starts on a new line and takes the full width. Width, height and vertical margin apply.
• inline flows with text. Width and height do not apply.
• inline-block flows with text but accepts width, height and padding like a block.

Contents

contents removes the element’s own box, so its children take part in the parent’s layout as if the wrapper were not there. It is useful for a wrapper element that must exist in the markup, such as a fieldset or a component root, inside a flex or grid container.

1

2 (inside .contents)

3 (inside .contents)

<div class="grid cols-3 gap-2">
  <div class="p-2 bg-brand-subtle rounded">1</div>
  <div class="contents">
    <div class="p-2 bg-alternate rounded">2 (inside .contents)</div>
    <div class="p-2 bg-alternate rounded">3 (inside .contents)</div>
  </div>
</div>

Caution

display: contents can remove an element’s role from the accessibility tree in some browsers. Do not put it on buttons, links, lists, tables or landmarks; use it on neutral wrappers such as div.

Table display

table, table-row and table-cell give non-table elements table layout. Use real table markup for tabular data; these classes are for layout that needs table behaviour, such as cells of equal height in a row.

Short

A cell with more text that wraps onto several lines and keeps the row height

<div class="table w-full">
  <div class="table-row">
    <div class="table-cell p-2 border">Short</div>
    <div class="table-cell p-2 border">A cell with more text that wraps onto several lines and keeps the row height</div>
  </div>
</div>

Hide and show

hide sets display: none. The element is not painted, takes no space and is removed from the accessibility tree, so screen readers do not announce it.

show sets display: revert, which restores the element’s natural display: block for a div, inline for a span, table for a table. Use it to bring back an element that is hidden at another breakpoint, without choosing a display value yourself.

Class	Declaration
hide	display: none
show	display: revert
hidden	display: none !important

hidden is the forced form of hide: !important wins over every display class, including responsive variants. Use it for an element that must stay hidden whatever else is on it; use hide when a responsive class should be able to show it again.

Responsive hide and show

Combine a base class with a responsive variant. Variants apply from their breakpoint upwards.

Resize the window to see each line appear or disappear

hide show@md: visible from md upwards

hide@md: visible below md only

hide show@lg: visible from lg upwards

HTML

<div class="space-y-2">
  <div class="hide show@md p-2 bg-brand-subtle rounded">hide show@md: visible from md upwards</div>
  <div class="hide@md p-2 bg-alternate rounded">hide@md: visible below md only</div>
  <div class="hide show@lg p-2 bg-surface border rounded">hide show@lg: visible from lg upwards</div>
</div>

SCSS

.desktop-nav {
  @include apply(hide, show md);
}
.mobile-nav {
  @include apply(hide md);
}

show restores the natural display, so it fits most elements. When the element needs a specific display at the larger size, use that class instead of show: hide flex@md hides a toolbar on small screens and makes it a flex container from md.

Suffix	Media query
@xs	@media (min-width: 480px)
@sm	@media (min-width: 640px)
@md	@media (min-width: 768px)
@lg	@media (min-width: 1024px)
@xl	@media (min-width: 1280px)
@2xl	@media (min-width: 1536px)

The hidden attribute

The HTML hidden attribute is not a NuvoUI class. Any display class on the same element overrides it, because author styles win over the browser’s default [hidden] { display: none }. Use the hide class, or avoid display classes on elements you toggle with hidden.

Screen reader only

sr-only hides an element visually but keeps it in the accessibility tree, so screen readers still announce it. Use it for labels that the visual design shows another way, such as an icon button.

X Close dialog

<button type="button">
  <span aria-hidden="true">X</span>
  <span class="sr-only">Close dialog</span>
</button>

sr-only is not a utility class: it lives in the base layer (@layer base), so it follows the base feature flag, not displays, and it is emitted even when $generate-utility-classes is false. Every declaration carries !important so a utility class on the same element cannot reveal it by accident.

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

With $feature-flags: ("base": false) there is no sr-only class; write your own with the declarations above.

Visibility

invisible sets visibility: hidden: the element keeps its space in the layout but is not painted and is not announced. visible restores it. Compare it with hide, which also removes the space.

One

Two

Three

HTML

<div class="flex gap-2">
  <div class="p-3 bg-brand-subtle rounded">One</div>
  <div class="invisible p-3 bg-brand-subtle rounded">Two</div>
  <div class="p-3 bg-brand-subtle rounded">Three</div>
</div>

SCSS

.row-actions {
  @include apply(invisible);
}
.row:hover .row-actions {
  @include apply(visible);
}

collapse sets visibility: collapse. On table rows and columns it removes them without recalculating column widths; on other elements it behaves like invisible.

Overflow

Overflow classes control content that is larger than its box. overflow-* sets both axes; overflow-x-* and overflow-y-* set one axis.

Value	Effect
visible	Content spills outside the box (the default)
hidden	Content is clipped; no scrollbar
scroll	Content is clipped; scrollbars are always shown
auto	Content is clipped; scrollbars appear only when needed

overflow-hidden: the text below is clipped at the bottom edge of the box and cannot be scrolled. A box with a fixed height holds more text than it can show, so this sentence and the next one run past the bottom edge and show how the overflow setting treats them.

overflow-y-auto: the text below scrolls inside the box once it is taller than the box. A box with a fixed height holds more text than it can show, so this sentence and the next one run past the bottom edge and show how the overflow setting treats them.

HTML

<div class="grid cols-2 gap-4">
  <div class="h-24 overflow-hidden p-2 border rounded">
    overflow-hidden: the text below is clipped at the bottom edge of the box and cannot be scrolled. A box with a fixed height holds more text than it can show, so this sentence and the next one run past the bottom edge and show how the overflow setting treats them.
  </div>
  <div class="h-24 overflow-y-auto p-2 border rounded">
    overflow-y-auto: the text below scrolls inside the box once it is taller than the box. A box with a fixed height holds more text than it can show, so this sentence and the next one run past the bottom edge and show how the overflow setting treats them.
  </div>
</div>

SCSS

.panel-body {
  @include apply(overflow-y-auto, max-height(64));
}

visible exists for both axes only: there is no overflow-x-visible or overflow-y-visible class.

Truncation

Truncation classes cut text short with an ellipsis instead of letting it wrap or overflow.

Class	Effect
truncate	One line, then an ellipsis (overflow: hidden, text-overflow: ellipsis, white-space: nowrap)
truncate-2 to truncate-5	Two to five lines, then an ellipsis (-webkit-line-clamp)
overflow-label	One line inside a flex or grid child: truncate plus min-width: 0 and word-break: break-all

truncate: a long file name such as quarterly-report-final-version-two.pdf

truncate-2: a longer description that would normally run over several lines is clamped to two lines and ends with an ellipsis where it is cut.

HTML

<div class="space-y-3 max-w-xs">
  <p class="truncate">truncate: a long file name such as quarterly-report-final-version-two.pdf</p>
  <p class="truncate-2">truncate-2: a longer description that would normally run over several lines is clamped to two lines and ends with an ellipsis where it is cut.</p>
</div>

SCSS

.file-name {
  @include apply(truncate);
}
.card-summary {
  @include apply(truncate-lines(3));
}

A flex child does not shrink below its content width by default, so truncate alone has no effect inside a flex row. overflow-label adds min-width: 0 for that case.

Folder: clients/aala/2026/contracts/signed/final

HTML

<div class="flex x-center gap-2 max-w-xs p-2 border rounded">
  <span class="no-shrink">Folder:</span>
  <span class="overflow-label">clients/aala/2026/contracts/signed/final</span>
</div>

SCSS

.nav-item-label {
  @include apply(overflow-label);
}

The mixin for multi-line truncation is truncate-lines($lines); it accepts any number of lines, while the classes cover 2 to 5. Truncation classes are emitted before the display and overflow classes, so block or overflow-visible on the same element overrides the parts they share.

Responsive variants

Every display, visibility, overflow and truncation class has a responsive variant with an @{breakpoint} suffix, except hidden. Variants apply from their breakpoint upwards.

truncate-3 truncate@md: up to three lines on small screens, then one line from md upwards. Resize the window to see the text clamp change.

<p class="truncate-3 truncate@md max-w-xs p-2 bg-alternate rounded">
  truncate-3 truncate@md: up to three lines on small screens, then one line from md upwards. Resize the window to see the text clamp change.
</p>

There are no state variants such as hover:block. Use the mixins with a state modifier:

.toolbar {
  @include apply(overflow-hidden, overflow-visible focus-within);
}

SCSS

Every class has a mixin of the same name. hidden has no mixin; write display: none !important when you need it.

@use "@nuvoui/core" as *;

.sidebar {
  @include apply(hide, block lg, overflow-y-auto);
}

.sidebar {
  display: none;
}
@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}
.sidebar {
  overflow-y: auto;
}

Mixin	Output
block, inline, inline-block, contents	display with that value
table, table-row, table-cell	display with that value
flex, inline-flex, grid, inline-grid	display with that value
hide, show	display: none, display: revert
visible, invisible, collapse	visibility
overflow-hidden and the other overflow mixins	overflow, overflow-x or overflow-y
truncate, truncate-lines($lines: 2), overflow-label	Truncation declarations

Removed in 2.0

flex-inline, grid-inline, d-tbl, d-tbl-row and d-tbl-cell were removed. Use inline-flex, inline-grid, table, table-row and table-cell. A removed name raises Undefined mixin. when included directly and a Mixin not found error inside apply().

Configuration

The display classes have no configuration map. The displays feature flag turns off every class on this page except flex, grid (their own flags) and sr-only (the base flag). The mixins stay available.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $feature-flags: ("displays": false)
);

Class reference

Generated from the compiled core build. Responsive variants are not listed.

Display (7 rules)

Selector	Declarations	Default value
.block	display: block	block
.inline	display: inline	inline
.inline-block	display: inline-block	inline-block
.contents	display: contents	contents
.table	display: table	table
.table-row	display: table-row	table-row
.table-cell	display: table-cell	table-cell

Hide and show (3 rules)

Selector	Declarations	Default value
.show	display: revert	revert
.hide	display: none	none
.hidden	display: none !important	none !important

Visibility (3 rules)

Selector	Declarations	Default value
.visible	visibility: visible	visible
.invisible	visibility: hidden	hidden
.collapse	visibility: collapse	collapse

Overflow (10 rules)

Selector	Declarations	Default value
.overflow-hidden	overflow: hidden	hidden
.overflow-visible	overflow: visible	visible
.overflow-scroll	overflow: scroll	scroll
.overflow-auto	overflow: auto	auto
.overflow-x-hidden	overflow-x: hidden	hidden
.overflow-y-hidden	overflow-y: hidden	hidden
.overflow-x-scroll	overflow-x: scroll	scroll
.overflow-y-scroll	overflow-y: scroll	scroll
.overflow-x-auto	overflow-x: auto	auto
.overflow-y-auto	overflow-y: auto	auto

Truncation (6 rules)

Selector	Declarations	Default value
.truncate	overflow: hidden text-overflow: ellipsis white-space: nowrap	hidden ellipsis nowrap
.truncate-2	display: -webkit-box -webkit-line-clamp: 2 -webkit-box-orient: vertical overflow: hidden text-overflow: ellipsis	-webkit-box 2 vertical hidden ellipsis
.truncate-3	display: -webkit-box -webkit-line-clamp: 3 -webkit-box-orient: vertical overflow: hidden text-overflow: ellipsis	-webkit-box 3 vertical hidden ellipsis
.truncate-4	display: -webkit-box -webkit-line-clamp: 4 -webkit-box-orient: vertical overflow: hidden text-overflow: ellipsis	-webkit-box 4 vertical hidden ellipsis
.truncate-5	display: -webkit-box -webkit-line-clamp: 5 -webkit-box-orient: vertical overflow: hidden text-overflow: ellipsis	-webkit-box 5 vertical hidden ellipsis
.overflow-label	white-space: nowrap word-break: break-all text-overflow: ellipsis overflow: hidden min-width: 0	nowrap break-all ellipsis hidden 0

Accessibility and RTL

• Hidden means hidden for everyone. hide, hidden and invisible remove content from screen readers too. To hide content visually but keep it announced, use sr-only.
• Do not hide focusable content with invisible. Hidden elements cannot receive focus, but an element revealed only on hover is unreachable for keyboard users; reveal it on :focus-within as well.
• Truncated text needs a way to the full text. Show the full value in a tooltip, a title, or a detail view, so the cut-off part is not lost (WCAG 1.3.1).
• Scroll regions need focus. A region with overflow-auto that contains no focusable element needs tabindex="0" and an accessible name, so keyboard users can scroll it.
• RTL. Display, visibility and overflow do not depend on direction. truncate places the ellipsis at the inline end, which is the left side in right-to-left text.

LTR

truncate places the ellipsis at the end of the line in both directions

RTL

truncate places the ellipsis at the end of the line in both directions

<p class="truncate max-w-xs">truncate places the ellipsis at the end of the line in both directions</p>

Note

Display utilities have no tokens and do not change with the theme.