Add clear description and use case with example

This commit is contained in:
Dillon Chanis 2017-06-13 06:34:58 -04:00 committed by Mark Otto
parent b1b8aedf0e
commit 9706ce72c9
1 changed files with 1 additions and 10 deletions

View File

@ -19,17 +19,8 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten
}
{% endhighlight %}
The `.text-hide` class is useful for when you want the benefits heading tags like accessibility and SEO, but want to utilize your brand's logo image instead of text.
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.
{% example html %}
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
{% endexample %}
{% highlight html %}
<h1 class="text-hide logo">Bootstrap</h1>
{% endhighlight %}
{% highlight scss %}
.logo {
background-image: url('/assets/brand/bootstrap-solid.svg');
}
{% endhighlight %}