Display

The display property defines the display behaviour of an element.

Controls the display behaviour of an element (e.g. block, inline, flex, grid). It defiles how an element is rendered in the layout flow.

Each class uses a compound co prefix to start with and d stands for display followed by display controls.

Class list

Class name	Styles
co-d-flex	display: flex;
co-d-none	display: none;
co-d-grid	display: grid;
co-d-block	display: block;
co-d-inline	display: inline;
co-d-inline-block	display: inline-block;
co-d-inline-flex	display: inline-flex;
co-d-inline-grid	display: inline-grid;
co-d-list-item	display: list-item;
co-d-table	display: table;
co-d-table-cell	display: table-cell;
co-d-table-row	display: table-row;
co-sr-only	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;

<div class="co-d-flex co-gap-2">
    ...
</div>

<div class="co-d-grid">
    ...
</div>

<div class="co-d-block">
    ...
    <span class="co-d-none">03</span>
    <span>04</span>
</div>

<div class="sm:co-d-block">
    ...
</div>