From 1eb66916971ff548c830f4bef1e2154ed6614e0a Mon Sep 17 00:00:00 2001
From: enzo - Eduardo Garcia <enzo@weknowinc.com>
Date: Sat, 8 Dec 2018 08:05:12 +1100
Subject: [PATCH 1/3] Fix link to overview to avoid 404 in Drupal

---
 GovCMS-kss-template/index.twig                |   2 +-
 styleguide/index.html                         |   8 +-
 styleguide/item-ui-kit-accordion.html         |  96 ++--
 styleguide/item-ui-kit-breadcrumb.html        |  32 +-
 styleguide/item-ui-kit-button.html            |  24 +-
 styleguide/item-ui-kit-cta-link.html          |  32 +-
 styleguide/item-ui-kit-header.html            |  40 +-
 styleguide/item-ui-kit-inpage-nav.html        |  32 +-
 styleguide/item-ui-kit-keyword-list.html      |  32 +-
 styleguide/item-ui-kit-link-list.html         |  40 +-
 styleguide/item-ui-kit-page-alerts.html       | 104 ++--
 .../item-ui-kit-progress-indicator.html       |  32 +-
 styleguide/item-ui-kit-tags.html              |  32 +-
 styleguide/item-ui-kit.html                   |  14 +-
 styleguide/section-ui-kit.html                | 444 +++++++++---------
 15 files changed, 482 insertions(+), 482 deletions(-)

diff --git a/GovCMS-kss-template/index.twig b/GovCMS-kss-template/index.twig
index ccb4141..664ea07 100644
--- a/GovCMS-kss-template/index.twig
+++ b/GovCMS-kss-template/index.twig
@@ -21,7 +21,7 @@
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
diff --git a/styleguide/index.html b/styleguide/index.html
index 9b6f7a2..8e90534 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -43,10 +43,10 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
         <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
       <h1>GovCMS 8 UI-Kit Starter Styleguide</h1>
 
-<p>This styleguide is showing only the UI-Kit components with a reasonable 
-template. It is not providing a comprehensive list of every style 
+<p>This styleguide is showing only the UI-Kit components with a reasonable
+template. It is not providing a comprehensive list of every style
 available in UI-Kit or the theme. Feel free to add other components as needed.</p>
-<p>For live examples of other styling, install the defaul content and visit 
+<p>For live examples of other styling, install the defaul content and visit
 the <strong>/test</strong> page.</p>
 
 
