From bac011f98bf59301ae47a3e3766f736879e6485d Mon Sep 17 00:00:00 2001
From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 7 Mar 2016 15:31:02 -0800
Subject: [PATCH] Add docs for visibility classes

---
 docs/pages/visibility.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 docs/pages/visibility.md

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
new file mode 100644
index 00000000..af779e26
--- /dev/null
+++ b/docs/pages/visibility.md
@@ -0,0 +1,24 @@
+---
+title: Visibility Classes
+descripiton: Visibility classes allow you to control what content appears on what kind of device.
+---
+
+Foundation for Emails has two breakpoints: *small*, which is any email client under 600 pixels wide, and *large*, any client over 600 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
+
+You can use a visibility class to selectively show or hide content on mobile vs. desktop clients.
+
+**To show content only on mobile clients,** add the class `.hide-for-large` to the element.
+
+```inky
+<callout class="hide-for-large">
+  <p>This callout will only appear on small screens.</p>
+</callout>
+```
+
+**To show content only on desktop clients,** add the class `.show-for-large` to the element.
+
+```inky
+<callout class="show-for-large">
+  <p>This callout will only appear on large screens.</p>
+</callout>
+```
-- 
2.47.2