Initial commit

docs/ui-components/buttons.md

@@ -62,7 +62,7 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
 
 ### Button size
 
-Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#typography) to scale buttons:
+Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography) to scale buttons:
 
 <div class="code-example" markdown="1">
 
@@ -87,7 +87,7 @@ Wrap the button in container that uses the [font-size utility classes]({{ site.b
 
 ### Spacing between buttons
 
-Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#spacing) to add spacing between two buttons in the same block.
+Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
 
 <div class="code-example" markdown="1">
 

docs/ui-components/code.md

@@ -2,7 +2,7 @@
 layout: default
 title: Code
 parent: UI Components
-nav_order: 4
+nav_order: 5
 ---
 
 # Code

docs/ui-components/labels.md

@@ -0,0 +1,53 @@
+---
+layout: default
+title: Labels
+parent: UI Components
+nav_order: 3
+---
+
+# Labels
+
+Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
+
+<div class="code-example" markdown="1">
+
+Default label
+{: .label }
+
+Blue label
+{: .label .label-blue}
+
+Stable
+{: .label .label-green}
+
+New release
+{: .label .label-purple}
+
+Coming soon
+{: .label .label-yellow}
+
+Deprecated
+{: .label .label-red}
+
+</div>
+```markdown
+
+Default label
+{: .label }
+
+Blue label
+{: .label .label-blue}
+
+Stable
+{: .label .label-green}
+
+New release
+{: .label .label-purple}
+
+Coming soon
+{: .label .label-yellow}
+
+Deprecated
+{: .label .label-red}
+
+```

docs/ui-components/tables.md

@@ -2,21 +2,10 @@
 layout: default
 title: Tables
 parent: UI Components
-nav_order: 3
+nav_order: 4
 ---
 
 # Tables
-{:.no_toc}
-
-## Table of contents
-{: .no_toc .text-delta }
-
-1. TOC
-{:toc }
-
----
-
-## Default tables
 
 Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
 

docs/ui-components/typography.md

@@ -111,4 +111,4 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
 
 There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization.
 
-[View typography utilities]({{ site.base_url }}{% link docs/utilities.md %}#typography){: .btn .btn-outline }
+[View typography utilities]({{ site.base_url }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }

docs/ui-components/ui-components.md

@@ -9,5 +9,5 @@ permalink: /ui-components
 
 # UI Components
 
-Just the Docs includes all the CSS you need to create structured documentation for your next project. To make it as easy as possible to write documentation in plain Markdown, most styles will require no additional CSS classes.
+To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
 {: .fs-6 .fw-300 }