From 97599bbee0bc9fa91d69b199111489a76dad6347 Mon Sep 17 00:00:00 2001
From: Rhyne Vlaservich <rhyneav@gmail.com>
Date: Sat, 1 Aug 2020 15:58:22 -0400
Subject: [PATCH] Add container docs

---
 docs/content/docs/layout/container.md | 53 +++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 docs/content/docs/layout/container.md

diff --git a/docs/content/docs/layout/container.md b/docs/content/docs/layout/container.md
new file mode 100644
index 0000000..64edab1
--- /dev/null
+++ b/docs/content/docs/layout/container.md
@@ -0,0 +1,53 @@
+---
+title: Container
+description: PaperCSS Container
+---
+
+The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few
+different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to
+give you site some extra paper flair!
+
+<div class='paper container margin-bottom-large'>
+  <h4>Responsive Container!</h4>
+  <p>The default</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-lg margin-bottom-large'>
+  <h4>Large Container!</h4>
+  <p>Using <code>container-lg</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-md margin-bottom-large'>
+  <h4>Medium Container!</h4>
+  <p>Using <code>container-md</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-sm margin-bottom-large'>
+  <h4>Small Container!</h4>
+  <p>Using <code>container-sm</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>
+
+<div class='paper container container-xs margin-bottom-large'>
+  <h4>Extra Small Container!</h4>
+  <p>Using <code>container-xs</code><p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus
+    erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+  </p>
+</div>