add visibility classes

diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index 59d1846e3812e6ce6e99ec6c3309a9c9dee24a95..b68cb71b2789048ab5a6be133c0afcf3638764d9 100644 (file)
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -665,3 +665,39 @@ description: Everything but.
   </div>
 </div>
 ```
+
+---
+
+## Visibility Classes
+
+```html_example
+<p>You are on a small screen or larger.</p>
+<p class="show-for-medium">You are on a medium screen or larger.</p>
+<p class="show-for-large">You are on a large screen or larger.</p>
+<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
+<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
+<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
+
+<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
+<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
+<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
+<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
+<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>
+<p class="hide">Can't touch this.</p>
+
+<p class="invisible">Can sort of touch this.</p>
+
+<p class="show-for-landscape">You are in landscape orientation.</p>
+<p class="show-for-portrait">You are in portrait orientation.</p>
+
+<p class="show-for-sr">This text can only be read by a screen reader.</p>
+<p>There's a line of text above this one, you just can't see it.</p>
+
+<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>
+
+<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
+<header id="header" role="banner">
+</header>
+<main id="mainContent" role="main" tabindex="0">
+</main>
+```