EC System

Float

Documentation • Demo

Float utilities

You can use these utilities to quickly set float attribute to a block.

Available utilities are:

  • ecl-u-f-l: Float left
  • ecl-u-f-r: Float right
  • ecl-u-f-none: Float none

To remove float, you can also use the clearfix utility.

<style>
  .exampleContainer {
    display: block;
    width: 100%;
    clear: both;
    padding-top: 2em;
  }
  .example {
    background-color: #404040;
    color: #fff;
    display: block;
    padding: 1em;
  }
</style>

<div class="exampleContainer">
  <h3 class="ecl-heading ecl-heading--h3">Float left: ecl-u-f-l</h3>
  <div class="example ecl-u-f-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<div class="exampleContainer">
  <h3 class="ecl-heading ecl-heading--h3">Float right: ecl-u-f-r</h3>
  <div class="example ecl-u-f-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<div class="exampleContainer">
  <h3 class="ecl-heading ecl-heading--h3">Float none: ecl-u-f-none</h3>
  <div class="example ecl-u-f-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
 
/* No context defined for this component. */
 
<style>
  .exampleContainer {
    display: block;
    width: 100%;
    clear: both;
    padding-top: 2em;
  }

  .example {
    background-color: #404040;
    color: #fff;
    display: block;
    padding: 1em;
  }
</style>

<div class="exampleContainer">
  <h3 class="ecl-heading ecl-heading--h3">Float left: ecl-u-f-l</h3>
  <div class="example ecl-u-f-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<div class="exampleContainer">
  <h3 class="ecl-heading ecl-heading--h3">Float right: ecl-u-f-r</h3>
  <div class="example ecl-u-f-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<div class="exampleContainer">
  <h3 class="ecl-heading ecl-heading--h3">Float none: ecl-u-f-none</h3>
  <div class="example ecl-u-f-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
  • Content: 
    /**
 * Float utilities
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-utility-float/generic-utility-float';

// Use generic mixin
@include exports('ec-utility-float') {
  @include ecl-utility-float();
}
  • URL: /components/raw/ec-utility-float/ec-utility-float.scss
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-float/ec-utility-float.scss
  • Size: 242 Bytes
  • Handle: @ecl/ec-utility-float
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-float/ec-utility-float.twig