Display mixins

Display, visibility, overflow and text truncation utilities.

Classes:

.hide, .hidden, .show: Control display (.hidden is an exact alias of .hide)
.block, .inline, .inline-block: Basic display modes
.table, .table-row, .table-cell: Table display modes
.grid, .flex, .contents: Layout display modes (.grid.inline and .flex.inline give the inline variants, at one class of specificity so .hide still wins); .grid and .flex follow the grid and flex feature flags, the other classes the displays flag
.visible, .invisible, .collapse: Control visibility
.overflow-{hidden|visible|scroll|auto}, .overflow-{x|y}-{hidden|scroll|auto}: Control overflow behavior
.truncate, .truncate-{2-5}, .overflow-label: Text truncation (one line or 2 to 5 lines)

All classes above support responsive variants with the @breakpoint suffix:

.hide@md, .hidden@md, .block@lg, etc.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Display. The A to Z index lists every public mixin and function.

Source: utilities/_display.scss

Mixins

hide hidden block inline inline-block show grid inline-grid flex inline-flex table table-row table-cell visible invisible collapse contents overflow-hidden overflow-visible overflow-scroll overflow-auto overflow-x-hidden overflow-y-hidden overflow-x-scroll overflow-y-scroll overflow-x-auto overflow-y-auto truncate overflow-label truncate-lines

`hide` mixin

Sets display to none.

@mixin hide

Example

.modal-closed {
  @include hide;
}

Compiled CSS

.modal-closed {
  display: none;
}

display on MDN

See also: hidden, show. Source: utilities/_display.scss:39

`hidden` mixin

Sets display to none, exactly like hide.

@mixin hidden

Example

.modal-closed {
  @include hidden;
}

Compiled CSS

.modal-closed {
  display: none;
}

display on MDN

See also: hide, show. Source: utilities/_display.scss:51

`block` mixin

Sets display to block.

@mixin block

Example

.thumbnail {
  @include block;
}

Compiled CSS

.thumbnail {
  display: block;
}

display on MDN

Source: utilities/_display.scss:61

`inline` mixin

Sets display to inline.

@mixin inline

Example

.tag-label {
  @include inline;
}

Compiled CSS

.tag-label {
  display: inline;
}

display on MDN

Source: utilities/_display.scss:71

`inline-block` mixin

Sets display to inline-block.

@mixin inline-block

Example

.badge {
  @include inline-block;
}

Compiled CSS

.badge {
  display: inline-block;
}

display on MDN

Source: utilities/_display.scss:81

`show` mixin

Sets display to revert, restoring the element's natural display (block for a div, table for a table) after .hide or a responsive hide.

@mixin show

Example

.toolbar-label {
  @include show;
}

Compiled CSS

.toolbar-label {
  display: revert;
}

display on MDN

See also: hide, hidden. Source: utilities/_display.scss:93

`grid` mixin

Sets display to grid, establishing a grid container.

@mixin grid

Example

.gallery {
  @include grid;
}

Compiled CSS

.gallery {
  display: grid;
}

display on MDN

Source: utilities/_display.scss:103

`inline-grid` mixin

Sets display to inline-grid, establishing an inline grid container.

@mixin inline-grid

Example

.icon-set {
  @include inline-grid;
}

Compiled CSS

.icon-set {
  display: inline-grid;
}

display on MDN

Source: utilities/_display.scss:113

`flex` mixin

Sets display to flex, establishing a flex container.

@mixin flex

Example

.toolbar {
  @include flex;
}

Compiled CSS

.toolbar {
  display: flex;
}

display on MDN

Source: utilities/_display.scss:123

`inline-flex` mixin

Sets display to inline-flex, establishing an inline flex container.

@mixin inline-flex

Example

.chip {
  @include inline-flex;
}

Compiled CSS

.chip {
  display: inline-flex;
}

display on MDN

Source: utilities/_display.scss:133

`table` mixin

Sets display to table.

@mixin table

Example

.data-grid {
  @include table;
}

Compiled CSS

.data-grid {
  display: table;
}

display on MDN

Source: utilities/_display.scss:143

`table-row` mixin

Sets display to table-row.

@mixin table-row

Example

.data-grid-row {
  @include table-row;
}

Compiled CSS

.data-grid-row {
  display: table-row;
}

display on MDN

Source: utilities/_display.scss:153

`table-cell` mixin

Sets display to table-cell.

@mixin table-cell

Example

.data-grid-cell {
  @include table-cell;
}

Compiled CSS

.data-grid-cell {
  display: table-cell;
}

display on MDN

Source: utilities/_display.scss:163

`visible` mixin

Sets visibility to visible.

@mixin visible

Example

.row-actions {
  @include visible;
}

Compiled CSS

.row-actions {
  visibility: visible;
}

visibility on MDN

Source: utilities/_display.scss:173

`invisible` mixin

Sets visibility to hidden, keeping the element in the layout.

@mixin invisible

Example

.row-actions {
  @include invisible;
}

Compiled CSS

.row-actions {
  visibility: hidden;
}

visibility on MDN

Source: utilities/_display.scss:183

`collapse` mixin

Sets visibility to collapse, which removes table rows and columns without changing table layout.

@mixin collapse

Example

.table-row-hidden {
  @include collapse;
}

Compiled CSS

.table-row-hidden {
  visibility: collapse;
}

visibility on MDN

Source: utilities/_display.scss:193

`contents` mixin

Sets display to contents, so the element box disappears and its children join the parent layout.

@mixin contents

Example

.field-group {
  @include contents;
}

Compiled CSS

.field-group {
  display: contents;
}

display on MDN

Source: utilities/_display.scss:203

`overflow-hidden` mixin

