#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 |
|
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 |
|
Set the u-none
class to make the element display with none
.
<div class="bg-indigo-200 px-2 py-1 m-1 u-round">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-none">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round">c</div>
Set the u-inline
class to make the element display with inline
.
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">c</div>
Set the u-inline-block
class to make the element display with inline-block
.
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">c</div>
Set the u-block
class to make the element display with block
.
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">c</div>
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.
<div class="u-table w-100">
<div class="u-table-row">
<div class="u-table-cell bg-indigo-200 px-4 py-2">1</div>
<div class="u-table-cell bg-indigo-300 px-4 py-2">2</div>
<div class="u-table-cell bg-indigo-200 px-4 py-2">Loooong 3</div>
</div>
<div class="u-table-row">
<div class="u-table-cell bg-indigo-300 px-4 py-2">Loooong 4</div>
<div class="u-table-cell bg-indigo-200 px-4 py-2">5</div>
<div class="u-table-cell bg-indigo-300 px-4 py-2">6</div>
</div>
</div>
For documentation for flexbox, view it here.
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.