From: Dillon Chanis <dillonchanis92@gmail.com>
Date: Tue, 13 Jun 2017 01:40:19 +0000 (-0400)
Subject: Add use case description and example
X-Git-Tag: v4.0.0-beta.2~441
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b1b8aedf0eb2e2efa1e49702d8674b700555b727;p=thirdparty%2Fbootstrap.git

Add use case description and example
---

diff --git a/docs/4.0/utilities/image-replacement.md b/docs/4.0/utilities/image-replacement.md
index b11c936c4b..1331a789e1 100644
--- a/docs/4.0/utilities/image-replacement.md
+++ b/docs/4.0/utilities/image-replacement.md
@@ -18,3 +18,18 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten
   @include text-hide;
 }
 {% 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.
+
+{% 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 %}
+