docs(utilities): add 'Visibility' page (#2651)

site/content/docs/0.0/utilities/visibility.md

@@ -7,4 +7,33 @@ aliases:
   - "/docs/utilities/visibility/"
 ---
 
-{{< callout-soon "page" >}}
+Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page.
+
+{{< callout warning >}}
+Elements with the `.invisible` class will be hidden *both* visually and for assistive technology/screen reader users.
+{{< /callout >}}
+
+Apply `.visible` or `.invisible` as needed.
+
+```html
+<div class="visible">...</div>
+<div class="invisible">...</div>
+```
+
+```scss
+// Class
+.visible {
+  visibility: visible !important;
+}
+.invisible {
+  visibility: hidden !important;
+}
+```
+
+## CSS
+
+### Sass utilities API
+
+Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}}

site/data/sidebar.yml

@@ -249,7 +249,6 @@
     - title: Vertical align
       draft: true
     - title: Visibility
-      draft: true
     - title: Z-index
       draft: true