#Display
These are utility classes that control the display of elements.
| Class | Styles |
|---|---|
u-none | |
u-inline | |
u-inline-block | |
u-block | |
u-table | |
u-table-row | |
u-table-cell | |
#Examples
None
Set the u-none class to make the element display with none.
a
b
c
<div class="u-text-center">
<div class="bg-blue-500 px-2 py-1 m-1 u-round-xs">a</div>
<div class="bg-blue-500 px-2 py-1 m-1 u-round-xs u-none">b</div>
<div class="bg-blue-500 px-2 py-1 m-1 u-round-xs">c</div>
</div>Inline
Set the u-inline class to make the element display with inline.
a
b
c
<div class="bg-pink-300">
<div class="bg-pink-500 px-2 py-1 m-1 u-round-xs u-inline">a</div>
<div class="bg-pink-500 px-2 py-1 m-1 u-round-xs u-inline">b</div>
<div class="bg-pink-500 px-2 py-1 m-1 u-round-xs u-inline">c</div>
</div>Inline-block
Set the u-inline-block class to make the element display with inline-block.
a
b
c
<div class="p-3 bg-purple-100 text-white u-round-xs">
<div class="bg-purple-500 px-2 py-1 m-1 u-round-xs u-inline-block">a</div>
<div class="bg-purple-500 px-2 py-1 m-1 u-round-xs u-inline-block">b</div>
<div class="bg-purple-500 px-2 py-1 m-1 u-round-xs u-inline-block">c</div>
</div>Block
Set the u-block class to make the element display with block.
a
b
c
<div class="p-3 bg-yellow-100p text-white u-round-xs">
<div class="bg-yellow-400 px-2 py-1 m-1 u-round-xs u-block">a</div>
<div class="bg-yellow-400 px-2 py-1 m-1 u-round-xs u-block">b</div>
<div class="bg-yellow-400 px-2 py-1 m-1 u-round-xs u-block">c</div>
</div>Table
You can re-create the table layout using the u-table class. The rows, columns, and cells can be styled with u-table-row, u-table-column, and u-table-cell classes.
1
2
Loooong 3
Loooong 4
5
6
<div class="u-table w-100p text-white">
<div class="u-table-row">
<div class="u-table-cell bg-indigo-400 px-4 py-2">1</div>
<div class="u-table-cell bg-indigo-500 px-4 py-2">2</div>
<div class="u-table-cell bg-indigo-400 px-4 py-2">Loooong 3</div>
</div>
<div class="u-table-row">
<div class="u-table-cell bg-indigo-500 px-4 py-2">Loooong 4</div>
<div class="u-table-cell bg-indigo-400 px-4 py-2">5</div>
<div class="u-table-cell bg-indigo-500 px-4 py-2">6</div>
</div>
</div>Flexbox & Friends
For documentation for flexbox, view it here.
#Responsive
All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use u-none-md to apply u-none on medium screens and above.
<div class="u-block u-none-md">
<!-- ... -->
</div>For more information, visit the Viewports documentation.