Docs: Breaks out Utilities into separate section and optimizes its pages (#20678)

docs/utilities/invisible-content.md

@@ -0,0 +1,23 @@
+---
+layout: docs
+title: Invisible content
+group: utilities
+---
+
+The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
+
+{% highlight html %}
+<div class="invisible">...</div>
+{% endhighlight %}
+
+{% highlight scss %}
+// Class
+.invisible {
+  visibility: hidden;
+}
+
+// Usage as a mixin
+.element {
+  @include invisible;
+}
+{% endhighlight %}