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--none | display: none; |
-d--inline | display: inline; |
-d--inline-block | display: inline-block; |
-d--block | display: block; |
-d--table | display: table; |
-d--table-cell | display: table-cell; |
-d--table-row | display: table-row; |
-d--flex | display: flex; |
-d--inline-flex | display: inline-flex; |
Target specific breakpoints
To target a specific breakpoint, add the breakpoint abbreviation to the class.
Display Class | Value |
|---|---|
-d-xs--none | Hidden only on xs |
-d-sm--none | Hidden only on sm |
-d-md--none | Hidden only on md |
-d-lg--none | Hidden only on lg |
-d-xl--none | Hidden 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>