EU System

Colorize

Documentation • Demo

Colorize utilities

You can use these utilities to quickly set a background color or a text color

See examples for all possible colors.

<h3 class="ecl-heading ecl-heading--h3">Background colours</h3>

<div class="example">
  <div class="ecl-u-bg-default ecl-u-color-shade">ecl-u-bg-default</div>
  <div class="ecl-u-bg-primary" style="color: #fff">ecl-u-bg-primary</div>
  <div class="ecl-u-bg-secondary">ecl-u-bg-secondary</div>
  <div class="ecl-u-bg-shade" style="color: #fff">ecl-u-bg-shade</div>
  <div class="ecl-u-bg-blue-5">ecl-u-bg-blue-5</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Main colours</h3>

<div class="example">
  <div class="ecl-u-color-primary">ecl-u-color-primary</div>
  <div class="ecl-u-color-shade">ecl-u-color-shade</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Notification colours</h3>

<div class="example">
  <div class="ecl-u-color-info">ecl-u-color-info</div>
  <div class="ecl-u-color-warning">ecl-u-color-warning</div>
  <div class="ecl-u-color-success">ecl-u-color-success</div>
  <div class="ecl-u-color-error">ecl-u-color-error</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Other text colours</h3>

<div class="example">
  <div class="ecl-u-color-blue-120">ecl-u-color-blue-120</div>
  <div class="ecl-u-color-blue-110">ecl-u-color-blue-110</div>
  <div class="ecl-u-color-blue-100">ecl-u-color-blue-100</div>
  <div class="ecl-u-color-blue-75">ecl-u-color-blue-75</div>
  <div class="ecl-u-color-blue-50">ecl-u-color-blue-50</div>
  <div class="ecl-u-color-blue-25">ecl-u-color-blue-25</div>
</div>

<div class="example">
  <div class="ecl-u-color-grey-100">ecl-u-color-grey-100</div>
  <div class="ecl-u-color-grey-75">ecl-u-color-grey-75</div>
  <div class="ecl-u-color-grey-50">ecl-u-color-grey-50</div>
  <div class="ecl-u-color-grey-25">ecl-u-color-grey-25</div>
  <div class="ecl-u-color-grey-15">ecl-u-color-grey-15</div>
  <div class="ecl-u-color-grey-10">ecl-u-color-grey-10</div>
  <div class="ecl-u-color-grey-5">ecl-u-color-grey-5</div>
  <div class="ecl-u-color-white" style="background-color: #404040">ecl-u-color-white</div>
</div>

<style type="text/css">
  body {
    margin: 2rem;
  }
  .example div {
    padding: 1rem;
    text-align: center;
  }
</style>
 
/* No context defined for this component. */
 
<h3 class="ecl-heading ecl-heading--h3">Background colours</h3>

<div class="example">
  <div class="ecl-u-bg-default ecl-u-color-shade">ecl-u-bg-default</div>
  <div class="ecl-u-bg-primary" style="color: #fff">ecl-u-bg-primary</div>
  <div class="ecl-u-bg-secondary">ecl-u-bg-secondary</div>
  <div class="ecl-u-bg-shade" style="color: #fff">ecl-u-bg-shade</div>
  <div class="ecl-u-bg-blue-5">ecl-u-bg-blue-5</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Main colours</h3>

<div class="example">
  <div class="ecl-u-color-primary">ecl-u-color-primary</div>
  <div class="ecl-u-color-shade">ecl-u-color-shade</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Notification colours</h3>

<div class="example">
  <div class="ecl-u-color-info">ecl-u-color-info</div>
  <div class="ecl-u-color-warning">ecl-u-color-warning</div>
  <div class="ecl-u-color-success">ecl-u-color-success</div>
  <div class="ecl-u-color-error">ecl-u-color-error</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Other text colours</h3>

<div class="example">
  <div class="ecl-u-color-blue-120">ecl-u-color-blue-120</div>
  <div class="ecl-u-color-blue-110">ecl-u-color-blue-110</div>
  <div class="ecl-u-color-blue-100">ecl-u-color-blue-100</div>
  <div class="ecl-u-color-blue-75">ecl-u-color-blue-75</div>
  <div class="ecl-u-color-blue-50">ecl-u-color-blue-50</div>
  <div class="ecl-u-color-blue-25">ecl-u-color-blue-25</div>
</div>

<div class="example">
  <div class="ecl-u-color-grey-100">ecl-u-color-grey-100</div>
  <div class="ecl-u-color-grey-75">ecl-u-color-grey-75</div>
  <div class="ecl-u-color-grey-50">ecl-u-color-grey-50</div>
  <div class="ecl-u-color-grey-25">ecl-u-color-grey-25</div>
  <div class="ecl-u-color-grey-15">ecl-u-color-grey-15</div>
  <div class="ecl-u-color-grey-10">ecl-u-color-grey-10</div>
  <div class="ecl-u-color-grey-5">ecl-u-color-grey-5</div>
  <div class="ecl-u-color-white" style="background-color: #404040">ecl-u-color-white</div>
</div>

<style type="text/css">
  body {
    margin: 2rem;
  }

  .example div {
    padding: 1rem;
    text-align: center;
  }
</style>
  • Content: 
    /**
 * Colorize utilities
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-utility-colorize/generic-utility-colorize';

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