Document .hide-text and .text-hide

2 files changed, 13 insertions, 0 deletions

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 9d979bc90..4d21a4f9f 100644
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@@ -81,6 +81,7 @@
     <li><a href="#helper-classes-floats">Quick floats</a></li>
     <li><a href="#helper-classes-clearfix">Clearfix</a></li>
     <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
+    <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
   </ul>
 </li>
 <li>
diff --git a/css.html b/css.html
index 3e639bf3b..36bf1bf52 100644
--- a/css.html
+++ b/css.html
@@ -2292,6 +2292,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 }
 {% endhighlight %}
 
+
+    <h3 id="helper-classes-image-replacement">Image replacement</h3>
+    <p>Utilize the <code>.hide-text</code> mixin or <code>.text-hide</code> class to help replace an element's text content with a background image.</p>
+{% highlight html %}
+<h1 class="text-hide">Custom heading</h1>
+{% endhighlight %}
+  {% highlight css %}
+// Usage as a Mixin
+.heading {
+  .hide-text();
+}
+{% endhighlight %}
   </div>