Sets overflow to hidden on both axes.

@mixin overflow-hidden

Example

.panel {
  @include overflow-hidden;
}

Compiled CSS

.panel {
  overflow: hidden;
}

overflow on MDN

Source: utilities/_display.scss:213

`overflow-visible` mixin

Sets overflow to visible on both axes.

@mixin overflow-visible

Example

.panel {
  @include overflow-visible;
}

Compiled CSS

.panel {
  overflow: visible;
}

overflow on MDN

Source: utilities/_display.scss:223

`overflow-scroll` mixin

Sets overflow to scroll on both axes.

@mixin overflow-scroll

Example

.panel {
  @include overflow-scroll;
}

Compiled CSS

.panel {
  overflow: scroll;
}

overflow on MDN

Source: utilities/_display.scss:233

`overflow-auto` mixin

Sets overflow to auto on both axes.

@mixin overflow-auto

Example

.panel {
  @include overflow-auto;
}

Compiled CSS

.panel {
  overflow: auto;
}

overflow on MDN

Source: utilities/_display.scss:243

`overflow-x-hidden` mixin

Sets overflow-x to hidden (horizontal axis).

@mixin overflow-x-hidden

Example

.panel {
  @include overflow-x-hidden;
}

Compiled CSS

.panel {
  overflow-x: hidden;
}

overflow-x on MDN

Source: utilities/_display.scss:253

`overflow-y-hidden` mixin

Sets overflow-y to hidden (vertical axis).

@mixin overflow-y-hidden

Example

.panel {
  @include overflow-y-hidden;
}

Compiled CSS

.panel {
  overflow-y: hidden;
}

overflow-y on MDN

Source: utilities/_display.scss:263

`overflow-x-scroll` mixin

Sets overflow-x to scroll (horizontal axis).

@mixin overflow-x-scroll

Example

.panel {
  @include overflow-x-scroll;
}

Compiled CSS

.panel {
  overflow-x: scroll;
}

overflow-x on MDN

Source: utilities/_display.scss:273

`overflow-y-scroll` mixin

Sets overflow-y to scroll (vertical axis).

@mixin overflow-y-scroll

Example

.panel {
  @include overflow-y-scroll;
}

Compiled CSS

.panel {
  overflow-y: scroll;
}

overflow-y on MDN

Source: utilities/_display.scss:283

`overflow-x-auto` mixin

Sets overflow-x to auto (horizontal axis).

@mixin overflow-x-auto

Example

.panel {
  @include overflow-x-auto;
}

Compiled CSS

.panel {
  overflow-x: auto;
}

overflow-x on MDN

Source: utilities/_display.scss:293

`overflow-y-auto` mixin

Sets overflow-y to auto (vertical axis).

@mixin overflow-y-auto

Example

.panel {
  @include overflow-y-auto;
}

Compiled CSS

.panel {
  overflow-y: auto;
}

overflow-y on MDN

Source: utilities/_display.scss:303

`truncate` mixin

Truncates text to one line with an ellipsis, or to a number of lines like truncate-lines() (truncate(2) matches the .truncate-2 class).

@mixin truncate($lines: 1)

Parameter	Type	Default	Description
`$lines`	`Number\|String`	`1`	Number of visible lines: 1, or a whole number above 1, calc() or var() for a multi-line clamp

Example 1

.file-name {
  @include truncate;
}

Compiled CSS

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Example 2

.card-summary {
  @include truncate(2); // the same as truncate-lines(2)
}

Compiled CSS

.card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

See also: truncate-lines. Source: utilities/_display.scss:318

`overflow-label` mixin

Truncates a flex or grid child to one line; min-width 0 lets it shrink below its content width.

@mixin overflow-label

Example

.nav-item-label {
  @include overflow-label;
}

Compiled CSS

.nav-item-label {
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}

Source: utilities/_display.scss:345

`truncate-lines` mixin

Clamps text to a number of lines with an ellipsis using -webkit-line-clamp.

@mixin truncate-lines($lines: 2)

Parameter	Type	Default	Description
`$lines`	`Number\|String`	`2`	Number of visible lines: a whole number of 1 or more, calc() or var(); anything else raises an error

Example

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

Compiled CSS

.card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

See also: truncate. Source: utilities/_display.scss:360

Display mixins

Mixins

hide mixin

hidden mixin

block mixin

inline mixin

inline-block mixin

show mixin

grid mixin

inline-grid mixin

flex mixin

inline-flex mixin

table mixin

table-row mixin

table-cell mixin

visible mixin

invisible mixin

collapse mixin

contents mixin

overflow-hidden mixin

overflow-visible mixin

overflow-scroll mixin

overflow-auto mixin

overflow-x-hidden mixin

overflow-y-hidden mixin

overflow-x-scroll mixin

overflow-y-scroll mixin

overflow-x-auto mixin

overflow-y-auto mixin

truncate mixin

overflow-label mixin

truncate-lines mixin

`hide` mixin

`hidden` mixin

`block` mixin

`inline` mixin

`inline-block` mixin

`show` mixin

`grid` mixin

`inline-grid` mixin

`flex` mixin

`inline-flex` mixin

`table` mixin

`table-row` mixin

`table-cell` mixin

`visible` mixin

`invisible` mixin

`collapse` mixin

`contents` mixin

`overflow-hidden` mixin

`overflow-visible` mixin

`overflow-scroll` mixin

`overflow-auto` mixin

`overflow-x-hidden` mixin

`overflow-y-hidden` mixin

`overflow-x-scroll` mixin

`overflow-y-scroll` mixin

`overflow-x-auto` mixin

`overflow-y-auto` mixin

`truncate` mixin

`overflow-label` mixin

`truncate-lines` mixin