Chi Documentation

Display

Use shorthand display utility classes to quickly change an elements display value.

Notation

Display utility classes can be defined using the format -d-{breakpoint}--{value}. Breakpoints supported are xs, sm, md, lg, and xl.

Target all breakpoints

Display utility classes with no breakpoint defined apply to all screen sizes.

Display Class
Value
-d--nonedisplay: none;
-d--inlinedisplay: inline;
-d--inline-blockdisplay: inline-block;
-d--blockdisplay: block;
-d--tabledisplay: table;
-d--table-celldisplay: table-cell;
-d--table-rowdisplay: table-row;
-d--flexdisplay: flex;
-d--inline-flexdisplay: inline-flex;

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Display Class
Value
-d-xs--noneHidden only on xs
-d-sm--noneHidden only on sm
-d-md--noneHidden only on md
-d-lg--noneHidden only on lg
-d-xl--noneHidden only on xl

Examples

-d--none -d-xl--inline-flex
-d-xs--none
-d--inline-flex
-d--flex
<!-- hidden on all breakpoints except xl -->
<div class="-d--none -d-xl--inline-flex"></div>
<!-- hidden on xs breakpoints -->
<div class="-d-xs--none"></div>
<!-- inline-flex on all breakpoints -->
<div class="-d--inline-flex"></div>
<!-- flex on all breakpoints -->
<div class="-d--flex"></div>