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/eu-base/eu-base'; @import '@ecl/generic-utility-float/generic-utility-float'; // Use generic mixin @include exports('eu-utility-float') { @include ecl-utility-float(); }
- URL: /components/raw/eu-utility-float/eu-utility-float.scss
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-float/eu-utility-float.scss
- Size: 242 Bytes
- Handle: @ecl/eu-utility-float
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-float/eu-utility-float.twig