diff --git a/styleguide/item-ui-kit-accordion.html b/styleguide/item-ui-kit-accordion.html
index 982589e..9ad62fc 100644
--- a/styleguide/item-ui-kit-accordion.html
+++ b/styleguide/item-ui-kit-accordion.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-accordion" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,23 +86,23 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Accordion component.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -116,7 +116,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -127,11 +127,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -139,14 +139,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -154,10 +154,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -168,7 +168,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -183,7 +183,7 @@ <h3>Accordion group</h3>
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -197,7 +197,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -208,11 +208,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -220,14 +220,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -235,10 +235,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -249,7 +249,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -264,7 +264,7 @@ <h3>Accordion group</h3>
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -278,7 +278,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -289,11 +289,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -301,14 +301,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -316,10 +316,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -330,7 +330,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -345,7 +345,7 @@ <h3>Accordion group</h3>
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -359,7 +359,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -370,11 +370,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -382,14 +382,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -397,10 +397,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -411,7 +411,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -476,11 +476,11 @@ <h3>Accordion group</h3>
 &lt;/div&gt;
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/accordion/_accordion.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-breadcrumb.html b/styleguide/item-ui-kit-breadcrumb.html
index 6c90c87..cbf5c26 100644
--- a/styleguide/item-ui-kit-breadcrumb.html
+++ b/styleguide/item-ui-kit-breadcrumb.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-breadcrumb" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,25 +86,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -136,9 +136,9 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -170,9 +170,9 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -204,9 +204,9 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -243,11 +243,11 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/breadcrumb/breadcrumb.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/breadcrumb/_breadcrumb.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-button.html b/styleguide/item-ui-kit-button.html
index d5ee01f..94b4fbd 100644
--- a/styleguide/item-ui-kit-button.html
+++ b/styleguide/item-ui-kit-button.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-button" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,16 +86,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Form buttons.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -105,7 +105,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -195,7 +195,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -285,7 +285,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -375,7 +375,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -477,11 +477,11 @@ <h2 class="kss-title kss-title--level-2">
 &lt;/p&gt;
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/button/_button.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-cta-link.html b/styleguide/item-ui-kit-cta-link.html
index 139d735..5db8a66 100644
--- a/styleguide/item-ui-kit-cta-link.html
+++ b/styleguide/item-ui-kit-cta-link.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-cta-link" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,25 +86,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Click to action link.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -117,9 +117,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -132,9 +132,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -147,9 +147,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -167,11 +167,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/cta-link/cta_link.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/cta-link/_cta-link.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-header.html b/styleguide/item-ui-kit-header.html
index 060775a..c5e6534 100644
--- a/styleguide/item-ui-kit-header.html
+++ b/styleguide/item-ui-kit-header.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-header" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,16 +86,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -105,9 +105,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -123,7 +123,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -141,9 +141,9 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -159,7 +159,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -177,9 +177,9 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -195,7 +195,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -213,9 +213,9 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -231,7 +231,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -251,11 +251,11 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/header/header.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/header/_header.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-inpage-nav.html b/styleguide/item-ui-kit-inpage-nav.html
index fdb3935..8aa7a3d 100644
--- a/styleguide/item-ui-kit-inpage-nav.html
+++ b/styleguide/item-ui-kit-inpage-nav.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-inpage-nav" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,25 +86,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -138,9 +138,9 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -174,9 +174,9 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -210,9 +210,9 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -251,11 +251,11 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/inpage-nav/inpage_nav.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/inpage-nav/_inpage_nav.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-keyword-list.html b/styleguide/item-ui-kit-keyword-list.html
index b69bd72..8eba618 100644
--- a/styleguide/item-ui-kit-keyword-list.html
+++ b/styleguide/item-ui-kit-keyword-list.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-keyword-list" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,25 +86,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -144,9 +144,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -186,9 +186,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -228,9 +228,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -275,11 +275,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/keyword-list/keyword_list.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/keyword-list/_keyword_list.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-link-list.html b/styleguide/item-ui-kit-link-list.html
index 3798853..03e00b5 100644
--- a/styleguide/item-ui-kit-link-list.html
+++ b/styleguide/item-ui-kit-link-list.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-link-list" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,16 +86,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -105,9 +105,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -136,7 +136,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -167,9 +167,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -198,7 +198,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -229,9 +229,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -260,7 +260,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -291,9 +291,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -322,7 +322,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -355,11 +355,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/link-list/link_list.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/link-list/_link_list.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-page-alerts.html b/styleguide/item-ui-kit-page-alerts.html
index 0b1aafe..1e7fe71 100644
--- a/styleguide/item-ui-kit-page-alerts.html
+++ b/styleguide/item-ui-kit-page-alerts.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-page-alerts" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,16 +86,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -105,12 +105,12 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -127,10 +127,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -146,10 +146,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -165,10 +165,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -184,10 +184,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -206,12 +206,12 @@ <h3 class="visually-hidden">Status message</h3>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -228,10 +228,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -247,10 +247,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -266,10 +266,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -285,10 +285,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -307,12 +307,12 @@ <h3 class="visually-hidden">Status message</h3>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -329,10 +329,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -348,10 +348,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -367,10 +367,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -386,10 +386,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -408,12 +408,12 @@ <h3 class="visually-hidden">Status message</h3>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -430,10 +430,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -449,10 +449,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -468,10 +468,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -487,10 +487,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -511,11 +511,11 @@ <h3 class="visually-hidden">Status message</h3>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% extends &#039;@govcms8_uikit/page-alerts/page_alerts.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/page-alerts/_page_alerts.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-progress-indicator.html b/styleguide/item-ui-kit-progress-indicator.html
index 97ea632..b3c1b41 100644
--- a/styleguide/item-ui-kit-progress-indicator.html
+++ b/styleguide/item-ui-kit-progress-indicator.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-progress-indicator" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,25 +86,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -148,9 +148,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -194,9 +194,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -240,9 +240,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -291,11 +291,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/progress-indicator/progress_indicator.twig&#039;%}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/progress-indicator/_progress_indicator.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit-tags.html b/styleguide/item-ui-kit-tags.html
index 002be5c..ce55644 100644
--- a/styleguide/item-ui-kit-tags.html
+++ b/styleguide/item-ui-kit-tags.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -40,8 +40,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit-tags" class="kss-section kss-section--depth-2 is-fullscreen">
   <div class="kss-style">
         <h2 class="kss-title kss-title--level-2">
@@ -86,25 +86,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -127,9 +127,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -152,9 +152,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -177,9 +177,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -207,11 +207,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% extends &#039;@govcms8_uikit/tags/tags.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/tags/_tags.scss</code>, line 1
     </div>
-  
+
 
 
 
