From 2e8e33853231b34205f4a198930f617d2a664745 Mon Sep 17 00:00:00 2001
From: Jeremy Wilken <gnomation@gnomeontherun.com>
Date: Thu, 6 Aug 2020 11:57:16 -0500
Subject: [PATCH] docs: clean up formatting and layout details

Signed-off-by: Jeremy Wilken <gnomation@gnomeontherun.com>
---
 apps/website/.gitignore                       |    3 +-
 apps/website/.markdownlint.json               |    8 +
 apps/website/.vuepress/config.js              |    3 +-
 .../public/demos/button/icon-css.html         |   12 +-
 .../public/demos/button/types-css.html        |    6 -
 .../public/demos/card/clickable-css.html      |    6 -
 .../public/demos/card/dropdown-css.html       |    2 +-
 .../public/demos/checkbox/basic-css.html      |    8 +-
 .../public/demos/checkbox/disabled-css.html   |   33 +-
 .../public/demos/checkbox/helper-css.html     |   12 +-
 .../demos/checkbox/indeterminate-css.html     |    6 +-
 .../public/demos/checkbox/inline-css.html     |   12 +-
 .../.vuepress/public/demos/header/types.html  |    4 +-
 .../public/demos/login/login-css.html         |    2 +-
 .../public/demos/radio/basic-css.html         |    8 +-
 .../public/demos/radio/disabled-css.html      |   12 +-
 .../public/demos/radio/helper-css.html        |   12 +-
 .../public/demos/radio/inline-css.html        |   12 +-
 .../public/demos/range/basic-css.html         |    2 +-
 .../public/demos/range/disabled-css.html      |   17 +-
 .../public/demos/range/helper-css.html        |   17 +-
 .../.vuepress/theme/components/Home.vue       |    6 +-
 .../.vuepress/theme/components/NavToc.vue     |   26 +
 .../.vuepress/theme/components/Sidebar.vue    |    7 +-
 apps/website/.vuepress/theme/core.js          |    4 +
 .../theme/global-components/ClrImage.vue      |    2 +-
 .../theme/global-components/DocDemo.vue       |    7 +-
 .../website/.vuepress/theme/styles/index.scss |    1 -
 .../.vuepress/theme/styles/overrides.scss     |   63 +
 apps/website/components/accordion/README.md   |    2 +
 apps/website/components/alert/README.md       |   10 +-
 .../website/components/button-group/README.md |   10 +-
 apps/website/components/button/README.md      |   40 +-
 apps/website/components/button/api.md         |    4 +-
 apps/website/components/card/README.md        |   52 +-
 apps/website/components/card/_basic.html      |   21 -
 apps/website/components/card/demo.md.orig     | 1122 -----------------
 apps/website/components/checkbox/README.md    |   12 +-
 apps/website/components/datagrid/README.md    |    4 +-
 apps/website/components/datagrid/api.md       |    2 +-
 apps/website/components/date-picker/README.md |   14 +-
 apps/website/components/form/README.md        |   20 +-
 apps/website/components/form/api.md           |    2 -
 apps/website/components/header/README.md      |   16 +-
 apps/website/components/input/README.md       |    6 +-
 apps/website/components/label/README.md       |    4 -
 apps/website/components/label/api.md          |    8 -
 apps/website/components/login/README.md       |    2 +-
 apps/website/components/modal/README.md       |   18 +-
 apps/website/components/password/README.md    |    4 +-
 .../website/components/progress-bar/README.md |    8 -
 apps/website/components/radio/README.md       |   31 +-
 apps/website/components/radio/api.md          |   11 -
 apps/website/components/range/README.md       |   10 +-
 apps/website/components/range/api.md          |   11 -
 apps/website/components/select/README.md      |    2 +-
 apps/website/components/sidenav/README.md     |    2 +-
 apps/website/components/signpost/README.md    |   10 +-
 .../components/signpost/basic-css.html        |    1 -
 .../website/components/signpost/basic-ng.html |    1 -
 apps/website/components/spinner/README.md     |    8 +-
 apps/website/components/stack-view/README.md  |   16 +-
 apps/website/components/stepper/README.md     |    4 +
 apps/website/components/tab/api.md            |    6 +-
 apps/website/components/table/README.md       |    2 +-
 apps/website/components/textarea/README.md    |    6 +-
 apps/website/components/tooltip/README.md     |   45 +-
 apps/website/components/tree-view/README.md   |   21 +-
 apps/website/foundation/README.md             |    2 -
 apps/website/foundation/app-layout/README.md  |   82 +-
 apps/website/foundation/color/README.md       |    8 +-
 apps/website/foundation/themes/README.md      |   40 +-
 apps/website/foundation/typography/README.md  |   14 +-
 apps/website/get-started/design.md            |   23 +-
 apps/website/package.json                     |    4 +-
 docs/WEBSITE.md                               |   15 +
 package.json                                  |    3 +-
 scripts/update-license.js                     |    4 +-
 yarn.lock                                     |   89 +-
 79 files changed, 594 insertions(+), 1571 deletions(-)
 create mode 100644 apps/website/.markdownlint.json
 delete mode 100644 apps/website/components/card/_basic.html
 delete mode 100644 apps/website/components/card/demo.md.orig
 delete mode 100644 apps/website/components/label/api.md
 delete mode 100644 apps/website/components/signpost/basic-css.html
 delete mode 100644 apps/website/components/signpost/basic-ng.html
 create mode 100644 docs/WEBSITE.md

diff --git a/apps/website/.gitignore b/apps/website/.gitignore
index c9fb9f1e69..a331867989 100644
--- a/apps/website/.gitignore
+++ b/apps/website/.gitignore
@@ -1,3 +1,4 @@
 api/
 dist/
-node_modules/
\ No newline at end of file
+node_modules/
+.vuepress/public/images
diff --git a/apps/website/.markdownlint.json b/apps/website/.markdownlint.json
new file mode 100644
index 0000000000..734be4c03a
--- /dev/null
+++ b/apps/website/.markdownlint.json
@@ -0,0 +1,8 @@
+{
+  "default": true,
+  "line-length": false,
+  "MD024": false,
+  "MD036": false,
+  "no-trailing-punctuation": false,
+  "no-inline-html": false
+}
diff --git a/apps/website/.vuepress/config.js b/apps/website/.vuepress/config.js
index f0dc367850..7c61a60fd1 100644
--- a/apps/website/.vuepress/config.js
+++ b/apps/website/.vuepress/config.js
@@ -125,8 +125,7 @@ module.exports = {
         '@clr/core/textarea': path.resolve('../../dist/core/textarea'),
         '@clr/core/time': path.resolve('../../dist/core/time'),
         '@clr/core/toggle': path.resolve('../../dist/core/toggle'),
-        '@clr/icons': path.resolve('../../dist/clr-icons'),
-        '@clr/icons/shapes/all-shapes': path.resolve('../../dist/clr-icons/shapes/all-shapes.min'),
+        // @TODO Would like to be able to remove these
         'ramda': path.resolve('../../packages/core/node_modules/ramda'),
         'ramda/es/anyPass': path.resolve('../../packages/core/node_modules/ramda/es/anyPass.js'),
         'ramda/es/equals': path.resolve('../../packages/core/node_modules/ramda/es/equals.js'),
diff --git a/apps/website/.vuepress/public/demos/button/icon-css.html b/apps/website/.vuepress/public/demos/button/icon-css.html
index 16f5f34ad2..9ecfd6bf6f 100644
--- a/apps/website/.vuepress/public/demos/button/icon-css.html
+++ b/apps/website/.vuepress/public/demos/button/icon-css.html
@@ -1,18 +1,18 @@
 <button type="button" class="btn btn-icon" aria-label="home">
-  <cds-icon shape="home"></cds-icon>
+  <clr-icon shape="home"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-primary" aria-label="settings">
-  <cds-icon shape="cog"></cds-icon>
+  <clr-icon shape="cog"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-warning" aria-label="warning">
-  <cds-icon shape="warning-standard"></cds-icon>
+  <clr-icon shape="warning-standard"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-danger" aria-label="error">
-  <cds-icon shape="error-standard"></cds-icon>
+  <clr-icon shape="error-standard"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-success" aria-label="done">
-  <cds-icon shape="check"></cds-icon>
+  <clr-icon shape="check"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon" disabled aria-label="home">
-  <cds-icon shape="home"></cds-icon>
+  <clr-icon shape="home"></clr-icon>
 </button>
diff --git a/apps/website/.vuepress/public/demos/button/types-css.html b/apps/website/.vuepress/public/demos/button/types-css.html
index a9c5a8f01f..facdff02a9 100644
--- a/apps/website/.vuepress/public/demos/button/types-css.html
+++ b/apps/website/.vuepress/public/demos/button/types-css.html
@@ -1,9 +1,3 @@
-<!--
-  ~ Copyright (c) 2016-2020 VMware, Inc.
-  ~ All Rights ReserveThis software is released under MIT license.
-  ~ The full license information can be found in LICENSE in the root directory of this project.
-  -->
-
 <button class="btn btn-primary">Primary</button>
 <button class="btn">Secondary</button>
 <button class="btn btn-link">Tertiary</button>
diff --git a/apps/website/.vuepress/public/demos/card/clickable-css.html b/apps/website/.vuepress/public/demos/card/clickable-css.html
index 70c51a065c..c6ee4d783f 100644
--- a/apps/website/.vuepress/public/demos/card/clickable-css.html
+++ b/apps/website/.vuepress/public/demos/card/clickable-css.html
@@ -1,9 +1,3 @@
-<!--
-  ~ Copyright (c) 2016-2020 VMware, Inc.
-  ~ All Rights ReserveThis software is released under MIT license.
-  ~ The full license information can be found in LICENSE in the root directory of this project.
-  -->
-
 <div class="clr-row">
   <div class="clr-col-lg-6 clr-col-12">
     <a href="..." class="card clickable">
diff --git a/apps/website/.vuepress/public/demos/card/dropdown-css.html b/apps/website/.vuepress/public/demos/card/dropdown-css.html
index a29e0df58a..aa7ee1332b 100644
--- a/apps/website/.vuepress/public/demos/card/dropdown-css.html
+++ b/apps/website/.vuepress/public/demos/card/dropdown-css.html
@@ -22,7 +22,7 @@
         <div class="dropdown top-left open">
           <button class="dropdown-toggle btn btn-sm btn-link">
             Dropdown 1
-            <clr-icon shape="caret down"></clr-icon>
+            <clr-icon shape="caret" direction="down"></clr-icon>
           </button>
           <div class="dropdown-menu">
             <a href="..." class="dropdown-item">Item 1</a>
diff --git a/apps/website/.vuepress/public/demos/checkbox/basic-css.html b/apps/website/.vuepress/public/demos/checkbox/basic-css.html
index aae0a2bf17..4fde129e84 100644
--- a/apps/website/.vuepress/public/demos/checkbox/basic-css.html
+++ b/apps/website/.vuepress/public/demos/checkbox/basic-css.html
@@ -1,8 +1,8 @@
 <div class="clr-checkbox-wrapper">
-  <input type="checkbox" id="vertical-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
-  <label for="vertical-checkbox1" class="clr-control-label">option 1</label>
+  <input type="checkbox" id="basic-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
+  <label for="basic-checkbox1" class="clr-control-label">Option 1</label>
 </div>
 <div class="clr-checkbox-wrapper">
-  <input type="checkbox" id="vertical-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
-  <label for="vertical-checkbox2" class="clr-control-label">option 2</label>
+  <input type="checkbox" id="basic-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
+  <label for="basic-checkbox2" class="clr-control-label">Option 2</label>
 </div>
diff --git a/apps/website/.vuepress/public/demos/checkbox/disabled-css.html b/apps/website/.vuepress/public/demos/checkbox/disabled-css.html
index 2799f02e81..f191602d93 100644
--- a/apps/website/.vuepress/public/demos/checkbox/disabled-css.html
+++ b/apps/website/.vuepress/public/demos/checkbox/disabled-css.html
@@ -2,16 +2,37 @@
   <label class="clr-control-label">Disabled checkbox example</label>
   <div class="clr-control-container">
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="checkbox10" name="checkbox-disabled" value="option1" class="clr-checkbox" disabled />
-      <label for="checkbox10" class="clr-control-label">option 1</label>
+      <input
+        type="checkbox"
+        id="disabled-checkbox1"
+        name="checkbox-disabled"
+        value="option1"
+        class="clr-checkbox"
+        disabled
+      />
+      <label for="disabled-checkbox1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="checkbox11" name="checkbox-disabled" value="option2" class="clr-checkbox" disabled />
-      <label for="checkbox11" class="clr-control-label">option 2</label>
+      <input
+        type="checkbox"
+        id="disabled-checkbox2"
+        name="checkbox-disabled"
+        value="option2"
+        class="clr-checkbox"
+        disabled
+      />
+      <label for="disabled-checkbox2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="checkbox12" name="checkbox-disabled" value="option3" class="clr-checkbox" disabled />
-      <label for="checkbox12" class="clr-control-label">option 3</label>
+      <input
+        type="checkbox"
+        id="disabled-checkbox3"
+        name="checkbox-disabled"
+        value="option3"
+        class="clr-checkbox"
+        disabled
+      />
+      <label for="disabled-checkbox3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
diff --git a/apps/website/.vuepress/public/demos/checkbox/helper-css.html b/apps/website/.vuepress/public/demos/checkbox/helper-css.html
index 8def2e0e36..3083636cae 100644
--- a/apps/website/.vuepress/public/demos/checkbox/helper-css.html
+++ b/apps/website/.vuepress/public/demos/checkbox/helper-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Basic checkbox</label>
   <div class="clr-control-container clr-error">
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox1" name="checkbox-error" value="option1" class="clr-checkbox" />
-      <label for="vertical-checkbox1" class="clr-control-label">option 1</label>
+      <input type="checkbox" id="helper-checkbox1" name="checkbox-error" value="option1" class="clr-checkbox" />
+      <label for="helper-checkbox1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox2" name="checkbox-error" value="option2" class="clr-checkbox" />
-      <label for="vertical-checkbox2" class="clr-control-label">option 2</label>
+      <input type="checkbox" id="helper-checkbox2" name="checkbox-error" value="option2" class="clr-checkbox" />
+      <label for="helper-checkbox2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox3" name="checkbox-error" value="option3" class="clr-checkbox" />
-      <label for="vertical-checkbox3" class="clr-control-label">option 3</label>
+      <input type="checkbox" id="helper-checkbox3" name="checkbox-error" value="option3" class="clr-checkbox" />
+      <label for="helper-checkbox3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
diff --git a/apps/website/.vuepress/public/demos/checkbox/indeterminate-css.html b/apps/website/.vuepress/public/demos/checkbox/indeterminate-css.html
index abf68c0006..aa16ecace6 100644
--- a/apps/website/.vuepress/public/demos/checkbox/indeterminate-css.html
+++ b/apps/website/.vuepress/public/demos/checkbox/indeterminate-css.html
@@ -8,13 +8,13 @@
         name="test6"
         value="option1"
         aria-describedby="clr-form-control-13-helper"
-        id="clr-form-control-13"
+        id="indeterminate-checkbox"
         class="ng-untouched ng-pristine ng-valid"
       />
-      <label class="clr-control-label" for="clr-form-control-13">Option 1</label>
+      <label class="clr-control-label" for="indeterminate-checkbox">Option 1</label>
     </clr-checkbox-wrapper>
     <div class="clr-subtext-wrapper">
-      <clr-control-helper id="null-helper" class="clr-subtext ng-star-inserted">Helper text</clr-control-helper>
+      <clr-control-helper class="clr-subtext ng-star-inserted">Helper text</clr-control-helper>
     </div>
   </div>
 </clr-checkbox-container>
diff --git a/apps/website/.vuepress/public/demos/checkbox/inline-css.html b/apps/website/.vuepress/public/demos/checkbox/inline-css.html
index a44c82c30e..21814f830f 100644
--- a/apps/website/.vuepress/public/demos/checkbox/inline-css.html
+++ b/apps/website/.vuepress/public/demos/checkbox/inline-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Inline checkbox example</label>
   <div class="clr-control-container clr-control-inline">
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
-      <label for="vertical-checkbox1" class="clr-control-label">option 1</label>
+      <input type="checkbox" id="inline-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
+      <label for="inline-checkbox1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
-      <label for="vertical-checkbox2" class="clr-control-label">option 2</label>
+      <input type="checkbox" id="inline-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
+      <label for="inline-checkbox2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox3" name="checkbox-full" value="option3" class="clr-checkbox" />
-      <label for="vertical-checkbox3" class="clr-control-label">option 3</label>
+      <input type="checkbox" id="inline-checkbox3" name="checkbox-full" value="option3" class="clr-checkbox" />
+      <label for="inline-checkbox3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
diff --git a/apps/website/.vuepress/public/demos/header/types.html b/apps/website/.vuepress/public/demos/header/types.html
index 6b881a2ffc..217211982f 100644
--- a/apps/website/.vuepress/public/demos/header/types.html
+++ b/apps/website/.vuepress/public/demos/header/types.html
@@ -46,7 +46,7 @@
     <div class="dropdown bottom-left">
       <button class="nav-icon dropdown-toggle" aria-label="toggle settings menu">
         <clr-icon shape="cog"></clr-icon>
-        <clr-icon shape="caret down"></clr-icon>
+        <clr-icon shape="caret" direction="down"></clr-icon>
       </button>
       <div class="dropdown-menu">
         <a href="javascript://" class="dropdown-item">About</a>
@@ -82,7 +82,7 @@
     <div class="dropdown bottom-left">
       <button class="nav-text dropdown-toggle" aria-label="open user profile">
         john.doe@vmware.com
-        <clr-icon shape="caret down"></clr-icon>
+        <clr-icon shape="caret" direction="down"></clr-icon>
       </button>
       <div class="dropdown-menu">
         <a href="javascript://" class="dropdown-item">Preferences</a>
diff --git a/apps/website/.vuepress/public/demos/login/login-css.html b/apps/website/.vuepress/public/demos/login/login-css.html
index 50d7c49b27..9963da6d1c 100644
--- a/apps/website/.vuepress/public/demos/login/login-css.html
+++ b/apps/website/.vuepress/public/demos/login/login-css.html
@@ -1,5 +1,5 @@
 <div class="login-wrapper">
-  <form class="login">
+  <form class="login" style="min-height: 500px;">
     <section class="title">
       <h3 class="welcome">Welcome to</h3>
       Company Product Name
diff --git a/apps/website/.vuepress/public/demos/radio/basic-css.html b/apps/website/.vuepress/public/demos/radio/basic-css.html
index 6402067986..3329d581b9 100644
--- a/apps/website/.vuepress/public/demos/radio/basic-css.html
+++ b/apps/website/.vuepress/public/demos/radio/basic-css.html
@@ -1,8 +1,8 @@
 <div class="clr-radio-wrapper">
-  <input type="radio" id="radio1" name="radio-basic" value="option1" class="clr-radio" />
-  <label for="radio1">Option 1</label>
+  <input type="radio" id="basic-radio1" name="radio-basic" value="option1" class="clr-radio" />
+  <label for="basic-radio1">Option 1</label>
 </div>
 <div class="clr-radio-wrapper">
-  <input type="radio" id="radio1" name="radio-basic" value="option2" class="clr-radio" />
-  <label for="radio1">Option 2</label>
+  <input type="radio" id="basic-radio2" name="radio-basic" value="option2" class="clr-radio" />
+  <label for="basic-radio2">Option 2</label>
 </div>
diff --git a/apps/website/.vuepress/public/demos/radio/disabled-css.html b/apps/website/.vuepress/public/demos/radio/disabled-css.html
index 7c081e1cae..44343216cc 100644
--- a/apps/website/.vuepress/public/demos/radio/disabled-css.html
+++ b/apps/website/.vuepress/public/demos/radio/disabled-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Disabled radio example</label>
   <div class="clr-control-container">
     <div class="clr-radio-wrapper">
-      <input type="radio" id="radio10" name="radio-error" value="option1" class="clr-radio" disabled />
-      <label for="radio10" class="clr-control-label">option 1</label>
+      <input type="radio" id="disabled-radio1" name="radio-error" value="option1" class="clr-radio" disabled />
+      <label for="disabled-radio1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="radio11" name="radio-error" value="option2" class="clr-radio" disabled />
-      <label for="radio11" class="clr-control-label">option 2</label>
+      <input type="radio" id="disabled-radio2" name="radio-error" value="option2" class="clr-radio" disabled />
+      <label for="disabled-radio2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="radio12" name="radio-error" value="option3" class="clr-radio" disabled />
-      <label for="radio12" class="clr-control-label">option 3</label>
+      <input type="radio" id="disabled-radio3" name="radio-error" value="option3" class="clr-radio" disabled />
+      <label for="disabled-radio3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
diff --git a/apps/website/.vuepress/public/demos/radio/helper-css.html b/apps/website/.vuepress/public/demos/radio/helper-css.html
index 5e278ea151..ddcfeb260a 100644
--- a/apps/website/.vuepress/public/demos/radio/helper-css.html
+++ b/apps/website/.vuepress/public/demos/radio/helper-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Helper/Error Radio</label>
   <div class="clr-control-container clr-error">
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio1" name="radio-error" value="option1" class="clr-radio" />
-      <label for="vertical-radio1" class="clr-control-label">option 1</label>
+      <input type="radio" id="helper-radio1" name="radio-error" value="option1" class="clr-radio" />
+      <label for="helper-radio1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio2" name="radio-error" value="option2" class="clr-radio" />
-      <label for="vertical-radio2" class="clr-control-label">option 2</label>
+      <input type="radio" id="helper-radio2" name="radio-error" value="option2" class="clr-radio" />
+      <label for="helper-radio2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio3" name="radio-error" value="option3" class="clr-radio" />
-      <label for="vertical-radio3" class="clr-control-label">option 3</label>
+      <input type="radio" id="helper-radio3" name="radio-error" value="option3" class="clr-radio" />
+      <label for="helper-radio3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
diff --git a/apps/website/.vuepress/public/demos/radio/inline-css.html b/apps/website/.vuepress/public/demos/radio/inline-css.html
index 214674f316..75d5b48119 100644
--- a/apps/website/.vuepress/public/demos/radio/inline-css.html
+++ b/apps/website/.vuepress/public/demos/radio/inline-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Inline radio example</label>
   <div class="clr-control-container clr-control-inline">
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio" />
-      <label for="vertical-radio1" class="clr-control-label">option 1</label>
+      <input type="radio" id="inline-radio1" name="radio-full" value="option1" class="clr-radio" />
+      <label for="inline-radio1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio" />
-      <label for="vertical-radio2" class="clr-control-label">option 2</label>
+      <input type="radio" id="inline-radio2" name="radio-full" value="option2" class="clr-radio" />
+      <label for="inline-radio2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio" />
-      <label for="vertical-radio3" class="clr-control-label">option 3</label>
+      <input type="radio" id="inline-radio3" name="radio-full" value="option3" class="clr-radio" />
+      <label for="inline-radio3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
diff --git a/apps/website/.vuepress/public/demos/range/basic-css.html b/apps/website/.vuepress/public/demos/range/basic-css.html
index 4b8cb832cc..bc375359cf 100644
--- a/apps/website/.vuepress/public/demos/range/basic-css.html
+++ b/apps/website/.vuepress/public/demos/range/basic-css.html
@@ -9,7 +9,7 @@
         max="80"
         aria-describedby="clr-form-control-1-helper"
         id="clr-form-control-1"
-        class="clr-range ng-untouched ng-pristine ng-valid"
+        class="clr-range"
       />
     </div>
   </div>
diff --git a/apps/website/.vuepress/public/demos/range/disabled-css.html b/apps/website/.vuepress/public/demos/range/disabled-css.html
index e7c65c7b98..d5d7ecc34a 100644
--- a/apps/website/.vuepress/public/demos/range/disabled-css.html
+++ b/apps/website/.vuepress/public/demos/range/disabled-css.html
@@ -1,19 +1,16 @@
-<clr-range-container class="clr-form-control clr-row clr-form-control-disabled"
-  ><label class="clr-control-label clr-col-12 clr-col-md-2" for="clr-form-control-3">Disabled</label>
+<div class="clr-form-control clr-row clr-form-control-disabled">
+  <label class="clr-control-label clr-col-12 clr-col-md-2" for="clr-form-control-3">Disabled</label>
   <div class="clr-control-container clr-col-md-10 clr-col-12">
     <div class="clr-range-wrapper progress-fill">
       <input
         type="range"
-        clrrange=""
         name="four"
         aria-describedby="clr-form-control-3-helper"
         id="clr-form-control-3"
-        class="clr-range ng-untouched ng-pristine"
+        class="clr-range"
         disabled=""
-      /><span class="fill-input ng-star-inserted" style="width: 118.68px;"></span>
+      /><span class="fill-input ng-star-inserted" style="width: 0;"></span>
     </div>
-    <clr-control-helper id="clr-form-control-3-helper" class="clr-subtext ng-star-inserted"
-      >Helper text</clr-control-helper
-    >
-  </div></clr-range-container
->
+    <div id="clr-form-control-3-helper" class="clr-subtext">Helper text</div>
+  </div>
+</div>
diff --git a/apps/website/.vuepress/public/demos/range/helper-css.html b/apps/website/.vuepress/public/demos/range/helper-css.html
index a78018a4d0..cb024dedb5 100644
--- a/apps/website/.vuepress/public/demos/range/helper-css.html
+++ b/apps/website/.vuepress/public/demos/range/helper-css.html
@@ -1,18 +1,15 @@
-<clr-range-container class="clr-form-control clr-row"
-  ><label class="clr-control-label clr-col-12 clr-col-md-2" for="clr-form-control-2">Full example</label>
+<div class="clr-form-control clr-row">
+  <label class="clr-control-label clr-col-12 clr-col-md-2" for="helper-range">Full example</label>
   <div class="clr-control-container clr-col-md-10 clr-col-12">
     <div class="clr-range-wrapper progress-fill">
       <input
         type="range"
-        clrrange=""
         name="three"
         aria-describedby="clr-form-control-2-helper"
         id="clr-form-control-2"
-        class="clr-range ng-untouched ng-pristine ng-valid"
-      /><span class="fill-input ng-star-inserted" style="width: 46.44px;"></span>
+        class="clr-range"
+      /><span class="fill-input" style="width: 0px;"></span>
     </div>
-    <clr-control-helper id="clr-form-control-2-helper" class="clr-subtext ng-star-inserted"
-      >Helper text</clr-control-helper
-    >
-  </div></clr-range-container
->
+    <div id="clr-form-control-2-helper" class="clr-subtext">Helper text</div>
+  </div>
+</div>
diff --git a/apps/website/.vuepress/theme/components/Home.vue b/apps/website/.vuepress/theme/components/Home.vue
index f0cedcea9c..8fa0c197f8 100644
--- a/apps/website/.vuepress/theme/components/Home.vue
+++ b/apps/website/.vuepress/theme/components/Home.vue
@@ -12,8 +12,8 @@
         <div cds-layout="m-y:lg m-y@sm:xl">
           <!--          <div>-->
           <h2 cds-text="title center medium">
-            We didn’t invent design systems - we just made the best one. Clarity is an open source, enterprise-focused
-            design system with a core value of accessibility.
+            We built an awesome design system, and we think you’ll agree. Join us to see how Clarity is an open source,
+            enterprise-focused design system with a core design principle of inclusion.
           </h2>
           <!--          </div>-->
         </div>
@@ -161,7 +161,7 @@
               <img cds-layout="container:fill" src="/images/home/img-pr-icons.svg" aria-hidden="true" />
             </router-link>
             <router-link to="/foundation/icons/">
-              <h4 cds-text="title medium" cds-layout="m-t:lg">
+              <h4 cds-text="title regular" cds-layout="m-t:lg">
                 Icons
               </h4>
             </router-link>
diff --git a/apps/website/.vuepress/theme/components/NavToc.vue b/apps/website/.vuepress/theme/components/NavToc.vue
index dc546ee4f2..08e4054928 100644
--- a/apps/website/.vuepress/theme/components/NavToc.vue
+++ b/apps/website/.vuepress/theme/components/NavToc.vue
@@ -25,6 +25,32 @@ export default {
       return this.$route.path === '/foundation/icons/';
     },
   },
