diff options
| author | Dillon Chanis <[email protected]> | 2017-06-12 21:40:19 -0400 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-08-10 22:45:35 -0700 |
| commit | b1b8aedf0eb2e2efa1e49702d8674b700555b727 (patch) | |
| tree | ddec946dd202662e36deaa96fe1dbc22a36160e9 /docs | |
| parent | d23813988a0d0f96aae566ff13f6419ee97e7418 (diff) | |
| download | bootstrap-b1b8aedf0eb2e2efa1e49702d8674b700555b727.tar.xz bootstrap-b1b8aedf0eb2e2efa1e49702d8674b700555b727.zip | |
Add use case description and example
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/utilities/image-replacement.md | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/docs/4.0/utilities/image-replacement.md b/docs/4.0/utilities/image-replacement.md index b11c936c4..1331a789e 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 %} + |