gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 ---
   2 layout: docs
   3 title: Image replacement
   4 description: Swap text for background images with the image replacement class.
   5 group: utilities
   6 toc: true
   7 ---
   8
   9 Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
  10
  11 {% highlight html %}
  12 <h1 class="text-hide">Custom heading</h1>
  13 {% endhighlight %}
  14
  15 {% highlight scss %}
  16 // Usage as a mixin
  17 .heading {
  18   @include text-hide;
  19 }
  20 {% endhighlight %}
  21
  22 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.
  23
  24 {% example html %}
  25 <h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
  26 {% endexample %}