Display utility
Forked from Bootstrap 4 Beta and adapted to our needs.
Common display
values
The
display
property
accepts a handful of values and we support many of them with utility classes. We
purposefully don’t provide every value as a utility, so here’s what we support:
.ecl-u-d-none
.ecl-u-d-inline
.ecl-u-d-inline-block
.ecl-u-d-block
.ecl-u-d-table
.ecl-u-d-table-cell
.ecl-u-d-flex
.ecl-u-d-inline-flex
Put them to use by applying any of the classes to an element of your choice. For example, here’s how you could use the inline, block, or inline-block utilities (the same applies to the other classes).
Responsive variations also exist for every single utility mentioned above.
.ecl-u-d-[ sm|md|lg|xl ]-none
.ecl-u-d-[ sm|md|lg|xl ]-inline
.ecl-u-d-[ sm|md|lg|xl ]-inline-block
.ecl-u-d-[ sm|md|lg|xl ]-block
.ecl-u-d-[ sm|md|lg|xl ]-table
.ecl-u-d-[ sm|md|lg|xl ]-table-cell
.ecl-u-d-[ sm|md|lg|xl ]-flex
.ecl-u-d-[ sm|md|lg|xl ]-inline-flex
/* No context defined for this component. */
-
Content:
/** * Display utilities */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-utility-display/generic-utility-display'; // Use generic mixin @include exports('eu-utility-display') { @include ecl-utility-display(); }
- URL: /components/raw/eu-utility-display/eu-utility-display.scss
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-display/eu-utility-display.scss
- Size: 252 Bytes
- Handle: @ecl/eu-utility-display
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-display/eu-utility-display.twig