diff --git a/public/docs/_includes/styleguide/_layouts.jade b/public/docs/_includes/styleguide/_layouts.jade
new file mode 100644
index 0000000000..8b21f4790e
--- /dev/null
+++ b/public/docs/_includes/styleguide/_layouts.jade
@@ -0,0 +1,29 @@
+#sg-layouts.showcase.shadow-1
+  header.showcase-header
+    h2 Basic Layouts
+    p.
+      You will use the following layouts throughout your documenation
+      to specify sections and sub-sections of content.
+
+  .showcase-content
+    .l-main-section
+      h2 Main Section Title
+      p Main section content...
+
+      pre.prettyprint.linenums.lang-html
+        code.
+          .l-main-section
+            h2 Section Title
+            p section content...
+
+      .l-sub-section
+        h3 Sub Section Title
+        p.
+          sub section content... This content is related to the main section
+          content and <strong>falls within</strong> the main section.
+
+        pre.prettyprint.linenums.lang-html
+          code.
+            .l-sub-section
+              h3 Sub Section Title
+              p sub section content...
\ No newline at end of file
diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade
index 18f21a965c..42c827b283 100644
--- a/public/docs/styleguide.jade
+++ b/public/docs/styleguide.jade
@@ -1,5 +1,6 @@
 .grid-fluid
   .c10
+    != partial("/_includes/styleguide/_layouts")
     != partial("/_includes/styleguide/_code-examples")
     != partial("/_includes/styleguide/_alerts")
     != partial("/_includes/styleguide/_tables")