Image replacement

Swap text for background images with the image replacement class.

Utils are now deprecated!

Utils have been removed from the fluid-design-system library in v5.0.0.
If you want to keep using them, install the @engie-group/fluid-4-deprecated package and import them.

Utilize the .text-hide class or mixin to help replace an element’s text content with a background image.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  @include text-hide;
}

Use the .text-hide class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a background-image instead of text.

ENGIE

<h1 class="text-hide" style="background-image: url('/assets/brand/logo-engie-blue.svg'); width: 101px; height: 35.875px;">ENGIE</h1>