Float utility classes - Simplex Component Library

Float

Float utility classes allow authors to move elements to the left and right at specific screen sizes.

Overall usage

Used to display element to the left or right within a container.

Accessibility

N/A

Floats at all sizes

u-float-left

u-float-right

u-float-none

<div class="u-float-left">u-float-left</div>
<div class="u-float-right">u-float-right</div>
<div class="u-float-none">u-float-none</div>

xs only

u-float-left-xs

u-float-right-xs

u-float-none-xs

<div class="u-float-left-xs">u-float-left-xs</div>
<div class="u-float-right-xs">u-float-right-xs</div>
<div class="u-float-none-xs">u-float-none-xs</div>

sm only

u-float-left-sm

u-float-right-sm

u-float-none-sm

<div class="u-float-left-sm">u-float-left-sm</div>
<div class="u-float-right-sm">u-float-right-sm</div>
<div class="u-float-none-sm">u-float-none-sm</div>

md only

u-float-left-md

u-float-right-md

u-float-none-md

<div class="u-float-left-md">u-float-left-md</div>
<div class="u-float-right-md">u-float-right-md</div>
<div class="u-float-none-md">u-float-none-md</div>

lg only

u-float-left-lg

u-float-right-lg

u-float-none-lg

<div class="u-float-left-lg">u-float-left-lg</div>
<div class="u-float-right-lg">u-float-right-lg</div>
<div class="u-float-none-lg">u-float-none-lg</div>

Utility classes