Skip to main content

Design System

Float

Set an element's float property using the float utility.

You can use the clearfix utility class to automatically clear your floats.

Format: ds-u-float--[VALUE]

Code snippet
<div class="ds-u-clearfix">
  <p class="ds-u-float--left ds-base--inverse ds-u-padding--2">
    <code>ds-u-float--left</code>
  </p>
</div>
<div class="ds-u-clearfix">
  <p class="ds-u-float--right ds-base--inverse ds-u-padding--2">
    <code>ds-u-float--right</code>
  </p>
</div>
<div class="ds-u-clearfix">
  <p class="ds-u-float--none ds-base--inverse ds-u-padding--2">
    <code>ds-u-float--none</code>
  </p>
</div>

Responsive

Use a breakpoint prefix to change how an element is floated at specific breakpoints.

New tab
Code snippet
<div class="ds-u-clearfix">
  <strong>Inline text</strong>
  <div class="ds-u-float--none ds-u-md-float--left ds-u-lg-float--right">
    <p class="ds-u-md-display--none ds-base--inverse ds-u-padding--2">
      float: none
    </p>
    <p class="ds-u-display--none ds-u-md-display--inline-block ds-u-lg-display--none ds-base--inverse ds-u-padding--2">
      float: left
    </p>
    <p class="ds-u-display--none ds-u-lg-display--inline-block ds-base--inverse ds-u-padding--2">
      float: right
    </p>
  </div>
</div>