Clear

Utility	Properties
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;

Both

This example sets the clear property to both. The cl-b utility 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 stripes"></div>

Inline End

This example sets the clear property to inline-end. The cl-ie utility 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 stripes"></div>

Inline Start

This example sets the clear property to inline-start. The cl-is utility 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 stripes"></div>

Left

This example sets the clear property to left. The cl-l utility 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 stripes"></div>

None

This example sets the clear property to none. The cl-none utility 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 stripes"></div>

Right

This example sets the clear property to right. The cl-r utility 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 stripes"></div>

Conditional styles

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

Media modifiers

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

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

Hover modifiers

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>