Clear

Class	Style
cl-b	clear: both;
cl-ie	clear: inline-end;
cl-is	clear: inline-start;
cl-l	clear: left;
cl-none	clear: none;
cl-r	clear: right;

None

Initial value

Allows the element to be positioned normally without clearing any floating elements.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="cl-none p-6" id="area"></div>

Both

Ensures that the element is moved below any floating elements on both sides.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="bg-indigo d-32 fl-r rad-1"></div>
<div class="cl-b p-6" id="area"></div>

Inline End

Ensures that the element is moved below any floating elements on the inline end side, which is typically the right side in left-to-right layouts.

<div class="bg-indigo d-32 fl-r rad-1"></div>
<div class="cl-ie p-6" id="area"></div>

Inline Start

Ensures that the element is moved below any floating elements on the inline start side, which is typically the left side in left-to-right layouts.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="cl-is p-6" id="area"></div>

Left

Ensures that the element is moved below any floating elements on the left side.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="cl-l p-6" id="area"></div>

Right

Ensures that the element is moved below any floating elements on the right side.

<div class="bg-indigo d-32 fl-r rad-1"></div>
<div class="cl-r p-6" id="area"></div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:cl-*,md:cl-*, lg:cl-*, and xxl:cl-* to allow targeting specific utilities in different viewports.

<div class="cl-l md:cl-r ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:cl-* utility to override elements and change their values when hovering over them.

<div class="cl-l h:cl-r ..."></div>