From b1b8aedf0eb2e2efa1e49702d8674b700555b727 Mon Sep 17 00:00:00 2001 From: Dillon Chanis Date: Mon, 12 Jun 2017 21:40:19 -0400 Subject: [PATCH] Add use case description and example --- docs/4.0/utilities/image-replacement.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) 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 %} +

Bootstrap

+{% endexample %} +{% highlight html %} +

Bootstrap

+{% endhighlight %} +{% highlight scss %} +.logo { + background-image: url('/assets/brand/bootstrap-solid.svg'); +} +{% endhighlight %} + -- 2.47.2