Syntax

Display

Controlling the element's inner and outer display types.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
display:typedisplay: type;
hiddendisplay: none;
flexdisplay: flex;
griddisplay: grid;
inlinedisplay: inline;
blockdisplay: block;
tabledisplay: table;
contentsdisplay: contents;
flow-rootdisplay: flow-root;
list-itemdisplay: list-item;
inline-blockdisplay: inline-block;
inline-flexdisplay: inline-flex;
inline-griddisplay: inline-grid;
inline-tabledisplay: inline-table;
table-celldisplay: table-cell;
table-captiondisplay: table-caption;
table-rowdisplay: table-row;
table-columndisplay: table-column;
table-row-groupdisplay: table-row-group;
table-column-groupdisplay: table-column-group;
table-header-groupdisplay: table-header-group;
table-footer-groupdisplay: table-footer-group;

Basic usage

Block & Inline

Use block, inline, and inline-block to set the flow of elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

display:block

Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,

display:inline

nec malesuada tellus posuere id. Nullam sed nulla eget ante ultrices tristique. Orci varius natoque penatibus et magnis dis parturient montes,

display:inline-block

nascetur ridiculus mus. Proin sodales turpis ut dolor posuere, nec aliquet nulla dapibus.

<div>
Lorem ipsum dolor sit amet…
<span class="block">
display:block
</span>
Nulla et elit dictum, tempor augue quis, …
<span class="inline">
display:inline
</span>
nec malesuada tellus posuere id. …
<span class="inline-block">
display:inline-block
</span>
nascetur ridiculus mus. …
</div>

Flex

Use flex to create a block-level flex container.

avatar
aron

Front-end needs a revolution

<div class="flex gap:12 ai:center">
<img src="">
<div>
<div>aron</div>
<p>Front-end needs a revolution</p>
</div>
</div>

Inline Flex

Use inline-flex to create an inline-level flex container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,

avatararon

nec malesuada tellus posuere id. Nullam sed nulla eget ante ultrices tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales turpis ut dolor posuere, nec aliquet nulla dapibus.

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. …
<div class="inline-flex ai:baseline mx:12">
<img src="">
<div>Aron</div>
</div>
nec malesuada tellus posuere id. …
</div>

Grid

Use grid to create a block-level grid container.

01
02
03
04
<div class="grid grid-template-cols:repeat(2,auto) gap:12">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>

Inline Grid

Use inline-grid to create a inline-level grid container.

01
02
03
04
01
02
03
04
<div class="inline-grid grid-template-cols:repeat(2,auto) gap:12">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
<div class="inline-grid grid-template-cols:repeat(2,auto) gap:12">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>

Table

Use table, table-row, table-column, table-cell, table-caption, table-row-group, table-column-group, table-header-group, and table-footer-group to create elements that behave like their respective table elements.

Orders
Product
Qty
Pirce
Milk
2
10.00
Cola
3
12.00
Juice
5
18.00
<div class="table">
<div class="table-caption">Orders</div>
<div class="table-header-group bg:slate-92">
<div class="table-row">
<div class="table-cell">Product</div>
<div class="table-cell">Qty</div>
<div class="table-cell">Pirce</div>
</div>
</div>
<div class="table-row-group">
<div class="table-row">
<div class="table-cell">Milk</div>
<div class="table-cell">2</div>
<div class="table-cell">10.00</div>
</div>
<div class="table-row">
<div class="table-cell">Cola</div>
<div class="table-cell">3</div>
<div class="table-cell">12.00</div>
</div>
<div class="table-row">
<div class="table-cell">Juice</div>
<div class="table-cell">5</div>
<div class="table-cell">18.00</div>
</div>
</div>
<div class="table-footer-group bg:slate-92">
<div class="table-row">
<div class="table-cell">Total</div>
<div class="table-cell t:center">10</div>
<div class="table-cell t:center">40.00</div>
</div>
</div>
</div>

Contents

Use contents to make the element’s children like direct children of the element’s parent, ignoring the element itself.

01
02
03
04
<div class="flex gap:20">
<div class="flex:1">01</div>
<div class="contents">
<div class="flex:1">02</div>
<div class="flex:1">03</div>
</div>
<div class="flex:1">04</div>
</div>

Flow Root

Use flow-root to create a block-level element that establishes a new block formatting context.

Float Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Use `flow-root` to clear floats.

<div class="flow-root">
<img class="float:left" />
<p>Lorem ipsum dolor sit amet… </p>
</div>
Use flow-root to clear floats

List Item

Use list-item to create a block that behave like a list item.

01
02
03
<div>
<div class="list-item">01</div>
<div class="list-item">02</div>
<div class="list-item">03</div>
</div>

Hidden

Use hidden to hide the element. The element is not rendered in the document.

01
02
03
<div class="flex gap:20">
<div>01</div>
<div class="hidden">02</div>
<div>03</div>
</div>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="display:block:hover display:block@sm display:block@dark display:block@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.