+  mounted: function () {
+    // @TODO Enable this or something similar to handle scroll spy
+    // if (document) {
+    //   let headers = [...document.querySelectorAll('h2, h3')];
+    //   let active;
+    //
+    //   const content = document.querySelector('.content-area');
+    //   content.addEventListener('scroll', function () {
+    //     headers = [...document.querySelectorAll('h2, h3')];
+    //     const current = headers.reverse().find(header => content.scrollTop > header.offsetTop);
+    //
+    //     if (current && (current !== active || !active)) {
+    //       active = current;
+    //
+    //       const links = [...document.querySelectorAll('.nav-toc a')];
+    //       links.forEach(link => {
+    //         if (link.textContent.trim() === active.textContent.trim()) {
+    //           link.classList.add('router-link-active');
+    //         } else {
+    //           link.classList.remove('router-link-active');
+    //         }
+    //       });
+    //     }
+    //   });
+    // }
+  },
 };
 </script>
 
diff --git a/apps/website/.vuepress/theme/components/Sidebar.vue b/apps/website/.vuepress/theme/components/Sidebar.vue
index 84c1642742..1ee71d0a68 100644
--- a/apps/website/.vuepress/theme/components/Sidebar.vue
+++ b/apps/website/.vuepress/theme/components/Sidebar.vue
@@ -25,7 +25,9 @@
                     class="nav-link"
                     :to="childItem.path"
                     v-if="childItem.type !== 'external'"
-                    v-bind:class="{ active: childItem.path === activePage.path || childActive(childItem) }"
+                    v-bind:class="{
+                      active: isItemActive(childItem),
+                    }"
                   >
                     <span class="nav-text">{{ childItem.title }}</span>
                   </router-link>
@@ -146,6 +148,9 @@ export default {
       // This is because Vue can't detect changes mutated on an array, so this alerts it of changes
       this.$set(this.states, index, !this.states[index]);
     },