diff --git a/styleguide/item-ui-kit.html b/styleguide/item-ui-kit.html
index 03ea531..a574b43 100644
--- a/styleguide/item-ui-kit.html
+++ b/styleguide/item-ui-kit.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -108,8 +108,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit" class="kss-section kss-section--depth-1 is-fullscreen">
   <div class="kss-style">
         <h1 class="kss-title kss-title--level-1">
@@ -124,13 +124,13 @@ <h1 class="kss-title kss-title--level-1">
     </a>
   </h1>
 
-  
-  
+
+
     </div>
 
 
-  
-  
+
+
 
 
 
diff --git a/styleguide/section-ui-kit.html b/styleguide/section-ui-kit.html
index 5645db2..3dee4ed 100644
--- a/styleguide/section-ui-kit.html
+++ b/styleguide/section-ui-kit.html
@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -108,8 +108,8 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   </nav>
 </div>
 <article role="main" class="kss-main au-body">
-  
-  
+
+
       <div id="kssref-ui-kit" class="kss-section kss-section--depth-1 ">
   <div class="kss-style">
         <h1 class="kss-title kss-title--level-1">
@@ -124,13 +124,13 @@ <h1 class="kss-title kss-title--level-1">
     </a>
   </h1>
 
-  
-  
+
+
     </div>
 
 
-  
-  
+
+
 
 
 
@@ -203,23 +203,23 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Accordion component.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -233,7 +233,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -244,11 +244,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -256,14 +256,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -271,10 +271,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -285,7 +285,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -300,7 +300,7 @@ <h3>Accordion group</h3>
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -314,7 +314,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -325,11 +325,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -337,14 +337,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -352,10 +352,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -366,7 +366,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -381,7 +381,7 @@ <h3>Accordion group</h3>
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -395,7 +395,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -406,11 +406,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -418,14 +418,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -433,10 +433,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -447,7 +447,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -462,7 +462,7 @@ <h3>Accordion group</h3>
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
     <h3>Single accordion open fast by default</h3>
 
@@ -476,7 +476,7 @@ <h3>Single accordion open fast by default</h3>
         <div class="au-accordion__body-wrapper">Item content 1</div>
       </div>
 
-    
+
   </section>
 
 
@@ -487,11 +487,11 @@ <h3>Accordion group</h3>
 <button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>
 
 <div class="accordion-group">
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-2" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-2" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 2</a>
 
@@ -499,14 +499,14 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 2</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
-    
+
       <a href="#accordion-3" class="au-accordion__title au-accordion--closed"
          aria-expanded="false" aria-selected="false" aria-controls="accordion-3" role="tab" onclick="return AU.accordion.Toggle( this )">Item title 3</a>
 
@@ -514,10 +514,10 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 3</div>
       </div>
 
-    
+
   </section>
 
-  
+
 
   <section class="au-accordion">
 
@@ -528,7 +528,7 @@ <h3>Accordion group</h3>
         <div class="au-accordion__body-wrapper">Item content 4</div>
       </div>
 
-    
+
   </section>
 
 </div>
@@ -593,11 +593,11 @@ <h3>Accordion group</h3>
 &lt;/div&gt;
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/accordion/_accordion.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -670,25 +670,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -720,9 +720,9 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -754,9 +754,9 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -788,9 +788,9 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-breadcrumbs" role="navigation" aria-label="breadcrumb">
   <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
   <ol class="au-link-list au-link-list--inline">
@@ -827,11 +827,11 @@ <h2 id="breadcrumb" class="visually-hidden">You are here</h2>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/breadcrumb/breadcrumb.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/breadcrumb/_breadcrumb.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -904,16 +904,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Form buttons.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -923,7 +923,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -1013,7 +1013,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -1103,7 +1103,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -1193,7 +1193,7 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
     <p>
   <button class="au-btn " type="button">Standard button</button>
@@ -1295,11 +1295,11 @@ <h2 class="kss-title kss-title--level-2">
 &lt;/p&gt;
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/button/_button.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -1372,25 +1372,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Click to action link.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -1403,9 +1403,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -1418,9 +1418,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -1433,9 +1433,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <a class="au-cta-link" href="foo">Read more</a>
 
     <div class="kss-modifier__example-footer"></div>
@@ -1453,11 +1453,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/cta-link/cta_link.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/cta-link/_cta-link.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -1530,16 +1530,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -1549,9 +1549,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -1567,7 +1567,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -1585,9 +1585,9 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -1603,7 +1603,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -1621,9 +1621,9 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -1639,7 +1639,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -1657,9 +1657,9 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading ">GovCMS is awesome</h1>
   </header>
