Europa Component Library

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: 
    /*
  ECL Float
  ===========
*/

.ecl-u-f-l {
  float: left;
}
.ecl-u-f-r {
  float: right;
}
.ecl-u-f-none {
  float: none;
}
  • URL: /components/raw/ecl-u-float/ecl-u-float.scss
  • Filesystem Path: framework/utilities/ecl-u-float/ecl-u-float.scss
  • Size: 127 Bytes