+    isItemActive: function (childItem) {
+      return childItem.path === this.activePage.path || this.activePage.path.startsWith(childItem.path + '/');
+    },
     childActive: function (item) {
       let path = this.$page.path;
       let itemPath = item.path;
diff --git a/apps/website/.vuepress/theme/core.js b/apps/website/.vuepress/theme/core.js
index 82b5a6a387..01a6180cf6 100644
--- a/apps/website/.vuepress/theme/core.js
+++ b/apps/website/.vuepress/theme/core.js
@@ -24,10 +24,12 @@ import {
   ClarityIcons,
   linkIcon,
   fileIcon,
+  popOutIcon,
   downloadIcon,
   copyIcon,
   pencilIcon,
   folderOpenIcon,
+  bookmarkIcon,
   imageGalleryIcon,
   videoGalleryIcon,
   cloudIcon,
@@ -40,6 +42,8 @@ ClarityIcons.addIcons(
   pencilIcon,
   folderOpenIcon,
   cloudIcon,
+  bookmarkIcon,
+  popOutIcon,
   imageGalleryIcon,
   videoGalleryIcon,
   downloadIcon,
diff --git a/apps/website/.vuepress/theme/global-components/ClrImage.vue b/apps/website/.vuepress/theme/global-components/ClrImage.vue
index 07d67a620b..2aca8846e9 100644
--- a/apps/website/.vuepress/theme/global-components/ClrImage.vue
+++ b/apps/website/.vuepress/theme/global-components/ClrImage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="image-wrapper" v-bind:style="{ 'justify-content': align }">
-    <img :src="src" :alt="title" :width="width" />
+    <img :src="src" :alt="title" :width="width" loading="lazy" decoding="async" />
   </div>
 </template>
 
diff --git a/apps/website/.vuepress/theme/global-components/DocDemo.vue b/apps/website/.vuepress/theme/global-components/DocDemo.vue
index 67d9229535..ccf80da78a 100644
--- a/apps/website/.vuepress/theme/global-components/DocDemo.vue
+++ b/apps/website/.vuepress/theme/global-components/DocDemo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-container" :id="id">
-    <div class="demo-wrapper" v-if="demoHTML">
+    <div class="demo-wrapper" v-if="demoHTML" :class="{ center }">
       <span v-html="demoHTML"></span>
     </div>
     <div class="code-wrapper" :class="{ expanded: state }" v-if="hasCodeProjection() || codeHTML">
@@ -31,6 +31,7 @@ export default {
     id: String,
     src: String,
     demo: String,
+    center: Boolean,
     toggle: { type: Boolean | String, default: true },
     file: String | { file: String, lang: { type: String, default: 'html' } },
   },
@@ -106,6 +107,10 @@ export default {
   .has-padding & {
     padding: 1.2rem;
   }
+
+  &.center {
+    text-align: center;
+  }
 }
 
 .code-wrapper {
diff --git a/apps/website/.vuepress/theme/styles/index.scss b/apps/website/.vuepress/theme/styles/index.scss
index 10c345103d..d1a7bcf7a2 100644
--- a/apps/website/.vuepress/theme/styles/index.scss
+++ b/apps/website/.vuepress/theme/styles/index.scss
@@ -1,5 +1,4 @@
 @import '../../../../../dist/clr-ui/clr-ui.min.css';
-@import '../../../../../dist/clr-icons/clr-icons.min.css';
 @import '../../../../../dist/core/global.min.css';
 @import '~prismjs/themes/prism.css';
 @import './overrides.scss';
diff --git a/apps/website/.vuepress/theme/styles/overrides.scss b/apps/website/.vuepress/theme/styles/overrides.scss
index 736aab3860..55364be092 100644
--- a/apps/website/.vuepress/theme/styles/overrides.scss
+++ b/apps/website/.vuepress/theme/styles/overrides.scss
@@ -10,6 +10,12 @@
   }
 }
 
+// Code Snippets
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background-color: #ffffff;
+}
+
 // HEADERS
 #header-types,
 #color-types {
@@ -50,6 +56,63 @@ div[class^='language-'] pre {
   margin: 1rem 0;
 }
 
+// Override icons in header
+.header-1 clr-icon,
+.header-2 clr-icon,
+.header-3 clr-icon,
+.header-4 clr-icon,
+.header-5 clr-icon,
+.header-6 clr-icon {
+  --color: var(--clr-header-title-color);
+  opacity: 1;
+}
+
+// Override icons in buttons
+.btn-primary.btn-icon clr-icon {
+  --color: var(--clr-btn-primary-color, #fff);
+}
+.btn-icon clr-icon {
+  --color: var(--clr-btn-default-color, #0072a3);
+}
+.btn-danger.btn-icon clr-icon,
+.btn-warning.btn-icon clr-icon {
+  --color: var(--clr-btn-default-color, #0072a3);
+}
+.btn-success.btn-icon clr-icon {
+  --color: var(--clr-btn-success-color, #fff);
+}
+.btn-icon[disabled] clr-icon {
+  --color: var(--clr-btn-icon-disabled-color, #666);
+}
+
+// Override icons in alerts
+.alert-danger .alert-icon {
+  --color: var(--clr-alert-danger-icon-color, #991700);
+}
+.alert-warning .alert-icon {
+  --color: var(--clr-alert-warning-icon-color, #454545);
+}
+.alert-info .alert-icon {
+  --color: var(--clr-alert-info-icon-color, #00567a);
+}
+.alert-success .alert-icon {
+  --color: var(--clr-alert-success-icon-color, #306b00);
+}
+.alert-app-level.alert-info .alert-icon,
+.alert-app-level.alert-danger .alert-icon,
+.alert-app-level.alert-warning .alert-icon {
+  --color: var(--clr-app-alert-info-icon-color);
+}
+
+// Override for Clarity Core icon colors
+.clr-validate-icon {
+  --color: var(--cds-token-color-danger-800);
+}
+
+// Center the tooltip demos
+.demo-wrapper .tooptip {
+}
+
 p code {
   color: var(--clr-color-danger-800, #c21d00);
 }
diff --git a/apps/website/components/accordion/README.md b/apps/website/components/accordion/README.md
index 7fd61423db..19eef0fc8e 100644
--- a/apps/website/components/accordion/README.md
+++ b/apps/website/components/accordion/README.md
@@ -41,6 +41,8 @@ Leverage our optional `*clrIfExpanded` structural directive on the `clr-accordio
 
 A basic accordion is made up of a set of panels, each with a title and content.
 
+<ClrImage src="/images/components/accordion/accordion.png" />
+
 <doc-demo src="/demos/accordion/basic.html""></doc-demo>
 
 ## Accessibility
diff --git a/apps/website/components/alert/README.md b/apps/website/components/alert/README.md
index 6ff3541f52..4923140797 100644
--- a/apps/website/components/alert/README.md
+++ b/apps/website/components/alert/README.md
@@ -163,15 +163,15 @@ Clarity has error, warning, information, and success alerts denoted by the follo
 
 ### Placement
 
-##### Alerts in the Content Area
+#### Alerts in the Content Area
 
 <doc-demo src="/demos/alert/content-area-css.html" demo="/demos/alert/content-area-css.html" />
 
-##### Alerts in Cards
+#### Alerts in Cards
 
 <doc-demo src="/demos/alert/card-ng.html" demo="/demos/alert/card-css.html" />
 
-##### Alerts in Modals
+#### Alerts in Modals
 
 <doc-demo src="/demos/alert/modal-ng.html" demo="/demos/alert/modal-css.html" />
 
@@ -183,14 +183,12 @@ Use the `.alert-sm` class with `.alert` for an alert 24 pixels in height. The de
 
 ### App-Level Alerts
 
-###### .alert-app-level
+#### .alert-app-level
 
 This class must be applied with `.alert` to render an app-level alert.
 
 <doc-demo src="/demos/alert/basic-app-level-ng.html" demo="/demos/alert/basic-app-level-css.html" />
 
-### Examples
-
 #### CSS
 
 ##### App-Level Alert in the main-container
diff --git a/apps/website/components/button-group/README.md b/apps/website/components/button-group/README.md
index 35380bfad6..dbc7b18038 100644
--- a/apps/website/components/button-group/README.md
+++ b/apps/website/components/button-group/README.md
@@ -327,7 +327,7 @@ Overflow is used when the button group is larger than its containing space, or u
 <div class="clr-row">
 
 <div class="clr-col-sm-12 clr-col-lg-6 doc-do">
-<div class="doc-example">
+<div class="doc-example" style="padding: 40px 0 130px 0">
 
 <div class="btn-group btn-primary">
   <button class="btn">Create</button>
@@ -356,7 +356,7 @@ Overflow is used when the button group is larger than its containing space, or u
 <div class="clr-row">
 
 <div class="clr-col-sm-12 clr-col-lg-6 doc-do">
-<div class="doc-example">
+<div class="doc-example" style="padding: 40px 0 130px 0">
 
 <div class="btn-group btn-primary">
   <button class="btn">Create</button>
@@ -377,7 +377,7 @@ Overflow is used when the button group is larger than its containing space, or u
 </div>
 
 <div class="clr-col-sm-12 clr-col-lg-6 doc-dont">
-<div class="doc-example">
+<div class="doc-example" style="padding: 40px 0 130px 0">
 
 <div class="btn-group btn-primary btn-icon">
   <button class="btn">
@@ -418,7 +418,7 @@ Use when you want similar actions to be grouped together and separated from othe
 <div class="clr-col-sm-12 clr-col-lg-6 doc-do">
 <div class="doc-example">
 
-<div class="btn-group btn-primary" style="margin-right: 12px">
+<div class="btn-group btn-primary" style="margin-right: 0.6rem">
   <button class="btn">Create</button>
   <button class="btn">Edit</button>
 </div>
@@ -435,7 +435,7 @@ Lead with primary actions followed by secondary actions.
 <div class="clr-col-sm-12 clr-col-lg-6 doc-dont">
 <div class="doc-example">
 
-<div class="btn-group btn-danger" style="margin-right: 12px">
+<div class="btn-group btn-danger" style="margin-right: 0.6rem">
   <button class="btn">Delete</button>
   <button class="btn">Stop</button>
 </div>
diff --git a/apps/website/components/button/README.md b/apps/website/components/button/README.md
index 75d2be7b16..62ab4c38bc 100644
--- a/apps/website/components/button/README.md
+++ b/apps/website/components/button/README.md
@@ -156,36 +156,36 @@ Icon buttons are useful where interface space may be limited. If an icon represe
 
 We recommend you **choose an icon that best describes the action** that the user will be doing. Users may avoid unknown or abstract icon buttons.
 
-#### Types & Sizes
+### Types & Sizes
 
 <div class="clr-row">
 
 <div class="clr-col-sm-12 clr-col-lg-6 doc-do">
 <div class="doc-example">
-<cds-button size="icon" style="margin-right: 12px"><cds-icon shape="check"></cds-icon></cds-button>
-<cds-button size="icon" action="outline" style="margin-right: 12px"><cds-icon shape="folder"></cds-icon></cds-button>
-<cds-button size="icon" action="flat"><cds-icon shape="cog"></cds-icon></cds-button>
+<button class="btn btn-primary btn-icon" style="margin-right: 0.6rem"><clr-icon shape="check"></clr-icon></button>
+<button class="btn btn-icon" style="margin-right: 0.6rem"><clr-icon shape="folder"></clr-icon></button>
+<button class="btn btn-icon btn-link"><clr-icon shape="cog"></clr-icon></button>
 </div>
 Icon buttons are available in the solid, outline, and flat types. It’s also best to use the normal (36px) sized ones. This makes them easier to recognize and to click.
 </div>
 
 <div class="clr-col-sm-12 clr-col-lg-6 doc-dont">
 <div class="doc-example">
-<cds-button size="sm" style="margin-right: 12px"><cds-icon shape="check"></cds-icon></cds-button>
-<cds-button size="sm" action="outline" style="margin-right: 12px"><cds-icon shape="folder"></cds-icon></cds-button>
-<cds-button size="sm" action="flat"><cds-icon shape="cog"></cds-icon></cds-button>
+<button class="btn btn-sm btn-primary btn-icon" style="margin-right: 0.6rem"><clr-icon shape="check"></clr-icon></button>
+<button class="btn btn-sm btn-icon" style="margin-right: 0.6rem"><clr-icon shape="folder"></clr-icon></button>
+<button class="btn btn-icon btn-sm btn-link"><clr-icon shape="cog"></clr-icon></button>
 </div>
 Use small icon buttons in most cases. They are difficult to see and distinguish what the icon is or represents. They also create smaller click targets, making them harder to click.
 </div>
 
 </div>
 
-#### With Text
+### With Text
 
 <div class="clr-row">
 <div class="clr-col-sm-12 clr-col-lg-6 doc-do">
 <div class="doc-example">
-<cds-button size="icon" style="margin-right: 12px"><cds-icon shape="check"></cds-icon> Create</cds-button>
+<cds-button size="icon" style="margin-right: 0.6rem"><cds-icon shape="check"></cds-icon> Create</cds-button>
 <cds-button size="icon" status="danger"><cds-icon shape="times"></cds-icon> Delete</cds-button>
 </div>
 If you have the space, adding text helps users understand the action. Start icon buttons with icons and follow with text.
@@ -193,7 +193,7 @@ If you have the space, adding text helps users understand the action. Start icon
 
 <div class="clr-col-sm-12 clr-col-lg-6 doc-dont">
 <div class="doc-example">
-<cds-button size="icon" style="margin-right: 12px">Create <cds-icon shape="check"></cds-icon></cds-button>
+<cds-button size="icon" style="margin-right: 0.6rem">Create <cds-icon shape="check"></cds-icon></cds-button>
 <cds-button size="icon" status="danger">Delete <cds-icon shape="times"></cds-icon></cds-button>
 </div>
 Start icon buttons with text and follow with icon. This makes them more difficult to scan quickly.
@@ -203,7 +203,7 @@ Start icon buttons with text and follow with icon. This makes them more difficul
 <div class="clr-row" cds-layout="m-t:md">
 <div class="clr-col-sm-12 clr-col-lg-6">
 
-#### Title Attribute
+### Title Attribute
 
 If your icon button is has no text, we recommend adding the `title="` attribute to your icon buttons. This adds some additional context for users unfamiliar with what action your icon button might produce. Hovering over the icon button for a moment will show a tooltip that has the `title` text. The text should reflect the action being completed.
 
@@ -219,39 +219,39 @@ If your icon button is has no text, we recommend adding the `title="` attribute
 
 ### Solid Buttons
 
-<doc-demo src="/demos/button/solid-css.html" demo="/demos/button/solid-css.html"></doc-demo>
+<doc-demo file="/demos/button/solid-css.html" toggle="false" />
 
 ### Outline
 
-<doc-demo src="/demos/button/outline-css.html" demo="/demos/button/outline-css.html"></doc-demo>
+<doc-demo file="/demos/button/outline-css.html" toggle="false" />
 
 ### Flat Buttons
 
-<doc-demo src="/demos/button/flat-css.html" demo="/demos/button/flat-css.html"></doc-demo>
+<doc-demo file="/demos/button/flat-css.html" toggle="false" />
 
 ### Types: Primary,Secondary and Tertiary
 
-<doc-demo src="/demos/button/types-css.html" demo="/demos/button/types-css.html"></doc-demo>
+<doc-demo file="/demos/button/types-css.html" toggle="false" />
 
 ### States: Info, Success and Danger Outline Buttons
 
-<doc-demo src="/demos/button/states-css.html" demo="/demos/button/states-css.html"></doc-demo>
+<doc-demo file="/demos/button/states-css.html" toggle="false" />
 
 ### Sizes: Normal, Small, Normal Flat, Small Flat
 
-<doc-demo src="/demos/button/sizes-css.html" demo="/demos/button/sizes-css.html"></doc-demo>
+<doc-demo file="/demos/button/sizes-css.html" />
 
 ### Block
 
-<doc-demo src="/demos/button/block-css.html" demo="/demos/button/block-css.html"></doc-demo>
+<doc-demo file="/demos/button/block-css.html" toggle="false" />
 
 ### Inverse
 
-<doc-demo src="/demos/button/inverse-css.html" demo="/demos/button/inverse-css.html"></doc-demo>
+<doc-demo file="/demos/button/inverse-css.html" toggle="false" />
 
 ### Icon
 
-<doc-demo src="/demos/button/icon-css.html" demo="/demos/button/icon-css.html"></doc-demo>
+<doc-demo file="/demos/button/icon-css.html" />
 
 ### Loading
 
diff --git a/apps/website/components/button/api.md b/apps/website/components/button/api.md
index 90435b1a6d..813ac864c2 100644
--- a/apps/website/components/button/api.md
+++ b/apps/website/components/button/api.md
@@ -3,10 +3,10 @@ title: API
 toc: true
 ---
 
-# CSS
+## CSS
 
 Clarity defines different button, status and size classes.
 
-## Classes
+### Classes
 
 <DocComponentApi component="ClrButton" item="css" />
diff --git a/apps/website/components/card/README.md b/apps/website/components/card/README.md
index de94edd1bb..aefefae864 100644
--- a/apps/website/components/card/README.md
+++ b/apps/website/components/card/README.md
@@ -39,9 +39,59 @@ Users might not scan to the bottom right of wide cards.
 
 </div>
 
+<div class="clr-row">
+
+<div class="clr-col-sm-12 clr-col-lg-6 doc-do">
+<ClrImage class="doc-example" title="Do align card actions to the left" src="/images/components/card/buttons_in_cards_2.png" align="center" />
+This card correctly aligns actions to the left.
+</div>
+
+<div class="clr-col-sm-12 clr-col-lg-6 doc-dont">
+<ClrImage class="doc-example" title="Don't align buttons to right" src="/images/components/card/buttons_in_cards_1.png" align="center" />
+Users might not scan to the bottom right of wide cards.
+</div>
+
+<div class="clr-col-sm-12 clr-col-lg-6">
+
 Progress bars belong at the card top or above the footer, closest to the triggering action. Be consistent with progress bar placement within a card group.
 
-<ClrImage title="Cards with Progress Bars" src="/images/components/card/card_progress.png" />
+</div>
+
+<div class="clr-col-sm-12 clr-col-lg-6">
+
+<div class="clr-row">
+    <div class="clr-col-6">
+        <div class="card">
+            <div class="card-block">
+                <div class="progress top">
+                    <progress value="30" max="100"></progress>
+                </div>
+                <h4 class="card-title">Card title</h4>
+                <p class="card-text">...</p>
+            </div>
+            <div class="card-footer">
+                <a href="javascript://" class="card-link">Click</a>
+            </div>
+        </div>
+    </div>
+    <div class="clr-col-6">
+        <div class="card">
+            <div class="card-block">
+                <h4 class="card-title">Card title</h4>
+                <p class="card-text">...</p>
+            </div>
+            <div class="card-footer">
+                <div class="progress">
+                    <progress value="50" max="100"></progress>
+                </div>
+                <a href="javascript://" class="card-link">Click</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+</div>
+</div>
 
 ## Behavior
 
diff --git a/apps/website/components/card/_basic.html b/apps/website/components/card/_basic.html
deleted file mode 100644
index 2a00b62a5b..0000000000
--- a/apps/website/components/card/_basic.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="clr-row">
-  <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-title">
-          Block
-        </div>
-        <div class="card-text">
-          Card content can contain text, links, images, data visualizations, lists and more.
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">Footer Action 1</button>
-        <button class="btn btn-sm btn-link">Footer Action 2</button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/apps/website/components/card/demo.md.orig b/apps/website/components/card/demo.md.orig
deleted file mode 100644
index 72d059eda9..0000000000
--- a/apps/website/components/card/demo.md.orig
+++ /dev/null
@@ -1,1122 +0,0 @@
----
-title: Demo
----
-
-#### Basic Card
-
-A `.card` can contain a `.card-header`, `.card-footer`, and one or more `.card-block`s.
-
-<DocDemo>
-
-<!-- <<< ./components/card/_basic.html -->
-
-</DocDemo>
-
-<!-- THIS MIGHT JUST BE REMOVED -->
-
-#### Clickable Cards
-
-Adding the `.clickable` class makes the entire card clickable, initiating a single action.
-
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <a href="#" class="card clickable">
-      <div class="card-img">
-        <img src="./placeholder_350x150.png" />
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-        </p>
-      </div>
-    </a>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <a href="#" class="card clickable">
-      <div class="card-img">
-        <img src="..." />
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam
-          maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-        </p>
-      </div>
-    </a>
-  </div>
-</div>
-```
-
-#### Images in Cards
-
-A `.card-img` can be placed anywhere in the card, or it can occupy the entire card.
-
-<div class="clr-row">
-  <div class="clr-col-lg-4 clr-col-12">
-    <a href="#" class="card clickable">
-      <div class="card-img">
-        <img src="./placeholder_350x150.png" alt="Example of Image in a Card" />
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-        </p>
-      </div>
-    </a>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <a href="#" class="card clickable">
-      <div class="card-block">
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-        </p>
-      </div>
-      <div class="card-img">
-        <img src="./placeholder_350x150.png" alt="Example of Image in a Card" />
-      </div>
-    </a>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <a href="#" class="card clickable">
-      <div class="card-block">
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-        </p>
-      </div>
-      <div class="card-img">
-        <img src="./placeholder_350x150.png" alt="Example of Image in a Card" />
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          Ipsam maiores incidunt eum quasi enim!
-        </p>
-      </div>
-    </a>
-  </div>
-</div>
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <a href="#" class="card clickable card-img">
-      <img src="./placeholder_350x150.png" alt="Example of Image in a Card" />
-    </a>
-  </div>
-  <div class="clr-col-lg-6 clr-col-12">
-    <a href="#" class="card clickable">
-      <div class="card-img">
-        <img src="./placeholder_350x150.png" alt="Example of Image in a Card" />
-      </div>
-    </a>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-lg-4 clr-col-12">
-    <a href="..." class="card clickable">
-      <div class="card-img">
-        <img src="..." alt="..." />
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-    </a>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <a href="..." class="card clickable">
-      <div class="card-block">
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-      <div class="card-img">
-        <img src="..." alt="..." />
-      </div>
-    </a>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <a href="..." class="card clickable">
-      <div class="card-block">
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-      <div class="card-img">
-        <img src="..." alt="..." />
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-    </a>
-  </div>
-</div>
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <a href="..." class="card clickable card-img">
-      <img src="..." alt="..." />
-    </a>
-  </div>
-  <div class="clr-col-lg-6 clr-col-12">
-    <a href="..." class="card clickable">
-      <div class="card-img">
-        <img src="..." alt="..." />
-      </div>
-    </a>
-  </div>
-</div>
-```
-
-#### Dropdowns in Cards
-
-The footer can contain two actions. For more actions, use a [dropdown](/documentation/dropdowns).
-
-<ClientOnly>
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-title">
-          Block
-        </div>
-        <div class="card-text">
-           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias officiis temporibus quod inventore, minus commodi similique corrupti repellat saepe facere aliquam minima deserunt esse nemo, vel illum optio necessitatibus deleniti.
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">
-          Action 1
-        </button>
-        <button class="btn btn-sm btn-link">
-          Action 2
-        </button>
-        <div class="dropdown top-left open">
-          <button class="dropdown-toggle btn btn-sm btn-link">
-            Dropdown 1
-            <cds-icon shape="caret" direction="down"></cds-icon>
-          </button>
-          <div class="dropdown-menu">
-            <a href="#" class="dropdown-item">Item 1</a>
-            <a href="#" class="dropdown-item">Item 2</a>
-            <a href="#" class="dropdown-item">Item 3</a>
-            <a href="#" class="dropdown-item">Item 4</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</ClientOnly>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-title">
-          Block
-        </div>
-        <div class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias officiis temporibus quod inventore, minus
-          commodi similique corrupti repellat saepe facere aliquam minima deserunt esse nemo, vel illum optio
-          necessitatibus deleniti.
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">
-          Action 1
-        </button>
-        <button class="btn btn-sm btn-link">
-          Action 2
-        </button>
-        <div class="dropdown top-left open">
-          <button class="dropdown-toggle btn btn-sm btn-link">
-            Dropdown 1
-            <cds-icon shape="caret down"></cds-icon>
-          </button>
-          <div class="dropdown-menu">
-            <a href="#" class="dropdown-item">Item 1</a>
-            <a href="#" class="dropdown-item">Item 2</a>
-            <a href="#" class="dropdown-item">Item 3</a>
-            <a href="#" class="dropdown-item">Item 4</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-#### Card Media Block
-
-A `.card-media-block` combines a `.card-media-image` and `.card-media-description`. The description can contain a `.card-media-title` and a `.card-media-text`.
-
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-media-block">
-          <img src="./placeholder_60x60.png" class="card-media-image" />
-          <div class="card-media-description">
-            <span class="card-media-title">
-              Project A
-            </span>
-            <span class="card-media-text">
-              Owner: John Doe
-            </span>
-          </div>
-        </div>
-        <div class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt excepturi labore explicabo temporibus, enim voluptate saepe corrupti illum earum eveniet ab veniam vel nisi fugit accusantium perferendis quas facilis quod.
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">Action</button>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-media-block wrap">
-          <img src="./placeholder_60x60.png" class="card-media-image" />
-          <div class="card-media-description">
-            <span class="card-media-title">
-              Project B
-            </span>
-            <span class="card-media-text">
-              Owner: Jane Doe
-            </span>
-          </div>
-        </div>
-        <div class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, ipsum?
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">Action</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-lg-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-media-block">
-          <img src="..." class="card-media-image" />
-          <div class="card-media-description">
-            <span class="card-media-title">
-              Project A
-            </span>
-            <span class="card-media-text">
-              Owner: John Doe
-            </span>
-          </div>
-        </div>
-        <div class="card-text">
-          ...
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">Action</button>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Header
-      </div>
-      <div class="card-block">
-        <div class="card-media-block wrap">
-          <img src="..." class="card-media-image" />
-          <div class="card-media-description">
-            <span class="card-media-title">
-              Project B
-            </span>
-            <span class="card-media-text">
-              Owner: Jane Doe
-            </span>
-          </div>
-        </div>
-        <div class="card-text">
-          ...
-        </div>
-      </div>
-      <div class="card-footer">
-        <button class="btn btn-sm btn-link">Action</button>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-#### Alerts in Cards
-
-Cards can contain [alerts](/documentation/alerts).
-
-<div class="card">
-  <div class="card-block">
-  <cds-alert-group status="warning" size="sm" type="default">
-    <cds-alert>Use small alerts in a card.</cds-alert>
-  </cds-alert-group>
-    <!-- <div class="alert alert-warning alert-sm">
-      <button type="button" class="close" aria-label="Close">
-        <cds-icon aria-hidden="true" shape="close"></cds-icon>
-      </button>
-      <div class="alert-item static">
-        <span class="alert-text">
-          Use small alerts in a card.
-        </span>
-      </div>
-    </div> -->
-    <div class="card-media-block wrap">
-      <img class="card-media-image" src="./placeholder_60x60.png" />
-      <div class="card-media-description">
-        <span class="card-media-title">Project B</span>
-        <span class="card-media-text">Owner: Jane Doe</span>
-      </div>
-    </div>
-    <p class="card-text">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </p>
-  </div>
-  <div class="card-footer">
-    <a class="card-link">Button One</a>
-    <a class="card-link">Button Two</a>
-  </div>
-</div>
-
-```html
-<div class="card">
-  <div class="card-block">
-    <div class="alert alert-warning alert-sm">
-      <button type="button" class="close" aria-label="Close">
-        <cds-icon aria-hidden="true" shape="close"></cds-icon>
-      </button>
-      <div class="alert-item static">
-        <span class="alert-text">
-          Use small alerts in a card.
-        </span>
-      </div>
-    </div>
-    <div class="card-media-block wrap">
-      <img class="card-media-image" src="//placehold.it/60x60" />
-      <div class="card-media-description">
-        <span class="card-media-title">Project B</span>
-        <span class="card-media-text">Owner: Jane Doe</span>
-      </div>
-    </div>
-    <p class="card-text">
-      ...
-    </p>
-  </div>
-  <div class="card-footer">
-    <a class="card-link">Button One</a>
-    <a class="card-link">Button Two</a>
-  </div>
-</div>
-```
-
-#### Lists in Cards
-
-Cards can contain [lists](/documentation/lists).
-
-<div class="clr-row">
-  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Unordered Lists
-      </div>
-      <div class="card-block">
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="card-block">
-        <ul class="list">
-          <li>Ullamco Laboris</li>
-          <li>
-            Nisi Ut Aliquip
-            <ul class="list">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-          <li>Consequat</li>
-          <li>Excepteur sint occaecat cupidatat non proident</li>
-          <li>Enim ad Minim</li>
-          <li>
-            Occeaecat
-            <ul class="list-unstyled">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-      <div class="card-footer">
-        <a class="btn btn-primary">Action</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Ordered Lists
-      </div>
-      <div class="card-block">
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="card-block">
-        <ol class="list">
-          <li>Ullamco Laboris</li>
-          <li>
-            Nisi Ut Aliquip
-            <ol class="list">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ol>
-          </li>
-          <li>Consequat</li>
-          <li>Excepteur sint occaecat cupidatat non proident</li>
-          <li>Enim ad Minim</li>
-          <li>
-            Occeaecat
-            <ol class="list-unstyled">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ol>
-          </li>
-        </ol>
-      </div>
-      <div class="card-footer">
-        <a class="btn btn-primary">Action</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Unstyled Lists
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </div>
-      <div class="card-block">
-        <ul class="list-unstyled">
-          <li>Ullamco Laboris</li>
-          <li>
-            Nisi Ut Aliquip
-            <ul class="list">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-          <li>Consequat</li>
-          <li>Excepteur sint occaecat cupidatat non proident</li>
-          <li>Enim ad Minim</li>
-          <li>
-            Occeaecat
-            <ul class="list-unstyled">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-      <div class="card-footer">
-        <a class="btn btn-primary">Action</a>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Unordered Lists
-      </div>
-      <div class="card-block">
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="card-block">
-        <ul class="list">
-          <li>Ullamco Laboris</li>
-          <li>
-            Nisi Ut Aliquip
-            <ul class="list">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-          <li>Consequat</li>
-          <li>Excepteur sint occaecat cupidatat non proident</li>
-          <li>Enim ad Minim</li>
-          <li>
-            Occeaecat
-            <ul class="list-unstyled">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-      <div class="card-footer">
-        <a class="btn btn-primary">Action</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Ordered Lists
-      </div>
-      <div class="card-block">
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="card-block">
-        <ol class="list">
-          <li>Ullamco Laboris</li>
-          <li>
-            Nisi Ut Aliquip
-            <ol class="list">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ol>
-          </li>
-          <li>Consequat</li>
-          <li>Excepteur sint occaecat cupidatat non proident</li>
-          <li>Enim ad Minim</li>
-          <li>
-            Occeaecat
-            <ol class="list-unstyled">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ol>
-          </li>
-        </ol>
-      </div>
-      <div class="card-footer">
-        <a class="btn btn-primary">Action</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
-    <div class="card">
-      <div class="card-header">
-        Unstyled Lists
-      </div>
-      <div class="card-block">
-        <p class="card-text">
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </div>
-      <div class="card-block">
-        <ul class="list-unstyled">
-          <li>Ullamco Laboris</li>
-          <li>
-            Nisi Ut Aliquip
-            <ul class="list">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-          <li>Consequat</li>
-          <li>Excepteur sint occaecat cupidatat non proident</li>
-          <li>Enim ad Minim</li>
-          <li>
-            Occeaecat
-            <ul class="list-unstyled">
-              <li>Exercitation</li>
-              <li>Laboris</li>
-              <li>Commodo</li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-      <div class="card-footer">
-        <a class="btn btn-primary">Action</a>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-#### List Groups in Cards
-
-Cards can contain list groups.
-
-<div class="card">
-  <div class="card-img">
-    <img src="./placeholder_350x150.png" />
-  </div>
-  <div class="card-block">
-    <h4 class="card-title">Title</h4>
-    <p class="card-text">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aut. Nihil nemo, necessitatibus earum.
-    </p>
-  </div>
-  <ul class="list-group">
-    <li class="list-group-item">Lorem ipsum dolor.</li>
-    <li class="list-group-item">Lorem ipsum dolor sit.</li>
-    <li class="list-group-item">Lorem ipsum.</li>
-  </ul>
-  <div class="card-footer">
-    <a href="#" class="btn btn-sm btn-link">Action 1</a>
-    <a href="#" class="btn btn-sm btn-link">Action 2</a>
-  </div>
-</div>
-
-```html
-<div class="card">
-  <div class="card-img">
-    <img src="..." />
-  </div>
-  <div class="card-block">
-    <h4 class="card-title">Title</h4>
-    <p class="card-text">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aut. Nihil nemo, necessitatibus earum.
-    </p>
-  </div>
-  <ul class="list-group">
-    <li class="list-group-item">Lorem ipsum dolor.</li>
-    <li class="list-group-item">Lorem ipsum dolor sit.</li>
-    <li class="list-group-item">Lorem ipsum.</li>
-  </ul>
-  <div class="card-footer">
-    <a href="..." class="btn btn-sm btn-link">Action 1</a>
-    <a href="..." class="btn btn-sm btn-link">Action 2</a>
-  </div>
-</div>
-```
-
-#### Progress Bars in Cards
-
-Cards can contain [progress bars](/documentation/progress).
-
-<div class="clr-row">
-  <div class="clr-col-12 clr-col-sm-4">
-    <div class="card">
-      <div class="card-block">
-        <div class="progress top">
-          <progress value="40" max="100"></progress>
-        </div>
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">...</p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="card-link">Click</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-12 clr-col-sm-4">
-    <div class="card">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">...</p>
-      </div>
-      <div class="card-footer">
-        <div class="progress">
-          <progress value="70" max="100"></progress>
-        </div>
-        <a href="..." class="card-link">Click</a>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-12 clr-col-sm-4">
-    <div class="card">
-      <div class="card-block">
-        <div class="progress top">
-          <progress value="..." max="100"></progress>
-        </div>
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">...</p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="card-link">Click</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-12 clr-col-sm-4">
-    <div class="card">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">...</p>
-      </div>
-      <div class="card-footer">
-        <div class="progress">
-          <progress value="..." max="100"></progress>
-        </div>
-        <a href="..." class="card-link">Click</a>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-<div class="clr-row">
-  <div class="clr-col-12 clr-col-sm-6">
-    <div class="card">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">Here is a progress bar at the very top of a card.</p>
-        <div class="progress-block">
-          <label>Label</label>
-          <div class="progress-static">
-            <div class="progress-meter" data-value="80"></div>
-          </div>
-        </div>
-        <div class="progress-block">
-          <label>Longer Label</label>
-          <div class="progress-static">
-            <div class="progress-meter" data-value="40"></div>
-          </div>
-        </div>
-        <div class="progress-block">
-          <label>Really, Really, Really Long Label</label>
-          <div class="progress success">
-            <progress value="60" max="100" data-displayval="60%"></progress>
-          </div>
-        </div>
-      </div>
-      <div class="card-footer">
-        <div class="progress-static top">
-          <div class="progress-meter" data-value="..."></div>
-        </div>
-        <a href="#" class="card-link">Click</a>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-12 clr-col-sm-6">
-    <div class="card">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">Here is a progress bar at the very top of a card.</p>
-        <div class="progress-block">
-          <label>Label</label>
-          <div class="progress-static">
-            <div class="progress-meter" data-value="..."></div>
-          </div>
-        </div>
-        <div class="progress-block">
-          <label>Longer Label</label>
-          <div class="progress-static">
-            <div class="progress-meter" data-value="..."></div>
-          </div>
-        </div>
-        <div class="progress-block">
-          <label>Really, Really, Really Long Label</label>
-          <div class="progress success">
-            <progress value="..." max="100" data-displayval="...%"></progress>
-          </div>
-        </div>
-      </div>
-      <div class="card-footer">
-        <div class="progress-static top">
-          <div class="progress-meter" data-value="..."></div>
-        </div>
-        <a href="..." class="card-link">Click</a>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-#### Card Layout
-
-Clarity recommends using cards in a [grid](/components/grid) or a CSS column layout.
-
-##### Cards in a Grid
-
-<div class="clr-row">
-  <div class="clr-col-lg-4 clr-col-12">
-    <div class="card">
-      <div class="card-block">
-        <h3 class="card-title">Card 1</h3>
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="btn btn-sm btn-link">Action 1</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <div class="card">
-      <div class="card-block">
-        <h3 class="card-title">Card 2</h3>
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="btn btn-sm btn-link">Action 2</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <div class="card">
-      <div class="card-block">
-        <h3 class="card-title">Card 3</h3>
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="btn btn-sm btn-link">Action 3</a>
-      </div>
-    </div>
-  </div>
-</div>
-
-```html
-<div class="clr-row">
-  <div class="clr-col-lg-4 clr-col-12">
-    <div class="card">
-      <div class="card-block">
-        <h3 class="card-title">Card 1</h3>
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="btn btn-sm btn-link">Action 1</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <div class="card">
-      <div class="card-block">
-        <h3 class="card-title">Card 2</h3>
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="btn btn-sm btn-link">Action 2</a>
-      </div>
-    </div>
-  </div>
-  <div class="clr-col-lg-4 clr-col-12">
-    <div class="card">
-      <div class="card-block">
-        <h3 class="card-title">Card 3</h3>
-        <p class="card-text">
-          ...
-        </p>
-      </div>
-      <div class="card-footer">
-        <a href="..." class="btn btn-sm btn-link">Action 3</a>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-##### Cards in CSS Columns
-
-Cards can be placed in `.card-columns`. The default number of columns is three, but can be changed to two or four by adding `.card-columns-2` or `.card-columns-4`.
-
-<div class="card-columns">
-  <div class="card">
-    <div class="card-img">
-      <img src="./placeholder_350x150.png" />
-    </div>
-    <div class="card-block">
-      <p class="card-text">
-        Ipsam maiores incidunt eum quasi enim!
-      </p>
-    </div>
-  </div>
-  <div class="card card-block">
-    <h3 class="card-title">Title</h3>
-    <p class="card-text">
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-  </div>
-  <div class="card">
-    <div class="card-block">
-      <p class="card-text">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      </p>
-    </div>
-    <div class="card-img">
-      <img src="./placeholder_350x150.png" />
-    </div>
-    <div class="card-block">
-      <p class="card-text">
-        Ipsam maiores incidunt eum quasi enim!
-      </p>
-    </div>
-  </div>
-  <div class="card card-block">
-    <h3 class="card-title">Title</h3>
-    <p class="card-text">
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-  </div>
-  <div href="..." class="card">
-    <div class="card-block">
-      <p class="card-text">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-      </p>
-    </div>
-    <div class="card-img">
-      <img src="./placeholder_350x150.png" />
-    </div>
-  </div>
-  <div class="card card-block">
-    <h3 class="card-title">Title</h3>
-    <p class="card-text">
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-  </div>
-  <div class="card">
-    <div class="card-block">
-      <h3 class="card-title">Title</h3>
-      <p class="card-text">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-      </p>
-    </div>
-    <div class="card-footer">
-      <a href="..." class="btn btn-primary">Action</a>
-    </div>
-  </div>
-  <a href="..." class="card clickable">
-    <div class="card-block">
-      <p class="card-text">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur magnam eos amet sit rem. Ipsam maiores incidunt eum quasi enim! Corporis sunt nisi totam molestias quam commodi maxime mollitia.
-      </p>
-    </div>
-    <div class="card-img">
-      <img src="./placeholder_350x150.png" />
-    </div>
-  </a>
-</div>
-</div>
-
-```html
-<div class="card-columns">
-  <div class="card">
-    <div class="card-img">
-      <img src="..." />
-    </div>
-    <div class="card-block">
-      <p class="card-text">
-        ...
-      </p>
-    </div>
-  </div>
-  <div class="card card-block">
-    <h3 class="card-title">Title</h3>
-    <p class="card-text">
-      ...
-    </p>
-  </div>
-  <div class="card">
-    <div class="card-block">
-      <p class="card-text">
-        ...
-      </p>
-    </div>
-    <div class="card-img">
-      <img src="..." />
-    </div>
-    <div class="card-block">
-      <p class="card-text">
-        ...
-      </p>
-    </div>
-  </div>
-  <div class="card card-block">
-    <h3 class="card-title">Title</h3>
-    <p class="card-text">
-      ...
-    </p>
-  </div>
-  <div href="..." class="card">
-    <div class="card-block">
-      <p class="card-text">
-        ...
-      </p>
-    </div>
-    <div class="card-img">
-      <img src="..." />
-    </div>
-  </div>
-  <div class="card card-block">
-    <h3 class="card-title">Title</h3>
-    <p class="card-text">
-      ...
-    </p>
-  </div>
-  <div class="card">
-    <div class="card-block">
-      <h3 class="card-title">Title</h3>
-      <p class="card-text">
-        ...
-      </p>
-    </div>
-    <div class="card-footer">
-      <a href="..." class="btn btn-primary">Action</a>
-    </div>
-  </div>
-  <a href="..." class="card clickable">
-    <div class="card-block">
-      <p class="card-text">
-        ...
-      </p>
-    </div>
-    <div class="card-img">
-      <img src="..." />
-    </div>
-  </a>
-</div>
-```
diff --git a/apps/website/components/checkbox/README.md b/apps/website/components/checkbox/README.md
index d36c70d943..bdf6b0ae28 100644
--- a/apps/website/components/checkbox/README.md
+++ b/apps/website/components/checkbox/README.md
@@ -14,17 +14,7 @@ Use a checkbox for yes or no choices, for example "Remember me" on the [login pa
 
 For on and off options, use a [toggle switch](/components/toggle).
 
-<!-- [//]: # Types -->
-
-<!-- [//]: # Anatomy -->
-
-<!-- [//]: # Behavior -->
-
-<!-- [//]: # Placement - Checkboxes are often use in forms see: vertical, horizontal and compact form elements. -->
-
-<!-- [//]: # Content -->
-
-## Code Examples
+## Code & Examples
 
 ### Basic checkbox button
 
diff --git a/apps/website/components/datagrid/README.md b/apps/website/components/datagrid/README.md
index c83c5a560d..c298974727 100644
--- a/apps/website/components/datagrid/README.md
+++ b/apps/website/components/datagrid/README.md
@@ -26,7 +26,7 @@ For data sets with a blend of text, images, and data visualizations, or content
 
 The Clarity datagrid uses 13px ClarityCity REGULAR for content and 11px Clarity City SEMIBOLD for column headers. Consolas (monospaced) is recommended for tabular data where alignment of columns improves legibility.
 
-## Types
+## Code & Examples
 
 ### Basic Structure
 
@@ -877,7 +877,7 @@ It is possible to listen for changes to the Detail Pane state, by desugaring the
 
 #### Controlling the Detail Pane programmatically
 
-In some cases, you might want to programmatically control the toggling of the Detail Pane, which you can do by desugaring `*clrIfDetail` directive and using the two way binding syntax. Be sure to include the local template variable like `let-detail` to get access to the row object.
+In some cases, you might want to programmatically control the toggling of the Detail Pane, which you can do by desugaring `*clrIfDetail` directive and using the two way binding syntax. To open the detail pane, set the `detailState` value to the row object, or to `null` to close it. Be sure to include the local template variable like `let-detail` to get access to the row object.
 
 <DocDemo toggle="false">
 
diff --git a/apps/website/components/datagrid/api.md b/apps/website/components/datagrid/api.md
index 8e5269c11c..b2edeb4313 100644
--- a/apps/website/components/datagrid/api.md
+++ b/apps/website/components/datagrid/api.md
@@ -96,7 +96,7 @@ column and declare filters, sorting as well as if it can be hidden by the user.
 Declares the filter component to be applied on the container (clr-dg-column) element. This is only needed when
 creating and applying custom filters to a column.
 
-TODO: Add in docs for clr-dg-string-filter and clr-dg-numeric-filter
+<!-- @TODO: Add in docs for clr-dg-string-filter and clr-dg-numeric-filter -->
 
 #### Selector & Basic Usage
 
diff --git a/apps/website/components/date-picker/README.md b/apps/website/components/date-picker/README.md
index 82e3c555c7..04da8516f5 100644
--- a/apps/website/components/date-picker/README.md
+++ b/apps/website/components/date-picker/README.md
@@ -13,7 +13,7 @@ Date Picker is a popover control for picking a date value for a date input. It's
 <p>Date Pickers aren’t helpful when the date is a known value like a birthday. A user will likely want to type that value in versus hunting for it in a Date Picker. In cases where space is limited, it may be a good idea to omit the Date Picker.</p>
 </div>
 <div class="clr-col doc-wrapper">
-<ClrImage src="/images/components/datepicker/datepicker.png" />
+<ClrImage src="/images/components/datepicker/basic-demo.png" />
 </div>
 </div>
 
@@ -109,7 +109,7 @@ The `min` and the `max` attributes can be used alone or together to have both an
 
 Clarity uses the [locale identifiers](https://github.com/angular/angular/tree/master/packages/common/locales) supported by Angular for getting the date format, first day of the week, month and day names. These values are used to generate the input field placeholder and the calendar.
 
-#### Placeholder
+### Placeholder
 
 Using the date format retrieved from Angular, the placeholder is generated in one of the following formats:
 {.custom-block}
@@ -213,9 +213,9 @@ You can add a two way binding on clrDate to access the date value. The benefit o
 
 <doc-demo src="/demos/datepicker/js-date-object.html" />
 
-```
+```javascript
 // clrDate Output
-"2020-07-16T17:56:30.728Z"
+'2020-07-16T17:56:30.728Z';
 ```
 
 </DocDemo>
@@ -224,15 +224,15 @@ You can add a two way binding on clrDate to access the date value. The benefit o
 
 Template Driven Forms use the `ngModel` directive to create a binding between the model and the input field.
 
-##### HTML
+#### HTML
 
 <doc-demo src="/demos/datepicker/template-driven.html" />
 
-##### TypeScript
+#### TypeScript
 
 <doc-demo src="/demos/datepicker/template-driven.ts" />
 
-##### Example Output
+#### Example Output
 
 <DocDemo toggle="false">
 
diff --git a/apps/website/components/form/README.md b/apps/website/components/form/README.md
index 17f4c5e769..cd18e39c4b 100644
--- a/apps/website/components/form/README.md
+++ b/apps/website/components/form/README.md
@@ -141,7 +141,7 @@ Deprecation: Since v4, we will no longer handle setting `aria-live` and announci
 
 Clarity has created a set of directives to help manage forms with minimal effort by developers. The structure is more condensed and easier to implement, so it is the recommended approach to use the following if you are using Angular. More form controls are being added regularly.
 
-#### Basic form
+### Basic form
 
 Then declare a form start by adding the `clrForm` directive to the form element. This will wire up some internals to manage the form itself.
 
@@ -155,7 +155,7 @@ Then declare a form start by adding the `clrForm` directive to the form element.
 
 </DocDemo>
 
-#### Layout options
+### Layout options
 
 If you wish to have a different layout, then you can use the `clrLayout` directive to set the desired layout. The appropriate grid classes will be applied to enable automatic layout switching for mobile viewports.
 
@@ -169,7 +169,7 @@ If you wish to have a different layout, then you can use the `clrLayout` directi
 
 </DocDemo>
 
-#### Basic structure
+### Basic structure
 
 When you start to fill in your form controls, each will should be wrapped in a container like you see here in this text input example.
 
@@ -190,7 +190,7 @@ When you start to fill in your form controls, each will should be wrapped in a c
 
 </DocDemo>
 
-#### Helper and validation messages
+### Helper and validation messages
 
 These Angular components also support built in helper text and validation with error messages.
 
@@ -241,11 +241,11 @@ For screen reader accessibility, forms with validation messages should provide a
 
 This pattern is more accessible and clear by writing the word "error" explicitly for users (and screen readers) to read, with research to back this up compared with the use of a red required asterisk (\*). See [this article from fusionbox](https://www.fusionbox.com/blog/detail/rethinking-the-red-required-asterisk-for-better-form-ux/599/) provides some evidence for this rationale.
 
-#### Multiple error messages
+### Multiple error messages
 
 If you want to support multiple error messages, you can do this by defining an error message for each scenario using `clrIfError`. It is recommended that you create an error message for each validator you specify. Use the validator name provided in the binding for `*clrIfError="'errorName'"`, which might be your custom validator or a built in Angular one.
 
-#### Reset and force validation
+### Reset and force validation
 
 All Clarity form controls support resetting the validation state simply by calling the `reset()` method on the `FormControl` or `FormGroup`.
 
@@ -322,7 +322,7 @@ export class ReactiveFormsDemo {
 
 </DocDemo>
 
-#### Layout with grid
+### Layout with grid
 
 You can use the `clrLabelSize` directive to configure the label width for an entire form. This is useful for `horizontal` and compact layouts, but doesn't apply when you are using `vertical` layout. It will accept a number between 1-12 to calculate the width according to our grid, and the controls will adopt the remaining size. For example if you pass `clrLabelSize="4"` it will size the controls to use 8 grid columns for a total of 12 columns.
 
@@ -340,7 +340,7 @@ You can use the `clrLabelSize` directive to configure the label width for an ent
 
 </DocDemo>
 
-#### Overriding column widths
+### Overriding column widths
 
 For horizontal layouts, you can override the default widths for labels (2 columns) and controls (10 columns). Even on horizontal layouts, the default behavior should still use a vertical layout for narrow mobile sizes. That means you should always include the class `clr-col-12` on both the input and label. Ensure your override columns add up to 12 to use the full space.
 
@@ -359,7 +359,7 @@ For horizontal layouts, you can override the default widths for labels (2 column
 
 </DocDemo>
 
-#### Reactive Forms
+### Reactive Forms
 
 Forms also work with reactive forms with the same support for validations.
 
@@ -396,7 +396,7 @@ export class ReactiveFormsDemo {
 
 </DocDemo>
 
-#### Custom and non-Clarity Controls
+### Custom and non-Clarity Controls
 
 Applications often have form controls that are not supported by Clarity directly. To make these controls work nicely with Clarity, you can wrap them in a generic control container. Regardless if you make your own form controls or import a third party control, the generic container should help make your controls more consistent. The only requirement is that the form control works with Angular forms (Reactive or Template-Driven).
 
diff --git a/apps/website/components/form/api.md b/apps/website/components/form/api.md
index c4edc9a74a..445c39753c 100644
--- a/apps/website/components/form/api.md
+++ b/apps/website/components/form/api.md
@@ -97,8 +97,6 @@ Enable helper messages per form control.
 
 ## Angular Directives
 
-#### Bindings
-
 ### ClrLayout
 
 Use the ClrLayout directive to enable different layouts for the form.
diff --git a/apps/website/components/header/README.md b/apps/website/components/header/README.md
index 892ac57a39..0184bd18ca 100644
--- a/apps/website/components/header/README.md
+++ b/apps/website/components/header/README.md
@@ -228,7 +228,9 @@ You can read more in about search in the design spec. The search component itsel
 
 The header and subnav support app-level information and navigation links.
 
-###### .header
+### Basics
+
+#### .header
 
 `.header` is a wrapper around the following four sections:
 
@@ -237,21 +239,21 @@ The header and subnav support app-level information and navigation links.
 - Search
 - Settings
 
-###### .branding
+#### .branding
 
 `.branding` contains the product logo and the product title. The logo extends the `.clr-icon` class and the title extends the `.title` class.
 
-###### .header-nav
+#### .header-nav
 
 `.header-nav` contains the navigation links. Each navigation link extends the `.nav-link` class along with the `.nav-text` class for text links and the `.nav-icon` class icon links.
 
 <doc-demo file="/demos/header/basic.html" />
 
-###### .search
+#### .search
 
 `.search` is a form containing the search icon and the search input field.
 
-###### .header-actions
+#### .header-actions
 
 `.header-actions` is a wrapper that contains secondary navigation links. Each navigation link extends the `.nav-link` class. Navigation links can be text or icons.
 
@@ -259,11 +261,11 @@ Info
 
 <!-- For information about headers with responsive navigation, see [Responsive Navigation](/foundation/navigation#responsive_navigation). -->
 
-#### Types
+### Types
 
 <doc-demo file="/demos/header/types.html" id="header-types" />
 
-#### Color Options
+### Color Options
 
 <doc-demo file="/demos/header/colors.html" id="color-types" />
 
diff --git a/apps/website/components/input/README.md b/apps/website/components/input/README.md
index 4884f5abf0..a8a55523dd 100644
--- a/apps/website/components/input/README.md
+++ b/apps/website/components/input/README.md
@@ -87,13 +87,13 @@ For cases with highly limited space, we provide a compact form layout.
 
 If you are using Angular, the recommended approach is to always use the `ClrInput` directive on your inputs to help manage the form control. By using `ClrInput`, you'll automatically be able to leverage built in validation, helper text, and layout features in forms.
 
-#### Basic input
+### Basic input
 
 This is the most basic way to create an input inside of a form. This is only if you don't have a need for a label or validation. You need to add `clrInput` to your input to wire up the directive. Notice, it is not necessary to add `type="text"` as it is handled automatically. It will only work if you have the control wired up with either a template driven form or reactive form.
 
 <doc-demo src="/demos/input/basic-ng.html" demo="/demos/input/basic-css.html" toggle="false" />
 
-#### Labels
+### Labels
 
 For anything beyond a standalone input field, you'll need to wrap your input with the `ClrInputContainer` component. This is required to contain all of the logic and validation details for the individual input control.
 
@@ -101,7 +101,7 @@ Then you can add a `label` element and it will automatically get laid out correc
 
 <doc-demo src="/demos/input/label-ng.html" demo="/demos/input/label-css.html" />
 
-#### Helper and error messages
+### Helper and error messages
 
 The input form control wires up with the validations placed on an input, such as `required` or even custom built validators in Angular. Under the hood, it looks at the `NgControl` values to determine the control validity, and display the helper text or error message accordingly.
 
diff --git a/apps/website/components/label/README.md b/apps/website/components/label/README.md
index 823abf6f8f..1d45588a5b 100644
--- a/apps/website/components/label/README.md
+++ b/apps/website/components/label/README.md
@@ -101,10 +101,6 @@ A label can be dismissed. Use a close icon at the right-most side of a label to
 </div>
 </div>
 
-[//]: # 'DEMO - James and Jimmy'
-
-[//]: # Placement
-
 ## Content
 
 ### Status
diff --git a/apps/website/components/label/api.md b/apps/website/components/label/api.md
deleted file mode 100644
index 2ed34febc0..0000000000
--- a/apps/website/components/label/api.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: API
-toc: true
----
-
-# API
-
-### Code & Examples
diff --git a/apps/website/components/login/README.md b/apps/website/components/login/README.md
index 6e5f2cc436..c67100ec92 100644
--- a/apps/website/components/login/README.md
+++ b/apps/website/components/login/README.md
@@ -7,7 +7,7 @@ A predefined form for applications that require authentication as part of the lo
 
 ## Usage
 
-The login form is flexible and should be customized removing or adding = elements as needed to suit a specific use case.
+The login form is flexible and should be customized removing or adding elements as needed to suit a specific use case.
 <doc-demo src="/demos/login/login-ng.html" demo="/demos/login/login-css.html" />
 
 ### Validation
diff --git a/apps/website/components/modal/README.md b/apps/website/components/modal/README.md
index ab38cb9b3a..d3d2f49aa4 100644
--- a/apps/website/components/modal/README.md
+++ b/apps/website/components/modal/README.md
@@ -33,19 +33,19 @@ Use a modal for self-contained processes with a clear start and end point. For t
 
 <DocModalWrapper></DocModalWrapper>
 
-#### Title
+### Title
 
 The title **summarizes the purpose** of the modal. In a confirmation modal, use a question in your title and make sure the action is clearly called out in the buttons.
 
-#### Content
+### Content
 
 The content may differ between different types of modals. **Be concise and provide a clear explanation** of the task or information a user should focus on.
 
-#### Buttons
+### Buttons
 
 Buttons should include clear and direct action for the user to take. Buttons are right-aligned based on the **Z&#160;Pattern**. Read more about it in Button Placement.
 
-#### Overlay backdrop
+### Overlay backdrop
 
 The background overlay is dark with opacity to provide the feeling of a third dimensional layer. This also eliminates distraction and helps the user focus on the modal content.
 
@@ -59,7 +59,7 @@ The background overlay is dark with opacity to provide the feeling of a third di
 
 </DocDemo>
 
-#### Sizes
+### Sizes
 
 There are multiple sizes for modals. The Clarity modal defaults to medium but different sizes could be used based on the content and screen sizes you are planning to support. Always remember to test responsiveness as you design and use modals.
 
@@ -94,7 +94,7 @@ In the following example, we are using a small size modal dialog.
 
 Modals are used in different scenarios. Most notably: alerting the user, confirmation dialogs, and task-oriented workflows.
 
-#### Animation
+### Animation
 
 The background overlay animates once a modal is launched to grab a user’s attention and retain their focus. Modals and backdrops support fading animations. Clarity recommends using `fadeDown` on the `modal-dialog` and `fade` on the `modal-backdrop`. These animations hide the modal and backdrop by default. Adding or removing the `in` class animates the modal or backdrop in or out, respectively.
 
@@ -117,7 +117,7 @@ The background overlay animates once a modal is launched to grab a user’s atte
 
 </div>
 
-#### Dismissing modals
+### Dismissing modals
 
 A user needs to **actively** dismiss a modal. A modal should not disappear on its own. Taking any of the actions to either cancel or proceed should eventually dismiss the modal.
 
@@ -136,7 +136,7 @@ Clarity Modals are not dismissed when clicking on the background overlay. This p
 </div>
 </div>
 
-#### Stacking modals
+### Stacking modals
 
 Modals **should not** launch other modals. Stacking modals makes it hard to dismiss them and confuses the user on their levels of importance.
 
@@ -156,7 +156,7 @@ If you see a need to stack modals, you should:
 </div>
 </div>
 
-#### Scrolling
+### Scrolling
 
 Scrolling makes it hard for a user to go through the content of your modal or complete the task assigned. Use scrolling only when absolutely needed.
 
diff --git a/apps/website/components/password/README.md b/apps/website/components/password/README.md
index 73b5e56524..2413b4f6de 100644
--- a/apps/website/components/password/README.md
+++ b/apps/website/components/password/README.md
@@ -21,13 +21,13 @@ Use a password field when the user needs to set or input the password. When sett
 
 ## Code Examples
 
-#### Basic password
+### Basic password
 
 This is the default way to define a password field if you don't have a need for a label or validation. You need to add `clrPassword` to your input to wire up the directive. Notice, it is not necessary to add `type="password"` as it is handled automatically. It will only work if you have the control wired up with either a template driven form or reactive form. You must wrap the input inside the `ClrPasswordContainer` element.
 
 <doc-demo src="/demos/password/basic-ng.html" demo="/demos/password/basic-css.html" />
 
-#### Helper and error messages
+### Helper and error messages
 
 The password form control wires up with the validations placed on an password control, such as `required` or even custom built validators in Angular. Under the hood, it looks at the `NgControl` values to determine the control validity, and display the helper text or error message accordingly.
 
diff --git a/apps/website/components/progress-bar/README.md b/apps/website/components/progress-bar/README.md
index 2aa2fa22f0..5abce80855 100644
--- a/apps/website/components/progress-bar/README.md
+++ b/apps/website/components/progress-bar/README.md
@@ -50,10 +50,6 @@ Use a progress bar to set expectation of the loading time. Users are more willin
 
 When there is a specific goal duration use determinate progress to inform users about the process. Two examples are file upload/download, or a series of configuration steps that happen during an initialization process.
 
-[//] # (DEMOS x2 - processing / 3 of 4)
-
-#### Determinate Progress Bar
-
 - Show progress towards a specific maximum goal or known duration
 - Has an optional label that shows percentage completion
 - Keep messaging minimal
@@ -61,14 +57,10 @@ When there is a specific goal duration use determinate progress to inform users
 
 <doc-demo src="/demos/progress/determinate-ng.html" demo="/demos/progress/determinate-css.html" toggle="false" />
 
-[//] # (DEMOS x2 - processing / 3 of 4)
-
 ### Indeterminate Progress
 
 When there is no estimate for the completion time or goal of a process, show indeterminate progress. This indicates that work is occurring but does not indicate a scope or imply an estimate for how long it will take to complete. One example is uploading a file of data that will be analyzed before a response.
 
-#### Indeterminate
-
 - Will animate continuously until complete
 - Uses specific messaging: E.g "Loading update 3 of 7"
 - Has no estimated end time
diff --git a/apps/website/components/radio/README.md b/apps/website/components/radio/README.md
index 5779473cb9..20c6a50c81 100644
--- a/apps/website/components/radio/README.md
+++ b/apps/website/components/radio/README.md
@@ -7,26 +7,16 @@ Using radio buttons, users can select one option from a group of options.
 
 ## Usage
 
-Use radio buttons when you want users to see all available options and the list of options is small. For mutually exclusive options, consider a checkbox or toggle switch.
+Use radio buttons when you want users to see all available options and the list of options is small. For mutually exclusive options, consider a [checkbox](/components/checkbox) or [toggle switch](/components/toggle).
 
 - Radio buttons are best for six or fewer options.
-- For more than six options, consider a select box, which prompts users to disclose the options.
-
-<!-- [//]: # Types -->
-
-<!-- [//]: # Anatomy -->
-
-<!-- [//]: # Behavior -->
-
-<!-- [//]: # Placement -->
-
-<!-- [//]: # Content -->
+- For more than six options, consider a [select box](/components/select), which prompts users to disclose the options.
 
-## Angular Radio Component
+## Code & Examples
 
 If you are using Angular, the recommended approach is to always use the `ClrRadio` directive on your radio buttons to help manage the form control. By using `ClrRadio`, you'll automatically be able to leverage built in validation, helper text, and layout features in forms.
 
-#### Basic radio button
+### Basic radio button
 
 While it is possible to create a radio button without a label, the cases are rare. However, it is possible by just adding `clrRadio` to your radio button to wire up the directive. Notice, it is necessary to add `type="radio"`.
 
@@ -34,7 +24,7 @@ For anything beyond a standalone radio button, you'll need to wrap your radios w
 
 <doc-demo src="/demos/radio/basic-ng.html" demo="/demos/radio/basic-css.html"></doc-demo>
 
-#### Helper and error messages
+### Helper and error messages
 
 To leverage helper and validation messages, you'll need to wrap all of the radios inside of a `ClrRadioContainer` component. The radio button container tracks the the validations placed on a radio button, such as `required` or even custom built validators in Angular. Under the hood, it looks at the `NgControl` values to determine the control validity, and display the helper text or error message accordingly.
 
@@ -42,25 +32,18 @@ Note: the validation in this example only displays an error after you focus and
 
 <doc-demo src="/demos/radio/helper-ng.html" demo="/demos/radio/helper-css.html"></doc-demo>
 
-#### Inline radios
+### Inline radios
 
 Radio buttons can be placed inline by default by adding the `clrInline` directive to your radio container elements. The radio buttons will wrap if there is not enough space.
 
 <doc-demo src="/demos/radio/inline-ng.html" demo="/demos/radio/inline-css.html"></doc-demo>
 
-#### Disabled radio
+### Disabled radio
 
 A radio can be disabled by simply putting the `disabled` attribute on the radio input. This does require the radio to be inside of a radio container. Also, for groups of radios you have to put the disabled attribute on the last radio and cannot disable individual ones, as Angular doesn't have support to disable individual radios in a group.
 
 <doc-demo src="/demos/radio/disabled-ng.html" demo="/demos/radio/disabled-css.html"></doc-demo>
 
-### Usage
-
-Use radio buttons when you want users to see all available options and the list of options is small. For mutually exclusive options, consider a [checkbox](/components/checkbox) or [toggle switch](/components/toggle).
-
-- Radio buttons are best for six or fewer options.
-- For more than six options, consider a [select box](/components/select), which prompts users to disclose the options.
-
 ## Accessibility
 
 For applications that use the `ClrRadio` directive and the associated `ClrRadioContainer` and `ClrRadioWrapper` components there is built in support that adds accessible behavior to the control and its form. This behavior includes:
diff --git a/apps/website/components/radio/api.md b/apps/website/components/radio/api.md
index 3d5734630e..a89ca9c400 100644
--- a/apps/website/components/radio/api.md
+++ b/apps/website/components/radio/api.md
@@ -3,17 +3,6 @@ title: API
 toc: true
 ---
 
-# API
-
-### Code & Examples
-
----
-
-title: API
-toc: true
-
----
-
 Use checkboxes when users need to select multiple options in a list of related options.
 
 ## Angular Components
diff --git a/apps/website/components/range/README.md b/apps/website/components/range/README.md
index f0808e94a3..e65cd3e9f0 100644
--- a/apps/website/components/range/README.md
+++ b/apps/website/components/range/README.md
@@ -9,22 +9,22 @@ The HTML5 range input element is used when a user can choose between a min and a
 
 The range input control allows the user to chose a value when they don’t care (or know) what the specific number value chosen is. This is an imprecise input control that should only be used when the exact value is not important for the user to know. Range controls work well when the users is more concerned with percent distance between the min and the max.
 
-### Code Examples
+## Code & Examples
 
 The Range input uses standard HTML5 attributes and can be used with Clarity forms.
 
-#### Basic
+### Basic
 
 <doc-demo src="/demos/range/basic-ng.html" demo="/demos/range/basic-css.html" />
 
-#### Full Example
+### Full Example
 
 <doc-demo src="/demos/range/helper-ng.html" demo="/demos/range/helper-css.html" />
 
-#### Disabled
+### Disabled
 
 <doc-demo src="/demos/range/disabled-ng.html" demo="/demos/range/disabled-css.html" />
 
-#### Value Changes
+### Value Changes
 
 Applications may need to be aware of the current slider value. They can use the standard Angular `(change)` output to handle changes to the slider value.
diff --git a/apps/website/components/range/api.md b/apps/website/components/range/api.md
index b2a5951431..0ef2b10d52 100644
--- a/apps/website/components/range/api.md
+++ b/apps/website/components/range/api.md
@@ -3,17 +3,6 @@ title: API
 toc: true
 ---
 
-# API
-
-### Code & Examples
-
----
-
-title: API
-toc: true
-
----
-
 Use checkboxes when users need to select multiple options in a list of related options.
 
 ## Angular Components
diff --git a/apps/website/components/select/README.md b/apps/website/components/select/README.md
index 36035a2153..2615bda4ba 100644
--- a/apps/website/components/select/README.md
+++ b/apps/website/components/select/README.md
@@ -21,7 +21,7 @@ Typically, a select box contains between 3 and 12 items. For fewer than 3 items
 
 Use sentence-style capitalization for both the label and the menu items.
 
-## Code Examples
+## Code & Examples
 
 If you are using Angular, the recommended approach is to always use the `ClrSelect` directive on your selects to help manage the form control. By using `ClrSelect`, you'll automatically be able to leverage built in validation, helper text, and layout features in forms.
 
diff --git a/apps/website/components/sidenav/README.md b/apps/website/components/sidenav/README.md
index 211d10b676..fb4b87d928 100644
--- a/apps/website/components/sidenav/README.md
+++ b/apps/website/components/sidenav/README.md
@@ -30,7 +30,7 @@ Use the sidenav:
 
 The sidenav works best in desktop applications. Scroll when the content exceeds the viewport.
 
-## Anatomy
+## Code & Examples
 
 ### Structure
 
diff --git a/apps/website/components/signpost/README.md b/apps/website/components/signpost/README.md
index d2de1baaff..c1087c7958 100644
--- a/apps/website/components/signpost/README.md
+++ b/apps/website/components/signpost/README.md
@@ -65,11 +65,11 @@ In tables, the icons may be aligned in a column
 - Don't rely on signposts as a primary method of displaying additional information - i.e. as a way to save space on a page
 - Use sparingly as a device to add immediate, relevant information
 
-#Content
+## Code & Examples
 
-## Basic
+### Basic Signpost
 
-The signpost component uses the \*clrIfOpen structural directive (detailed documentation coming soon) on the signpost content to indicate clearly that said content is only present in the DOM when open. We heavily recommend using it for many reasons: better performance, making the intent clear in your own templates, and following a more natural lifecycle for any directives or components inside of the signpost.
+The signpost component uses the `*clrIfOpen` structural directive (detailed documentation coming soon) on the signpost content to indicate clearly that said content is only present in the DOM when open. We heavily recommend using it for many reasons: better performance, making the intent clear in your own templates, and following a more natural lifecycle for any directives or components inside of the signpost.
 
 If for some reason this behavior was not the one you wanted, for instance if you want screen readers to read the signpost inline as opposed to when the user activates the trigger, we also support the signpost content without a \*clrIfOpen directive on it. It will be created eagerly when the signpost itself initializes, and will not be destroyed or recreated until the signpost itself is. Please make sure you know exactly why you are omitting this directive if you end up doing so.
 
@@ -78,7 +78,7 @@ The default signpost is shown to the right of the trigger icon with the content
 ![Basic Wizard](/images/components/signpost/basic.png)
 <doc-demo src="/demos/signpost/basic-ng.html" demo="/demos/signpost/basic-css.html"/></doc-demo>
 
-## Positions
+### Positions
 
 There are twelve signpost positions to help place popover content in an appropriate position when it is shown. Control the position and direction by declaring a position that orients the Signpost content in one of these positions.
 
@@ -99,7 +99,7 @@ To set a position, use the `clrInput` property on the [ClrSignpostContent](/comp
 
 You can see the behavior for each position in the [demo](/demo.html).
 
-## Custom Trigger
+### Custom Trigger
 
 Clarity provides a default trigger. If needed, a custom trigger can be provided for any icon or element. Adding the [ClrSignpostTrigger](/components/signpost/api/#clrsignposttrigger) directive to any element will turn it into a toggle control for the content.
 
diff --git a/apps/website/components/signpost/basic-css.html b/apps/website/components/signpost/basic-css.html
deleted file mode 100644
index dac138d9e0..0000000000
--- a/apps/website/components/signpost/basic-css.html
+++ /dev/null
@@ -1 +0,0 @@
-css
diff --git a/apps/website/components/signpost/basic-ng.html b/apps/website/components/signpost/basic-ng.html
deleted file mode 100644
index 11d347bd44..0000000000
--- a/apps/website/components/signpost/basic-ng.html
+++ /dev/null
@@ -1 +0,0 @@
-ng
diff --git a/apps/website/components/spinner/README.md b/apps/website/components/spinner/README.md
index 309d14482b..89d730f5c2 100644
--- a/apps/website/components/spinner/README.md
+++ b/apps/website/components/spinner/README.md
@@ -3,8 +3,6 @@ title: Overview
 toc: true
 ---
 
-# Spinner
-
 A spinner is visual indicator of an ongoing, user-initiated process.
 
 ## Usage
@@ -67,17 +65,17 @@ When there is a dark background behind a spinner, use the inverse to make it acc
 
 ## Sizes
 
-#### Large
+### Large
 
 Large spinners have 3rem (72px) width and height. Use them to track progress of an operation that is related to the page. For example, while a form is being authenticated, use a large spinner on top of or in place of the form controls.
 <doc-demo src="/demos/spinner/large-ng.html" demo="/demos/spinner/large-css.html" toggle="false" />
 
-#### Medium
+### Medium
 
 Medium spinners have 1.5rem (36px) width and height. Use them to track progress when content is being loaded. For example when data for a table or datagrid is being loaded.
 <doc-demo src="/demos/spinner/medium-ng.html" demo="/demos/spinner/medium-css.html" toggle="false" />
 
-#### Small
+### Small
 
 Small spinners have 0.75rem (18px) width and height. Use them in constrained spaces like an input field or next to a button. While the spinner is animating and active the input field or button should be disabled until the action is complete.
 <doc-demo src="/demos/spinner/small-ng.html" demo="/demos/spinner/small-css.html" toggle="false" />
diff --git a/apps/website/components/stack-view/README.md b/apps/website/components/stack-view/README.md
index ecd10d1a30..d2789830f0 100644
--- a/apps/website/components/stack-view/README.md
+++ b/apps/website/components/stack-view/README.md
@@ -16,7 +16,7 @@ Use a stack view when you want to:
 
 ## Anatomy
 
-#### Labels
+### Labels
 
 Consider following points for stack view labels:
 
@@ -24,7 +24,7 @@ Consider following points for stack view labels:
 - Use noun phrases, sentence-style capitalization, and no ending punctuation.
 - Avoid using icons.
 
-#### Highlights and Horizontal lines
+### Highlights and Horizontal lines
 
 The stack view highlight color (`#DDDDDD`) differs from the usual Clarity highlight color to make it more distinct. Expanded sections have a lighter background color to make it easier to understand the hierarchy.
 
@@ -32,29 +32,29 @@ Horizontal lines in the stack editor are for readability–they help users quick
 
 ## Behavior
 
-#### Enabling Value Editing
+### Enabling Value Editing
 
 StackView has an Edit button on the top right, which on click opens an editable stack view in a modal. This design prevents users from accidentally altering a value in the main content area. Common editing controls include input fields, select boxes, checkboxes, and radio buttons.
 
-#### Placement
+### Placement
 
 Stack views are designed for use in the main content area and modals.
 
-## Types
+## Code & Examples
 
-#### Basic Stack View
+### Basic Stack View
 
 <DocVideo src="/images/components/stack-view/stackview-basic.mp4" :width="874" :autoplay="true"></DocVideo>
 
 <doc-demo src="/demos/stack-view/stack-view.html"></doc-demo>
 
-#### Stack View With Editing in a Modal
+### Stack View With Editing in a Modal
 
 <DocVideo src="/images/components/stack-view/stackview-editing.mp4" :width="884" :autoplay="true"></DocVideo>
 
 <doc-demo src="/demos/stack-view/stack-view-editing.html"></doc-demo>
 
-#### Lazy Loading of Children
+### Lazy Loading of Children
 
 <DocVideo src="/images/components/stack-view/stackview-lazy.mp4" :width="874" :autoplay="true"></DocVideo>
 
diff --git a/apps/website/components/stepper/README.md b/apps/website/components/stepper/README.md
index a6c58ab214..b4d60e4eb0 100644
--- a/apps/website/components/stepper/README.md
+++ b/apps/website/components/stepper/README.md
@@ -67,7 +67,9 @@ While reactive forms and template forms have the same behavior, the implementati
 #### HTML
 
 <doc-demo src="/demos/stepper/reactive-form.html" />
+
 #### TypeScript
+
 <doc-demo src="/demos/stepper/reactive-form.ts" />
 
 ### Template Forms
@@ -75,5 +77,7 @@ While reactive forms and template forms have the same behavior, the implementati
 #### HTML
 
 <doc-demo src="/demos/stepper/template-form.html" />
+
 #### TypeScript
+
 <doc-demo src="/demos/stepper/template-form.ts" />
diff --git a/apps/website/components/tab/api.md b/apps/website/components/tab/api.md
index f6434843b7..0068d611b0 100644
--- a/apps/website/components/tab/api.md
+++ b/apps/website/components/tab/api.md
@@ -72,7 +72,7 @@ ClrTab associates the [ClrTabContent](./api/#clrtabcontent) component with the [
 
 <DocComponentApi component="ClrTabContent" item="bindings" />
 
-# Angular Directives
+## Angular Directives
 
 {.section-header}
 
@@ -121,7 +121,3 @@ A structural directive that enables lazy-loading the content for an active tab.
 #### Bindings
 
 <DocComponentApi component="ClrIfActive" item="bindings" />
-
-#### Methods
-
-<DocComponentApi component="ClrIfActive" item="methods" />
diff --git a/apps/website/components/table/README.md b/apps/website/components/table/README.md
index e153602f4c..3bc7cccdc9 100644
--- a/apps/website/components/table/README.md
+++ b/apps/website/components/table/README.md
@@ -9,7 +9,7 @@ A table displays information in a grid of rows and columns providing a method of
 
 Use the table styles wherever you need to present static data in a tabular format. For advanced features like sorting, filtering, pagination etc. see [Datagrid.](/components/datagrid)
 
-## Code Examples
+## Code & Examples
 
 ### Basic Tables
 
diff --git a/apps/website/components/textarea/README.md b/apps/website/components/textarea/README.md
index bdb4e12cb3..d701adc66d 100644
--- a/apps/website/components/textarea/README.md
+++ b/apps/website/components/textarea/README.md
@@ -13,13 +13,13 @@ Use a text field when the expected user input may be more than a single line.
 
 If you are using Angular, the recommended approach is to always use the `ClrTextarea` directive on your textareas to help manage the form control. By using `ClrTextarea`, you'll automatically be able to leverage built in validation, helper text, and layout features in forms.
 
-#### Basic textarea
+### Basic textarea
 
 This is the most basic way to create a textarea inside of a form. This is only if you don't have a need for a label or validation. You need to add `clrTextarea` to your textarea to wire up the directive. Notice, it is not necessary to add `type="text"` as it is handled automatically. It will only work if you have the control wired up with either a template driven form or reactive form.
 
 <doc-demo src="/demos/textarea/basic-ng.html" demo="/demos/textarea/basic-css.html" toggle="false" />
 
-#### Labels
+### Labels
 
 For anything beyond a standalone textarea field, you'll need to wrap it with the `ClrTextareaContainer` component. This is required to contain all of the logic and validation details for the individual textarea control.
 
@@ -27,7 +27,7 @@ Then you can add a `label` element and it will automatically get laid out correc
 
 <doc-demo src="/demos/textarea/label-ng.html" demo="/demos/textarea/label-css.html" />
 
-#### Helper and error messages
+### Helper and error messages
 
 The textarea form control wires up with the validations placed on it, such as `required` or even custom built validators in Angular. Under the hood, it looks at the `NgControl` values to determine the control validity, and display the helper text or error message accordingly.
 
diff --git a/apps/website/components/tooltip/README.md b/apps/website/components/tooltip/README.md
index 1c73a0a628..566469901f 100644
--- a/apps/website/components/tooltip/README.md
+++ b/apps/website/components/tooltip/README.md
@@ -23,14 +23,29 @@ Don’t rely on tooltips to meet accessibility requirements. Rather, ensure that
 
 Set a width that accommodates the text string. If no size class is used on the tooltip, the default is 240px wide (e.g - `.tooltip-md`) is applied. Other choices are 72 px, 120 px, and 360 px.
 
-1. `.tooltip-xs` is 72px wide
-   <doc-demo file="/demos/tooltip/tooltip-xs.html"></doc-demo>
-2. `.tooltip-sm` is 120px wide:
-   <doc-demo file="/demos/tooltip/tooltip-sm.html"></doc-demo>
-3. `.tooltip-md` is 240px wide:
-   <doc-demo file="/demos/tooltip/tooltip-md.html"></doc-demo>
-4. `.tooltip-lg` is 360px wide:
-   <doc-demo file="/demos/tooltip/tooltip-lg.html"></doc-demo>
+#### Extra Small
+
+`.tooltip-xs` is 72px wide
+
+<doc-demo file="/demos/tooltip/tooltip-xs.html" center></doc-demo>
+
+#### Small
+
+`.tooltip-sm` is 120px wide
+
+<doc-demo file="/demos/tooltip/tooltip-sm.html" center></doc-demo>
+
+#### Medium
+
+`.tooltip-md` is 240px wide
+
+<doc-demo file="/demos/tooltip/tooltip-md.html" center></doc-demo>
+
+#### Large
+
+`.tooltip-lg` is 360px wide
+
+<doc-demo file="/demos/tooltip/tooltip-lg.html" center></doc-demo>
 
 ## Placement
 
@@ -40,31 +55,31 @@ Use tooltip positions that ensure the entire element is visible onscreen. Do not
 
 #### `.tooltip-top-left`
 
-<doc-demo file="/demos/tooltip/tooltip-top-left.html"></doc-demo>
+<doc-demo file="/demos/tooltip/tooltip-top-left.html" center></doc-demo>
 
 #### `.tooltip-top-right`
 
-<doc-demo file="/demos/tooltip/tooltip-top-right.html"></doc-demo>
+<doc-demo file="/demos/tooltip/tooltip-top-right.html" center></doc-demo>
 
 #### `.tooltip-bottom-left`
 
-<doc-demo file="/demos/tooltip/tooltip-bottom-left.html"></doc-demo>
+<doc-demo file="/demos/tooltip/tooltip-bottom-left.html" center></doc-demo>
 
 #### `.tooltip-bottom-right`
 
-<doc-demo file="/demos/tooltip/tooltip-bottom-right.html"></doc-demo>
+<doc-demo file="/demos/tooltip/tooltip-bottom-right.html" center></doc-demo>
 
 #### `.tooltip-right`
 
-<doc-demo file="/demos/tooltip/tooltip-right.html"></doc-demo>
+<doc-demo file="/demos/tooltip/tooltip-right.html" center></doc-demo>
 
 #### `.tooltip-left`
 
-<doc-demo file="/demos/tooltip/tooltip-left.html"></doc-demo>
+<doc-demo file="/demos/tooltip/tooltip-left.html" center></doc-demo>
 
 ## Content
 
-- Use a verb phrase to describe the action on the icon, for example, “Edit settings.”
+- Use a verb phrase to describe the action on the icon, for example, "Edit settings."
 - Use only plain text and be concise. Tooltips can be a sentence fragment.
 - If more detailed information is required, use another form of help.
 - Use sentence-style caps and no ending punctuation.
diff --git a/apps/website/components/tree-view/README.md b/apps/website/components/tree-view/README.md
index 2ea1773640..9e5ee64d60 100644
--- a/apps/website/components/tree-view/README.md
+++ b/apps/website/components/tree-view/README.md
@@ -122,7 +122,7 @@ In read-only trees where highlighting is not an option, this pattern remains tru
 </div>
 <div class="clr-col">
 <DocInset>
-<ClrImage title="Expand and collapse tree node" src="/images/components/tree-view/expand-collapse-node.png" />
+<ClrImage title="Expand and collapse tree node" src="/images/components/tree-view/tree_interacting.svg" />
 </DocInset>
 </div>
 </div>
@@ -137,13 +137,11 @@ To navigate to a content area based on a tree node or to highlight a tree node i
 </div>
 <div class="clr-col">
 <DocInset>
-<ClrImage title="Expand and collapse tree node" src="/images/components/tree-view/highlight-node.png" />
+<ClrImage title="Expand and collapse tree node" src="/images/components/tree-view/tree_highlighting.svg" />
 </DocInset>
 </div>
 </div>
 
-[//]: # 'IMAGE - dashboard'
-
 #### Interacting With Checkbox Trees
 
 <div class="clr-row">
@@ -159,13 +157,11 @@ With a checkbox tree, a user is able to perform one or a combination of three ac
 </div>
 <div class="clr-col">
 <DocInset>
-<ClrImage title="Interacting with checkboxes" src="/images/components/tree-view/checkbox-interaction.png" />
+<ClrImage title="Interacting with checkboxes" src="/images/components/tree-view/tree_checkbox_interacting.svg" />
 </DocInset>
 </div>
 </div>
 
-[//]: # 'IMAGE - view privileges'
-
 ### Loading Data
 
 The way to load data within the tree is based on the scenario in which the tree is being used.
@@ -179,7 +175,7 @@ The way to load data within the tree is based on the scenario in which the tree
 </div>
 <div class="clr-col">
 <DocInset>
-<ClrImage title="Loading data" src="/images/components/tree-view/loading-node.png" />
+<ClrImage title="Loading data" src="/images/components/tree-view/tree_lazyloading.svg" />
 </DocInset>
 </div>
 </div>
@@ -194,7 +190,8 @@ A basic tree can be created by simply nesting `clr-tree-node` components at will
 <cds-alert>Please note that every tree requires to have root node to work properly, this is done by having clr-tree as root wrapper, please check the example below.</cds-alert>
 </cds-alert-group>
 
-![Basic Tree](/images/components/tree-view/basic-tree-demo.png)
+<ClrImage title="Basic Tree" src="/images/components/tree-view/basic-tree-demo.png" />
+
 <doc-demo src="/demos/tree-view/basic-ng.html"/></doc-demo>
 
 ### Tracking expanded nodes
@@ -204,6 +201,8 @@ Use two-way binding `[(clrExpanded)]="expanded"` on the [clrExpanded](/component
 
 ### Routing with a tree
 
+<ClrImage title="Routing Tree" src="/images/components/tree-view/tree-routing.png" />
+
 Use the `.clr-treenode-link` class to style content inside of a Tree Node as clickable. Indicate an active Tree Node with the `.active` class combined with the `.clr-treenode-link` class.
 <doc-demo src="/demos/tree-view/routed-ng.html"/></doc-demo>
 
@@ -211,7 +210,7 @@ Use the `.clr-treenode-link` class to style content inside of a Tree Node as cli
 
 When the tree structure is large and complex you can use iteration to generate nodes and child nodes based on the structure given to the [ClrTree](/components/tree-view/api/#clrtree).
 
-![Dynamically Generated Tree](/images/components/tree-view/dynamic-tree.png)
+<ClrImage title="Dynamically Generated Tree" src="/images/components/tree-view/dynamic-tree.png" />
 
 #### Tree element
 
@@ -278,7 +277,7 @@ If you know a specific node can never become indeterminate, you probably want to
 
 If the data you are displaying is recursive or has an unknown depth, you can use our `*clrRecursiveFor` structural directive to recursively iterate over your data. It has the same syntax as `*ngFor`, and accepts an additional `getChildren` parameter that receives a node and should return its children. Please note that it needs to be used inside of a `<clr-tree>` to function properly.
 
-![Recursive Tree](/images/components/tree-view/recursive-tree-demo.png)
+<ClrImage title="Recursive Tree" src="/images/components/tree-view/recursive-tree-demo.png" />
 
 #### Recursive element
 
diff --git a/apps/website/foundation/README.md b/apps/website/foundation/README.md
index 401b728a43..c231877a8b 100644
--- a/apps/website/foundation/README.md
+++ b/apps/website/foundation/README.md
@@ -2,6 +2,4 @@
 title: Foundation
 ---
 
-# Foundation
-
 overview page
diff --git a/apps/website/foundation/app-layout/README.md b/apps/website/foundation/app-layout/README.md
index 5c917bd0f7..584f07cef4 100644
--- a/apps/website/foundation/app-layout/README.md
+++ b/apps/website/foundation/app-layout/README.md
@@ -5,7 +5,7 @@ toc: true
 
 A properly structured layout enforces an optimal, consistent experience across applications.
 
-### Layout
+## Layout
 
 **.main-container:**
 
@@ -27,30 +27,28 @@ The `.content-container` is a horizontal flexbox which wraps the following compo
 
 <doc-demo src="/demos/app-layout/content-container-ng.html" demo="/demos/app-layout/content-container-css.html"></doc-demo>
 
-### Basic Structure
+## Basic Structure
 
 Two constants of an app built in Clarity are the header and content area. These are the blocks upon which you build your app model.
 
 <div class="clr-row">
-<div>
+<div class="clr-col-4">
 <ClrImage title="Header navigation pattern" src="/images/foundation/app-layout/header_contentarea.png" />
 </div>
-<div>
+<div class="clr-col-8">
 
-{.custom-container}
-
-#### Header
+### Header
 
 The [header](/components/header) is for branding and app-level elements such as navigation, search, and account settings.
 
-#### Content Area
+### Content Area
 
 The content area is where users focus their attention most of the time, gathering information and performing tasks–it is the canvas for your application. As the largest portion of your app, the content area is always visible.
 
 </div>
 </div>
 
-### Layout
+## Layout
 
 Your layout should reflect the information or workflow of the selected [navigation](/foundation/navigation). When laying out the content, keep the following in mind:
 
@@ -60,19 +58,17 @@ Your layout should reflect the information or workflow of the selected [navigati
 - How to handle large amounts of data
 - Responsive design (if that is part of your product’s goals)
 
-#### Common Layout Patterns
+## Common Layout Patterns
 
 Content can consist of any of the [Clarity components](/components), or no components and just information. Following are common layout patterns and recommended usage. For information on navigation components, header, subnav, and sidenav, see [Navigation](/foundation/navigation).
 
-##### Cards
+### Cards
 
 <div class="clr-row">
-<div>
+<div class="clr-col-4">
 <ClrImage title="Header navigation pattern" src="/images/foundation/app-layout/cards.png" />
 </div>
-<div>
-
-{.custom-container}
+<div class="clr-col-8">
 
 [Cards](/components/card) are for presenting high-level information and guiding users to related actions and details. Cards might include a combination of text, images, and data visualizations.
 
@@ -85,15 +81,13 @@ Benefits of using cards include:
 </div>
 </div>
 
-##### Tables and Datagrids
+### Tables and Datagrids
 
 <div class="clr-row">
-<div>
+<div class="clr-col-4">
 <ClrImage title="Header navigation pattern" src="/images/foundation/app-layout/tables.png" />
 </div>
-<div>
-
-{.custom-container}
+<div class="clr-col-8">
 
 [Tables](/components/table) and datagrids are for good for managing large amounts of data. These layouts work well when users need to compare data and perform batch operations.
 
@@ -104,15 +98,13 @@ Complex tables and datagrids work best on larger screens.
 </div>
 </div>
 
-###### Forms
+### Forms
 
 <div class="clr-row">
-<div>
+<div class="clr-col-4">
 <ClrImage title="Header navigation pattern" src="/images/foundation/app-layout/forms.png" />
 </div>
-<div>
-
-{.custom-container}
+<div class="clr-col-8">
 
 [Forms](/components/forms) are for collecting data from users. Forms are comprised of other components, including labels, input fields, labels, checkboxes, radio buttons, and text.
 
@@ -123,15 +115,13 @@ Inline forms are better than modals in cases where you don't want to block users
 </div>
 </div>
 
-###### Tabs
+### Tabs
 
 <div class="clr-row">
-<div>
+<div class="clr-col-4">
 <ClrImage title="Header navigation pattern" src="/images/foundation/app-layout/tabs.png" />
 </div>
-<div>
-
-{.custom-container}
+<div class="clr-col-8">
 
 [Tabs](/components/tabs) appear in a single, non-scrollable row, at the top of the content area. They are good for breaking content into separate, related views.
 
@@ -140,22 +130,20 @@ Tabs are not appropriate if users need to compare data across views.
 </div>
 </div>
 
-###### White Space and Typography
+### White Space and Typography
 
 <div class="clr-row">
-<div>
+<div class="clr-col-4">
 <ClrImage title="Header navigation pattern" src="/images/foundation/app-layout/typography.png" />
 </div>
-<div>
-
-{.custom-container}
+<div class="clr-col-8">
 
 White space and [typography](/foundation/typography) are important elements in conveying hierarchy. These elements direct users to what they should view next and make the content and data easier to parse. They also helps bring consistency to an app.
 
 </div>
 </div>
 
-###### Button Placement
+### Button Placement
 
 In the content area, buttons are left-aligned, with the primary button in the leftmost position. This placement supports the F-pattern layout.
 
@@ -173,11 +161,11 @@ On the right, buttons might appear separate from content.
 
 </div>
 
-#### Using Vertical Rhythm for Layout
+### Using Vertical Rhythm for Layout
 
 Vertical rhythm is the repetition of spatial relationships in a design. A consistent rhythm gives elements a uniform and balanced placement in a design. The more consistent the design, the easier it is for users to read and understand.
 
-##### The Clarity Baseline is 24px
+### The Clarity Baseline is 24px
 
 All elements in Clarity are _designed_ with a 24px baseline:
 
@@ -186,11 +174,11 @@ All elements in Clarity are _designed_ with a 24px baseline:
 
 <ClrImage title="Clarity baseline image" src="/images/foundation/app-layout/24_baseline.png" />
 
-###### Repeat 24px in Your Layout
+### Repeat 24px in Your Layout
 
 Design the vertical margins and padding between elements using the Clarity baseline. A multiple of 24px can be a whole or half-ratio. Common numbers include: 6px, 12px, 18px, 24px, 30px, 36px, 42px, 48px, 54px, 60px, 66px, 72px.
 
-### Code & Examples
+## Code & Examples
 
 Clarity layouts and components are _designed_ with a "24px baseline". This means that the visual size of our components is expressed in clean multiples of 24.
 
@@ -198,7 +186,7 @@ But starting with version 3.0, the Clarity CSS _code's_ rem values are derived f
 
 Why the difference?
 
-#### Rem Sizing
+### Rem Sizing
 
 In its underlying code, the Clarity styles had to move away from a root font-size of 24px for a couple of reasons:
 
@@ -207,36 +195,36 @@ In its underlying code, the Clarity styles had to move away from a root font-siz
 
 The changes to "rem" sizing in Clarity addresses both of those concerns. But there are a few caveats to keep in mind.
 
-##### Design remains at 24px, underlying code is at 20px
+### Design remains at 24px, underlying code is at 20px
 
 The visual baseline for our design system remains 24px with a base grid of 6px. _For designers using the Clarity Design System, nothing has changed_.
 
 Developers, however, must convert 24px based designs to a system that uses 20px at its core.
 
-##### Converting from old 24px-based styles to new 20px based styles
+### Converting from old 24px-based styles to new 20px based styles
 
 First and most importantly, you do not need to do _anything_ if your application does not use rem values or percentages that rely on Clarity's default root font-size.
 
 If you do, however, rely on the rem sizing available in Clarity, there are a number of options available to update the old code to the new rem sizing.
 
-###### Set hard pixel values (Not recommended)
+### Set hard pixel values (Not recommended)
 
 If you are already setting hard pixel values outside of Clarity, no change is needed on your part. Setting hard pixel values is not recommended, however, because it breaks accessibility and browser text resizing features.
 
-###### Update your rem values
+### Update your rem values
 
 If you are using rem values outside of Clarity, you can update them by either:
 
 - multiplying them by 1.2 – so a value of `1.4rem` in a SASS file becomes `1.2 * 1.4rem`
 - doing the math upfront and updating rem values in place – so that `1.4rem` becomes `1.68rem`
 
-###### What if I can't do this right now?
+### What if I can't do this right now?
 
 If you would prefer to update Clarity to version 3.x and cannot update the sizes in your application that rely on Clarity's baseline, you can override the `$clr-baseline-denominator` SASS variable. Setting it to `24` ignores the baseline changes, putting everything back to the pre-3.0 24px baseline.
 
 Clarity implemented this workaround to make the transition to 3.0 easier on our users, allowing them to take on the work of updating their rem sizes at their own pace if they need to. Note that this should be consider a temporary workaround, however, not a long-term solution. There is no guarantee that this override will be supported beyond 3.0.
 
-#### Customizing the root font-size
+### Customizing the root font-size
 
 Clarity uses [rem units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) for its whitespace and sizing. If the 24px vertical baseline is too large or too small for your needs, you can edit this globally across a Clarity application by changing the `font-size` style of the `html` element, as in the example below.
 
diff --git a/apps/website/foundation/color/README.md b/apps/website/foundation/color/README.md
index b8284a2575..fb406e5eae 100644
--- a/apps/website/foundation/color/README.md
+++ b/apps/website/foundation/color/README.md
@@ -9,7 +9,7 @@ The Clarity color palette is a full spectrum of bold hues and neutrals to meet a
 
 The Clarity color palette is aligned with color use in web applications and support for accessibility. The colors below constitute the expanded color palette for Clarity. Text colors displayed in light or dark tints represent Clarity's recommended accessible pairing with the color.
 
-#### Base, Primary and Secondary Colors
+### Base, Primary and Secondary Colors
 
 The bulleted color swatches indicate colors that are part of the Clarity base color palette. You will find these colors in use throughout Clarity's components and design recommendations.
 
@@ -21,17 +21,17 @@ The large color swatches represent Clarity primary colors, recommended for use a
 
 Clarity components use a set of colors to convey certain functions and meanings. These colors have been vetted and tested to meet the accessibility standard for low vision.
 
-#### Light Theme Functional Colors
+### Light Theme Functional Colors
 
 <ClrColorsFunctional></ClrColorsFunctional>
 
-#### Dark Theme Functional Colors
+### Dark Theme Functional Colors
 
 <ClrColorsFunctional colorMode="dark"></ClrColorsFunctional>
 
 ## Color Usage
 
-#### Base Colors
+### Base Colors
 
 Colors used in Clarity's components and design recommendations.
 
diff --git a/apps/website/foundation/themes/README.md b/apps/website/foundation/themes/README.md
index d0809ed1a4..f08bce169a 100644
--- a/apps/website/foundation/themes/README.md
+++ b/apps/website/foundation/themes/README.md
@@ -66,7 +66,7 @@ Themes offer a great deal of flexibility — which can be both a good and bad th
 <div class="clr-row">
 <div class="clr-col-sm-12 clr-col-lg-6">
 
-#### Use color responsibly
+### Use color responsibly
 
 Use colors that reinforce your brand but in a way that is pleasing.
 
@@ -86,7 +86,7 @@ Use brand colors in a pleasing manner
 <div class="clr-row">
 <div class="clr-col-sm-12 clr-col-lg-6">
 
-#### Communicate with color
+### Communicate with color
 
 Consider using color to communicate meaning to users. Using colors like red for warning or danger and green for success or preferred actions reinforces your user experience.
 
@@ -99,7 +99,7 @@ Don't use brand colors irrespective of what the color communicates to users
 
 </div>
 
-#### Create visual hierarchy
+### Create visual hierarchy
 
 Darker colors recede while lighter and brighter colors push forward. Be mindful of this when working with brand colors to create a custom theme.
 
@@ -119,7 +119,7 @@ Draw attention to the wrong items with the use of color.
 
 Color draws visual focus. Visual hierarchy can be re-inforced or circumvented. Be specfic to where a design guides vidual focus. Observe an unintended effect in the example above where the content in the cards and the datagrid recede into the background while the sidenav and the header draw the visual attention away from the data.
 
-#### Avoid extreme color combinations
+### Avoid extreme color combinations
 
 <div class="clr-row">
 <div class="clr-col-sm-12 clr-col-lg-6">
@@ -135,7 +135,7 @@ Don't use color combinations that may cause eye-strain
 
 </div>
 
-#### Be Accessible
+### Be Accessible
 
 Clarity’s color palette is WCAG AA compliant, meaning all color combinations of text-on-background meet the standard for color accessibility for our users. Use [the WebAIM Color Contrast Checker tool](//webaim.org/resources/contrastchecker/) to test text and background colors when deciding how a brand’s color palette will be used in an application.
 
@@ -145,13 +145,13 @@ All of the text/background combinations on the Clarity Color Palette page are te
 
 Clarity UI ships with two css files, `clr-ui.min.css` for the light theme and `clr-ui-dark.min.css` for the dark theme. You can consume either one of these files and have a fully light or dark-themed Clarity application. If you already use `@clr/ui` in your project there is nothing more you need to do. If you want to switch over to the dark theme use one of the examples below to modify your build process and consume the `clr-ui-dark.min.css` code.
 
-#### Angular CLI Builds
+### Angular CLI Builds
 
 Consume the dark theme code in `clr-ui-dark.min.css` by adding it to your styles array in the `angular.json` file.
 
 <doc-demo src="/demos/themes/angular.json" />
 
-#### Webpack Builds
+### Webpack Builds
 
 Modify your `webpack.config.js` entry styles to consume the new `clr-ui-dark.min.css`
 <doc-demo src="/demos/themes/webpack.js" />
@@ -160,7 +160,7 @@ Modify your `webpack.config.js` entry styles to consume the new `clr-ui-dark.min
 
 If you need to customize components for your application we suggest starting with either the light theme or the dark theme and overriding variables from there to suit your customizations.
 
-#### Two Ways to Theme Clarity
+### Two Ways to Theme Clarity
 
 With the 3.0 release, there are two ways to theme Clarity: _SASS variables_ and _CSS custom properties_. The recommended way to theme Clarity is through [CSS Custom Properties](//developer.mozilla.org/en-US/docs/Web/CSS/--*).
 
@@ -170,7 +170,7 @@ After the release of Clarity 4.0, SASS based theming will no longer work in Clar
 <cds-alert>SASS-based theming is deprecated in Clarity 3.0 and will no longer work when Clarity 4.0 is released. It is recommended that you convert your themes to use CSS custom properties for the 4.0 release in Spring of 2020.</cds-alert>
 </cds-alert-group>
 
-#### SASS-based Theming
+### SASS-based Theming
 
 SASS-based theming is most familiar to those who use SASS/SCSS in their own products to build CSS stylesheets. SASS acts like a superset of CSS that enables convenient nesting syntax and programming-like functionality in a CSS-based language that compiles to CSS. SASS also gives developers variables they can reuse throughout their SASS codebase.
 
@@ -183,7 +183,7 @@ It is these variables that we override in SASS to build out a new CSS file for o
 
 In order to customize the Clarity light theme you will need to build with the Clarity SCSS and overwrite the SCSS variables that set the look-n-feel for each component you need to customize. You will need to build your applications CSS output with Clarity's SCSS.
 
-###### Remove Clarity CSS from your build configuration
+#### Remove Clarity CSS from your build configuration
 
 First, since we are going to be creating custom component styles the first step is to remove all of the Clarity css from your build process.
 
@@ -199,7 +199,7 @@ First, since we are going to be creating custom component styles the first step
 
 </DocDemo>
 
-###### Add (or modify) your applications main.scss file
+#### Add (or modify) your applications main.scss file
 
 Next, we need to include the the application scss variable overrides and the Clarity component styles. This example shows one way of adding the Clarity dependencies and component styles based on standard `npm` installation into a `node_modules` directory of the project. In this example the `styles.scss` file lives at the top of a standard angular-cli application `src` folder.
 
@@ -215,11 +215,11 @@ Next, we need to include the the application scss variable overrides and the Cla
 
 </DocDemo>
 
-##### Why is SASS-based theming going away?
+### Why is SASS-based theming going away?
 
 Once the Clarity Angular library begins to integrate the web components from Clarity Core, SASS-based theming will no longer work. The Clarity Core web components are encapsulated within the shadow DOM. Changes to the CSS at the global level will not be able to affect shadow DOM encapsulated web components through any means outside of CSS custom properties.
 
-#### CSS Custom Properties
+### CSS Custom Properties
 
 CSS custom properties are a specification that defines a syntax that allows developers to define "variables" in their stylesheets whose values they can reuse and override. This is a huge improvement for CSS and greatly streamlines theming, as well as the management of complex stylesheets.
 
@@ -236,7 +236,7 @@ When doing research on how best to deliver a theming solution to our developer c
 - Customized themes
 - Dynamically switching an application between multiple theme options
 
-#### CSS Custom Property Dark Theme
+### CSS Custom Property Dark Theme
 
 After adopting custom properties, delivering a dark theme in Clarity no longer requires pointing to a separately built CSS file. Likewise, if your application relies on Clarity but needs a different color scheme, you'll no longer need to rebuild the Clarity CSS at build time.
 
@@ -246,7 +246,7 @@ If you are already working with a SASS/SCSS file with Clarity SASS variables, cl
 
 So, the previous SASS variable `$clr-alert-info-bg-color` would become a custom property of `--clr-alert-info-bg-color`. [This file on github](//github.com/mathisscott/clarity-theming-starter/blob/clarity-css-dark-theme/src/_dark-theme.scss) shows an example of what this looks like in practice.
 
-#### Theme Switching
+### Theme Switching
 
 A common use case for applications is giving users the ability to switch between predefined universal themes. An example would be switching between a light and a dark theme.
 
@@ -258,7 +258,7 @@ Instead, our theme only contains the custom property values we want to change wh
 
 An example of this kind of "theme switching" [can be found here in this github repository](//github.com/mathisscott/clarity-theming-starter/tree/clarity-css-dark-theme-switcher).
 
-#### Whitelabeling
+### Whitelabeling
 
 Whitelabeling is a term that describes a product feature that allows end-users to change a minimal set of colors to aid with brand identity across a company's offerings. Typically, whitelabeling refers to the ability to change navigation or header colors and sometimes elements such as buttons.
 
@@ -266,7 +266,7 @@ This was incredibly difficult in Clarity prior to custom properties. Due to the
 
 Because custom properties allows us to change just the styles that we want to override in normal CSS, [whitelabeling Clarity applications is far more streamlined](//github.com/mathisscott/clarity-theming-starter/tree/clarity-css-whitelabeling).
 
-#### Dynamic Whitelabeling
+### Dynamic Whitelabeling
 
 A feature that often walks hand-in-hand with whitelabeling is some sort of theme generator the customers can use to customize a product to their needs. Again, this is often limited to a subset of styles -- generally concerned with Color and navigation.
 
@@ -278,7 +278,7 @@ With the ease of accessing and updating CSS custom properties with JavaScript, t
 
 If, however, your product has not been able to stop supporting Internet Explorer, Clarity Core can offer some assistance.
 
-#### Setting up IE11 support
+### Setting up IE11 support
 
 First, you will need to install Clarity Core and its dependencies:
 
@@ -290,11 +290,11 @@ npm install @webcomponents/custom-elements @webcomponents/shadycss @webcomponent
 
 </DocDemo>
 
-#### Using the polyfills
+### Using the polyfills
 
 Once the dependencies are in a good place, you will need to import the `runCssVarsPolyfill` helper from `@clr/core`. This is what you will use to update the CSS custom properties in Internet Explorer.
 
-#### When to call the polyfills
+### When to call the polyfills
 
 [As demonstrated in this example](//github.com/mathisscott/clarity-theming-starter/blob/clarity-css-whitelabel-switcher/src/app/app.component.ts), you'll want to call `runCssVarsPolyfill()` whenever making a change to your custom properties. This includes if you are enabling or disabling stylesheets.
 
diff --git a/apps/website/foundation/typography/README.md b/apps/website/foundation/typography/README.md
index b959191d4e..ef27407064 100644
--- a/apps/website/foundation/typography/README.md
+++ b/apps/website/foundation/typography/README.md
@@ -39,31 +39,31 @@ or <code class="language-html">Monospaced</code>
 
 Clarity includes several SASS variables, collections, mixing, and functions for working with typography. These are described below:
 
-###### \$clr-font
+**\$clr-font**
 
 This SASS variable points to our default text font, Metropolis.
 
-###### \$clr-altFont
+**\$clr-altFont**
 
 This SASS variable is only used for our headers (H1..H6). Currently, it also points to Metropolis.
 
-###### \$clr-font-size
+**\$clr-font-size**
 
 This SASS variable sets our default font size to 14px.
 
-###### \$clr-font-weight-light
+**\$clr-font-weight-light**
 
 This SASS variable defaults to 200. It is used in very large display text (p0) and headers 1 through 4.
 
-###### \$clr-font-weight-regular
+**\$clr-font-weight-regular**
 
 This SASS is the default font weight for Clarity. It defaults to 400.
 
-###### \$clr-font-weight-semibold
+**\$clr-font-weight-semibold**
 
 This SASS variable is the default bold font-weight of Clarity. It is Metropolis semi-bold (500).
 
-###### \$clr-font-weight-bold
+**\$clr-font-weight-bold**
 
 This SASS variable defaults to 600. It is used in very small text (p4 and p6).
 
diff --git a/apps/website/get-started/design.md b/apps/website/get-started/design.md
index eb3b05c59d..8dc4f0a9f9 100644
--- a/apps/website/get-started/design.md
+++ b/apps/website/get-started/design.md
@@ -2,23 +2,6 @@
 
 Clarity provides design assets that help designers get started. These assets should be used in a design process that aligns with the Clarity Design System. To jump start your project and align with the Clarity Design System you should download the font resources below and have them installed on your computer. Set up a [free tier Figma](https://www.figma.com/pricing/) account to get started with the Clarity themes, icons and color libraries.
 
-<!-- ## Primary Font
-
-The default font intended for use with Clarity is [Clarity CIty](https://github.com/vmware/clarity-city). Download and install the [font files](https://github.com/vmware/clarity-city/archive/v1.0.0.zip) on your computer to make sure it is available when using the assets below.
-
-## Figma Libraries
-
-Clarity uses the popular design tool [Figma](https://www.figma.com/) when designing and documenting components and foundations. Bookmark these resources to re-use Clarity assets in your design process.
-
-### Themes
-
-<div class="themes-figma-asset-wrapper">
-
-
-## Icon Files
-
-We provide a convenient zip of all icon files. This download includes all svg files for the icons available in the library. -->
-
 <div class="clr-row">
 
 <div class="clr-col-md-6 clr-col-sm-12">
@@ -27,7 +10,7 @@ We provide a convenient zip of all icon files. This download includes all svg fi
 
 <div>
 
-### Primary Font
+## Primary Font
 
 The default font intended for use with Clarity is [Clarity CIty](https://github.com/vmware/clarity-city). Download and install the [font files](https://github.com/vmware/clarity-city/archive/v1.0.0.zip) on your computer to make sure it is available when using the assets below.
 
@@ -39,7 +22,7 @@ The default font intended for use with Clarity is [Clarity CIty](https://github.
 
 <div>
 
-### Icon Assets
+## Icon Assets
 
 We provide a convenient zip of all icon files. This download includes all svg files for the icons available in the library.
 
@@ -55,7 +38,7 @@ We provide a convenient zip of all icon files. This download includes all svg fi
 
 <div class="clr-col-md-6 clr-col-sm-12">
 
-### Figma Libraries
+## Figma Libraries
 
 Clarity uses the popular design tool [Figma](https://www.figma.com/) when designing and documenting components and foundations. Bookmark these resources to re-use Clarity assets in your design process.
 
diff --git a/apps/website/package.json b/apps/website/package.json
index 989942b756..482b91cab2 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -8,7 +8,8 @@
   "private": true,
   "scripts": {
     "start": "vuepress dev",
-    "build": "vuepress build"
+    "build": "vuepress build",
+    "lint": "markdownlint '**/*.md' --ignore 'node_modules'"
   },
   "dependencies": {
     "@sentry/browser": "5.15.5",
@@ -22,6 +23,7 @@
     "@vuepress/plugin-last-updated": "1.5.2",
     "@vuepress/plugin-google-analytics": "1.5.2",
     "@vuepress/plugin-pwa": "1.5.2",
+    "markdownlint-cli": "^0.23.2",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
     "stylus": "0.54.8",
diff --git a/docs/WEBSITE.md b/docs/WEBSITE.md
new file mode 100644
index 0000000000..517ac390c6
--- /dev/null
+++ b/docs/WEBSITE.md
@@ -0,0 +1,15 @@
+# Clarity Website Documentation
+
+The Clarity website is powered by Vuepress, and also loads Storybook in an iframe for interactive demos.
+
+## Run the website locally
+
+To run the website, you can run `yarn website:start` to start the local Vuepress server. If you want to view the Storybook stories at the same time, you'll have to run a second tab with the command `yarn website:storybook` at the same time to have both servers running.
+
+## Validate markdown
+
+The documentation has a markdown linter setup that can help find little potential issues. Run `yarn website:lint` to check if the files are correct.
+
+## How to generate images
+
+When you generate images using a Macbook with Retina, we need to resize the images before we upload them.
diff --git a/package.json b/package.json
index a55d5f8845..14715c7448 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,8 @@
     "website:build": "yarn --cwd apps/website run build",
     "website:storybook": "yarn --cwd packages/angular run start:storybook",
     "website:preview": "lite-server --baseDir=dist/website",
-    "website:start": "yarn --cwd apps/website start",
+    "website:start": "yarn --cwd apps/website run start",
+    "website:lint": "yarn --cwd app/website run lint",
     "tool:audit-website": "yarn --cwd tools/audit-website run start",
     "tool:link-checker": "yarn --cwd tools/link-checker run start"
   },
diff --git a/scripts/update-license.js b/scripts/update-license.js
index 0e86f42502..6ed6bdd314 100644
--- a/scripts/update-license.js
+++ b/scripts/update-license.js
@@ -17,7 +17,7 @@ const path = require('path');
 const supported = ['.js', '.ts', '.html', '.css', '.scss', '.sass'];
 
 // Stash unstaged files
-exec('git stash --keep-index --include-untracked');
+// exec('git stash --keep-index --include-untracked');
 
 // Grab list of staged files
 const files = exec('git diff --name-only --cached --diff-filter=d', { encoding: 'utf8' }).split('\n');
@@ -37,4 +37,4 @@ console.log('Updated license headers');
 exec(`git add ${files.map(file => "'" + path.join(__dirname, '../', file) + "'").join(' ')}`);
 
 // Restore from stash
-exec('git stash pop');
+// exec('git stash pop');
diff --git a/yarn.lock b/yarn.lock
index 55ac0c7b34..c712d7b8de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11472,6 +11472,13 @@ commander@~2.8.1:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@~2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  integrity sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
 common-path-prefix@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-2.0.0.tgz#25b0265f318bf093a6ec630813aac97b29dea230"
@@ -12970,6 +12977,11 @@ deep-extend@^0.6.0, deep-extend@~0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
+deep-extend@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f"
+  integrity sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==
+
 deep-freeze@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
@@ -14009,6 +14021,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
   integrity sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==
 
+entities@~2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
+  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
+
 env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
@@ -16071,6 +16088,11 @@ get-stdin@^8.0.0:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
   integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
 
+get-stdin@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
+  integrity sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=
+
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -16262,7 +16284,7 @@ glob@7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.1.6, glob@^7.0.0, glob@^7.0.3, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1:
+glob@7.1.6, glob@^7.0.0, glob@^7.0.3, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1, glob@~7.1.2:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -17537,7 +17559,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.0.4, ignore@^5.0.6, ignore@^5.1.1, ignore@^5.1.4:
+ignore@^5.0.4, ignore@^5.0.6, ignore@^5.1.1, ignore@^5.1.4, ignore@~5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
@@ -19689,7 +19711,7 @@ js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-yaml@3.13.1:
+js-yaml@3.13.1, js-yaml@~3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -19967,6 +19989,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonc-parser@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.2.1.tgz#db73cd59d78cce28723199466b2a03d1be1df2bc"
+  integrity sha512-o6/yDBYccGvTz1+QFevz6l6OBZ2+fMVu2JZ9CIhzsYRX4mjaK5IyX9eldUdCmga16zlgQxyrj5pt9kzuj2C02w==
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -20993,12 +21020,17 @@ lodash.difference@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
   integrity sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=
 
+lodash.differencewith@~4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz#bafafbc918b55154e179176a00bb0aefaac854b7"
+  integrity sha1-uvr7yRi1UVTheRdqALsK76rIVLc=
+
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
   integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
 
-lodash.flatten@^4.4.0:
+lodash.flatten@^4.4.0, lodash.flatten@~4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
   integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
@@ -21512,6 +21544,17 @@ markdown-it-table-of-contents@^0.4.0:
   resolved "https://registry.yarnpkg.com/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz#3dc7ce8b8fc17e5981c77cc398d1782319f37fbc"
   integrity sha512-TAIHTHPwa9+ltKvKPWulm/beozQU41Ab+FIefRaQV1NRnpzwcV9QOe6wXQS5WLivm5Q/nlo0rl6laGkMDZE7Gw==
 
+markdown-it@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
+  integrity sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~2.0.0"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 markdown-it@^8.4.1:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
@@ -21543,6 +21586,38 @@ markdown-to-jsx@^6.11.4:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+markdownlint-cli@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/markdownlint-cli/-/markdownlint-cli-0.23.2.tgz#43f0a96e2699542b74fb5e6188c025e4934357fc"
+  integrity sha512-OSl5OZ8xzGN6z355cqRkiq67zPi3reJimklaF72p0554q85Dng5ToOjjSB9tDKZebSt85jX8cp+ruoQlPqOsPA==
+  dependencies:
+    commander "~2.9.0"
+    deep-extend "~0.5.1"
+    get-stdin "~5.0.1"
+    glob "~7.1.2"
+    ignore "~5.1.4"
+    js-yaml "~3.13.1"
+    jsonc-parser "~2.2.0"
+    lodash.differencewith "~4.5.0"
+    lodash.flatten "~4.4.0"
+    markdownlint "~0.20.4"
+    markdownlint-rule-helpers "~0.11.0"
+    minimatch "~3.0.4"
+    minimist "~1.2.5"
+    rc "~1.2.7"
+
+markdownlint-rule-helpers@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/markdownlint-rule-helpers/-/markdownlint-rule-helpers-0.11.0.tgz#faaaae4337771c7d88ca38ef6265afb4fbe0fb3f"
+  integrity sha512-PhGii9dOiDJDXxiRMpK8N0FM9powprvRPsXALgkjlSPTwLh6ymH+iF3iUe3nq8KGu26tclFBlLL5xAGy/zb7FA==
+
+markdownlint@~0.20.4:
+  version "0.20.4"
+  resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.20.4.tgz#3b34681494cdad174e14a27182b5cdefaa537823"
+  integrity sha512-jpfaPgjT0OpeBbemjYNZbzGG3hCLcAIvrm/pEY3+q/szDScG6ZonDacqySVRJAv9glbo8y4wBPJ0wgW17+9GGA==
+  dependencies:
+    markdown-it "10.0.0"
+
 marky@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.1.tgz#a3fcf82ffd357756b8b8affec9fdbf3a30dc1b02"
@@ -22025,7 +22100,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2, minimatch@~3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -22054,7 +22129,7 @@ minimist@1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5:
+minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@~1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -25939,7 +26014,7 @@ raw-loader@4.0.1, raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.5"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8, rc@~1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==