@@ -1675,7 +1675,7 @@ <h1 class="au-header-heading ">GovCMS is awesome</h1>
       Hero header with bigger paddings.
     </div>
     <div class="kss-modifier__example">
-      
+
   <header class="au-header" role="banner">
     <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
   </header>
@@ -1695,11 +1695,11 @@ <h1 class="au-header-heading au-header--hero">GovCMS is awesome</h1>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/header/header.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/header/_header.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -1772,25 +1772,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -1824,9 +1824,9 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -1860,9 +1860,9 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -1896,9 +1896,9 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <nav class="au-inpage-nav-links">
   <h2 class="au-inpage-nav-links__heading">Contents</h2>
   <ul class="au-link-list">
@@ -1937,11 +1937,11 @@ <h2 class="au-inpage-nav-links__heading">Contents</h2>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/inpage-nav/inpage_nav.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/inpage-nav/_inpage_nav.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -2014,25 +2014,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -2072,9 +2072,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -2114,9 +2114,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -2156,9 +2156,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-keyword-list au-link-list">
       <li>
               <a href="foo">
@@ -2203,11 +2203,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/keyword-list/keyword_list.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/keyword-list/_keyword_list.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -2280,16 +2280,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -2299,9 +2299,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -2330,7 +2330,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -2361,9 +2361,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -2392,7 +2392,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -2423,9 +2423,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -2454,7 +2454,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -2485,9 +2485,9 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-link-list ">
       <li>
       <a href="foo">
@@ -2516,7 +2516,7 @@ <h2 class="kss-title kss-title--level-2">
       Link items inline.
     </div>
     <div class="kss-modifier__example">
-      
+
 <ul class="au-link-list au-link-list--inline">
       <li>
       <a href="foo">
@@ -2549,11 +2549,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/link-list/link_list.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/link-list/_link_list.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -2626,16 +2626,16 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
@@ -2645,12 +2645,12 @@ <h2 class="kss-title kss-title--level-2">
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2667,10 +2667,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2686,10 +2686,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2705,10 +2705,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2724,10 +2724,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2746,12 +2746,12 @@ <h3 class="visually-hidden">Status message</h3>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2768,10 +2768,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2787,10 +2787,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2806,10 +2806,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2825,10 +2825,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2847,12 +2847,12 @@ <h3 class="visually-hidden">Status message</h3>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2869,10 +2869,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2888,10 +2888,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2907,10 +2907,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2926,10 +2926,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2948,12 +2948,12 @@ <h3 class="visually-hidden">Status message</h3>
       <div class="kss-modifier__default-name">
       Default styling
     </div>
-  
+
   <div class="kss-modifier__example">
-    
+
 <div class="au-body au-page-alerts " aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2970,10 +2970,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert info.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--info" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -2989,10 +2989,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert warning.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--warning" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -3008,10 +3008,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert error.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--error" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -3027,10 +3027,10 @@ <h3 class="visually-hidden">Status message</h3>
       Page alert success.
     </div>
     <div class="kss-modifier__example">
-      
+
 <div class="au-body au-page-alerts au-page-alerts--success" aria-label="Status message"  role="alert">
             <h3 class="visually-hidden">Status message</h3>
-      
+
             <ul>
                   <li>We will never contact you in person over the phone to make a payment.</li>
                   <li>Please enter a valid email address.</li>
@@ -3051,11 +3051,11 @@ <h3 class="visually-hidden">Status message</h3>
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% extends &#039;@govcms8_uikit/page-alerts/page_alerts.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/page-alerts/_page_alerts.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -3128,25 +3128,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -3190,9 +3190,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -3236,9 +3236,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -3282,9 +3282,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
 <ul class="au-progress-indicator">
           <li>
       <a href="foo" class="au-progress-indicator__link au-progress-indicator__link--done">
@@ -3333,11 +3333,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% include &#039;@govcms8_uikit/progress-indicator/progress_indicator.twig&#039;%}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/progress-indicator/_progress_indicator.scss</code>, line 1
     </div>
-  
+
 
 
 
@@ -3410,25 +3410,25 @@ <h2 class="kss-title kss-title--level-2">
         </svg>
       </a>
     </p>
-  
+
       <div class="kss-description">
       <p>Tags to apply a taxonomy and link to similar content.</p>
 
     </div>
-  
+
     </div>
 
 
-  
+
     <div class="au-grid">
 
       <div class="au-body col-sm-6">
         <div class="kss-modifier__heading kss-style">
           Default example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -3451,9 +3451,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -3476,9 +3476,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -3501,9 +3501,9 @@ <h2 class="kss-title kss-title--level-2">
         <div class="kss-modifier__heading kss-style">
           Dark alt example        </div>
         <div class="kss-modifier__wrapper">
-  
+
   <div class="kss-modifier__example">
-    
+
   <ul class="au-tags">
           <li>foo</li>
           <li><a href='#'>bar</a></li>
@@ -3531,11 +3531,11 @@ <h2 class="kss-title kss-title--level-2">
         <pre class="prettyprint linenums lang-html"><code data-language="html">{% extends &#039;@govcms8_uikit/tags/tags.twig&#039; %}
 </code></pre>
       </details>
-      
+
       <div class="kss-source kss-style">
       Source: <code>uikit/tags/_tags.scss</code>, line 1
     </div>
-  
+
 
 
 

From d93dedd34c832ee76e505daf1c35badcb4d42621 Mon Sep 17 00:00:00 2001
From: enzo - Eduardo Garcia <enzo@anexusit.com>
Date: Wed, 2 Jan 2019 13:59:27 +1100
Subject: [PATCH 2/3] Update index.html

---
 styleguide/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styleguide/index.html b/styleguide/index.html
index 8e90534..c618cf0 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -46,7 +46,7 @@ <h1>GovCMS 8 UI-Kit Starter Styleguide</h1>
 <p>This styleguide is showing only the UI-Kit components with a reasonable
 template. It is not providing a comprehensive list of every style
 available in UI-Kit or the theme. Feel free to add other components as needed.</p>
-<p>For live examples of other styling, install the defaul content and visit
+<p>For live examples of other styling, install the default content and visit
 the <strong>/test</strong> page.</p>
 
 

From 88c55a3efde8be306a36bef512092a3dce37dd87 Mon Sep 17 00:00:00 2001
From: Alan <alan@salsadigital.com.au>
Date: Fri, 8 Feb 2019 17:06:02 +1100
Subject: [PATCH 3/3] [GCMSLG-167] Add context to attach function for
 responsive tables.

---
 assets/js/responsive_table.js | 5 +----
 js/govcms8_uikit_starter.js   | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/assets/js/responsive_table.js b/assets/js/responsive_table.js
index e6e82c9..15abcfb 100644
--- a/assets/js/responsive_table.js
+++ b/assets/js/responsive_table.js
@@ -7,10 +7,7 @@
 
   Drupal.behaviors.govcms8_uikit_starter_tableResponsive = {
     attach: function (context, settings) {
-
-      var table = $("table");
-      $(table).wrap("<div class='table-responsive'></div>");
-
+      $('table', context).wrap('<div class="table-responsive"></div>');
     }
   };
 
diff --git a/js/govcms8_uikit_starter.js b/js/govcms8_uikit_starter.js
index 297af52..0a28d03 100644
--- a/js/govcms8_uikit_starter.js
+++ b/js/govcms8_uikit_starter.js
@@ -1 +1 @@
-!function(t){Drupal.behaviors.govcms8_uikit_starter_BackToTop={attach:function(o,a){var i=t("#back-to-top button");t(function(){t(window).scroll(function(){t(this).scrollTop()>250?i.addClass("is-visible"):i.removeClass("is-visible")})}),i.click(function(o){t("body,html").animate({scrollTop:0},800),o.preventDefault()})}}}(jQuery),function(t){Drupal.behaviors.govcms8_uikit_starter_NavToggle={attach:function(o,a){t(".nav-toggle").on("click",function(o){t(".menu__main").toggleClass("open"),o.preventDefault()})}}}(jQuery),function(t){Drupal.behaviors.govcms8_uikit_starter_tableResponsive={attach:function(o,a){var i=t("table");t(i).wrap("<div class='table-responsive'></div>")}}}(jQuery);
\ No newline at end of file
+!function(t){Drupal.behaviors.govcms8_uikit_starter_BackToTop={attach:function(o,i){var a=t("#back-to-top button");t(function(){t(window).scroll(function(){t(this).scrollTop()>250?a.addClass("is-visible"):a.removeClass("is-visible")})}),a.click(function(o){t("body,html").animate({scrollTop:0},800),o.preventDefault()})}}}(jQuery),function(t){Drupal.behaviors.govcms8_uikit_starter_NavToggle={attach:function(o,i){t(".nav-toggle").on("click",function(o){t(".menu__main").toggleClass("open"),o.preventDefault()})}}}(jQuery),function(t){Drupal.behaviors.govcms8_uikit_starter_tableResponsive={attach:function(o,i){t("table",o).wrap('<div class="table-responsive"></div>')}}}(jQuery);
\ No newline at end of file