diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 8812fe58a..062a6d608 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,57 +1,59 @@
-<template>
-  <div class="container-fluid container-shadow p-2 rounded-3">
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
+  <template>
+    <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <checkbox
+      <div class="row">
+        <div class="col">
+          <checkbox
           checkboxName="demo checkbox"
           buttonID="checkbox-1"
           tabIndex="1"
           checkboxLabel="I'm a checkbox"
-        />
-        <p class="my-3">With Error:</p>
-        <checkbox
+          />
+          <p class="mt-3 mb-0">With Error:</p>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <checkbox
           checkboxName="demo checkbox"
           buttonID="checkbox-2"
           tabIndex="1"
           checkboxLabel="Error!"
           hasError
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <radio
+      <div class="row">
+        <div class="col">
+          <radio
           groupName="radio-demo-2"
           buttonLabel="I'm a radio button!"
           buttonID="radio-button-a"
           isRequired
           value="I'm a radio button!"
           screenReaderOnlyText="Model Value 1"
-        />
-        <radio
+          />
+          <radio
           groupName="radio-demo-2"
           buttonLabel="I'm also a radio button!"
           buttonID="radio-button-b"
           isRequired
           value="I'm also a radio button!"
           screenReaderOnlyText="Model Value 2"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <p class="my-3">With Error:</p>
-        <radio
+      <div class="row">
+        <div class="col">
+          <p class="mt-3 mb-0">With Error:</p>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <radio
           groupName="radio-demo-3"
           buttonLabel="Error!"
           buttonID="radio-button-c"
@@ -59,101 +61,101 @@
           value="Error!"
           screenReaderOnlyText="Model Value 1"
           hasError
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           isPrimary
           buttonText="Primary"
           loaderColor="white"
           sizeInRem="1"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           isPrimary
           buttonText="Primary Disabled"
           loaderColor="white"
           sizeInRem="1"
           disabled
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           buttonText="Secondary"
           loaderColor="white"
           sizeInRem="1"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           buttonText="Secondary Disabled"
           loaderColor="white"
           sizeInRem="1"
           disabled
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonBack
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonBack
           backButtonAccessibleText="Back button label"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink
-        linkType=navigation
-        text="Navigation Link"
-        href="#!"
-        /><br><br>
-        <textLink
-        linkType="text"
-        text="Default Link"
-        href="#!"
-        /><br><br>
-        <textLink
-        linkType=textSmall
-        text="Small Link"
-        href="#!"
-        /><br><br>
-        <textLink
-        linkType=footer
-        text="Footer Link"
-        href="https://google.com"
-        />
+      <div class="row">
+        <div class="col my-3">
+          <textLink
+          linkType=navigation
+          text="Navigation Link"
+          href="#!"
+          /><br><br>
+          <textLink
+          linkType="text"
+          text="Default Link"
+          href="#!"
+          /><br><br>
+          <textLink
+          linkType=textSmall
+          text="Small Link"
+          href="#!"
+          /><br><br>
+          <textLink
+          linkType=footer
+          text="Footer Link"
+          href="https://google.com"
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+          <h6 class="mx-0 px-0 my-0">Functioning as Checkbox</h6>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <fieldset>
-          <legend class="sr-only">Functioning as Checkbox</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <fieldset>
+            <legend class="sr-only">Functioning as Checkbox</legend>
+            <listCard
             isMultiSelect
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -161,16 +163,16 @@
             buttonID="List Card Checkbox 1"
             groupID="checkbox-demo-1"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Checkbox No Description</h6>
-        <fieldset>
-          <legend class="sr-only">Checkbox no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Checkbox No Description</h6>
+          <fieldset>
+            <legend class="sr-only">Checkbox no Description</legend>
+            <listCard
             isMultiSelect
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -178,16 +180,17 @@
             buttonID="List Card Checkbox 2"
             groupID="checkbox-demo-1a"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Checkbox with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Checkbox with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Checkbox with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Checkbox with Error</legend>
+            <listCard
             isMultiSelect
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -196,16 +199,16 @@
             groupID="checkbox-demo-1e"
             buttonLabelSubCopy="Description"
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
-        <fieldset>
-          <legend class="sr-only">Functioning as Radio Button</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Functioning as Radio Button</h6>
+          <fieldset>
+            <legend class="sr-only">Functioning as Radio Button</legend>
+            <listCard
             isRadio
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -213,16 +216,16 @@
             buttonID="List Card Radio Button"
             groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Radio Button no Description</h6>
-        <fieldset>
-          <legend class="sr-only">Radio Button no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
+          <fieldset>
+            <legend class="sr-only">Radio Button no Description</legend>
+            <listCard
             isRadio
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -230,16 +233,17 @@
             buttonID="List Card Radio Button b"
             groupID="radio-demo-2b"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Radio Button with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Radio Button with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Radio Button with Error</legend>
+            <listCard
             isRadio
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -248,16 +252,16 @@
             groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal Checkbox</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Horizontal as Checkbox</h6>
+          <fieldset>
+            <legend class="sr-only">Horizontal Checkbox</legend>
+            <listCard
             isMultiSelect
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
@@ -266,16 +270,16 @@
             buttonID="List Card Horizontal Checkbox"
             groupID="checkbox-demo-3"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Checkbox no Description</h6>
-        <fieldset>
-          <legend class="sr-only">Checkbox no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Checkbox no Description</h6>
+          <fieldset>
+            <legend class="sr-only">Checkbox no Description</legend>
+            <listCard
             isMultiSelect
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
@@ -284,16 +288,17 @@
             buttonID="List Card Horizontal Checkbox b"
             groupID="checkbox-demo-3b"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Horizontal with Error</legend>
+            <listCard
             isMultiSelect
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
@@ -303,16 +308,16 @@
             groupID="checkbox-demo-3d"
             buttonLabelSubCopy=""
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal Radio Button</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Horizontal as Radio Button</h6>
+          <fieldset>
+            <legend class="sr-only">Horizontal Radio Button</legend>
+            <listCard
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Rear Window"
@@ -320,16 +325,16 @@
             buttonID="List Card Horizontal Radio Button"
             groupID="radio-demo-4"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Radio Button no Description</h6>
-        <fieldset>
-          <legend class="sr-only">Radio Button no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
+          <fieldset>
+            <legend class="sr-only">Radio Button no Description</legend>
+            <listCard
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -337,16 +342,17 @@
             buttonID="List Card Horizontal Radio Button b"
             groupID="radio-demo-4b"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Horizontal with Error</legend>
+            <listCard
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -355,812 +361,820 @@
             groupID="radio-demo-4e"
             buttonLabelSubCopy=""
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
+          <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
+      <div class="row">
+        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+        <div
         role="radiogroup"
         aria-labelledby="demo-1-radio-group"
         class="col my-3 d-flex align-items-center flex-column"
-      >
+        >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-1-radio-group">Select Vehicle Year</h3>
         <listButton
-          isMultiSelect
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          buttonID="2021"
-          buttonLabel="2021"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
+        isMultiSelect
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        buttonID="2021"
+        buttonLabel="2021"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
-          isMultiSelect
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          buttonID="2020"
-          buttonLabel="2020"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
+        isMultiSelect
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        buttonID="2020"
+        buttonLabel="2020"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
-          isMultiSelect
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          buttonID="2019"
-          buttonLabel="2019"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
+        isMultiSelect
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        buttonID="2019"
+        buttonLabel="2019"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
-        <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+        <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
+        <small class="d-flex align-self-start">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
         <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-year"
-          buttonID="2019b"
-          buttonLabel="2019"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
+        isMultiSelect
+        groupName="demo-2"
+        ariaLabelBy="vehicle-year"
+        buttonID="2019b"
+        buttonLabel="2019"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        hasError
         />
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
-        role="checkbox"
-        aria-labelledby="demo-1-checkbox-group"
-        class="col my-3 d-flex flex-column"
+      role="checkbox"
+      aria-labelledby="demo-1-checkbox-group"
+      class="col my-3 d-flex flex-column"
       >
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2018"
-          buttonLabel="2018"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2017"
-          buttonLabel="2017"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2016"
-          buttonLabel="2016"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <h6 class="mx-2 my-4">Radio Button with Error</h6>
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2016"
-          buttonLabel="2016"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-2-radio-group"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
-        <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          buttonID="Chevrolet"
-          buttonLabel="Chevrolet"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          buttonID="Dodge"
-          buttonLabel="Dodge"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          buttonID="Ford"
-          buttonLabel="Ford"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-2-checkbox-group"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
-        <listButton
-          groupName="demo-2-checkbox"
-          ariaLabelBy="vehicle-make"
-          buttonID="Honda"
-          buttonLabel="Honda"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-2-checkbox"
-          ariaLabelBy="vehicle-make"
-          buttonID="Acura"
-          buttonLabel="Acura"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-2-checkbox"
-          ariaLabelBy="vehicle-make"
-          buttonID="Infiniti"
-          buttonLabel="Infiniti"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">
-          List Button - Multi-Line Centered
-        </h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-3-radio-group"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
-        <listButton
-          isMultiSelect
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          buttonID="Corvette"
-          buttonLabel="Corvette"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          buttonID="Testarosa"
-          buttonLabel="Testarosa"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          buttonID="S600"
-          buttonLabel="S600"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-3-checkbox-group"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
-        <listButton
-          groupName="demo-3-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="Accord"
-          buttonLabel="Accord"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-3-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="Civic"
-          buttonLabel="Civic"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-3-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="Ridgeline"
-          buttonLabel="Ridgeline"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
-      </div>
-    </div>
-    <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-radio-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          buttonID="1"
-          buttonLabel="1"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          buttonID="2"
-          buttonLabel="2"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          buttonID="3"
-          buttonLabel="3"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row px-3">
-      <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-radio-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4b"
-          ariaLabelBy="vehicle-model"
-          buttonID="1b"
-          buttonLabel="1"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4b"
-          ariaLabelBy="vehicle-model"
-          buttonID="2b"
-          buttonLabel="2"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4b"
-          ariaLabelBy="vehicle-model"
-          buttonID="3b"
-          buttonLabel="3"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-      </div>
-    </div>
-    <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-checkbox-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          groupName="demo-4-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="4"
-          buttonLabel="4"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="5"
-          buttonLabel="5"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="6"
-          buttonLabel="6"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row px-3">
-      <h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-checkbox-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          groupName="demo-4-checkboxc"
-          ariaLabelBy="vehicle-model"
-          buttonID="4c"
-          buttonLabel="4"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkboxc"
-          ariaLabelBy="vehicle-model"
-          buttonID="5c"
-          buttonLabel="5"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkboxc"
-          ariaLabelBy="vehicle-model"
-          buttonID="6c"
-          buttonLabel="6"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <p>This is default body copy font size/weight</p>
-        <p class="small">
-          This is small body copy using <code>.small</code> class
-        </p>
-        <p>
-          <small>This is also small using <code>&lt;small&gt;</code> tag</small>
-        </p>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h1>h1 Heading</h1>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h2>h2 Heading</h2>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h3>h3 Heading</h3>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h4>h4 Heading</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h5>h5 Heading</h5>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h6>h6 Heading</h6>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-          alertClass="alert-success"
-          alertHeadline="Dismissible Alert"
-          alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-          v-bind:isDismissible="true"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-          alertClass="alert-danger"
-          alertHeadline="NON-Dismissible Alert"
-          alertCopy="This is an example of a NON-DISMISSIBLE alert."
-          v-bind:isDismissible="false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-          alertClass="alert-warning"
-          alertHeadline="Warning Alert"
-          alertCopy="This is an example of a WARNING alert."
-          v-bind:isDismissible="false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-          alertClass="alert-info"
-          alertHeadline="Info Alert"
-          alertCopy="This is an example of a INFO alert."
-          v-bind:isDismissible="false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-          alertClass="alert-danger"
-          alertHeadline="Danger Alert"
-          alertCopy="This is an example of a DANGER alert."
-          v-bind:isDismissible="false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-          alertClass="alert-success"
-          alertHeadline="No Body Copy Alert"
-          alertCopy=""
-          v-bind:isDismissible="false"
-        />
-      </div>
+      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
+      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+      <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2018"
+      buttonLabel="2018"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2017"
+      buttonLabel="2017"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2016"
+      buttonLabel="2016"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
+      <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2016"
+      buttonLabel="2016"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      hasError
+      />
     </div>
   </div>
-</template>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+    </div>
+  </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+      role="radiogroup"
+      aria-labelledby="demo-2-radio-group"
+      class="col my-3 d-flex align-items-center flex-column"
+      >
+      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+      <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
+      <listButton
+      isMultiSelect
+      groupName="demo-2"
+      ariaLabelBy="vehicle-make"
+      buttonID="Chevrolet"
+      buttonLabel="Chevrolet"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      isMultiSelect
+      groupName="demo-2"
+      ariaLabelBy="vehicle-make"
+      buttonID="Dodge"
+      buttonLabel="Dodge"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      isMultiSelect
+      groupName="demo-2"
+      ariaLabelBy="vehicle-make"
+      buttonID="Ford"
+      buttonLabel="Ford"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
+      <div
+      role="radiogroup"
+      aria-labelledby="demo-2-checkbox-group"
+      class="col my-3 d-flex align-items-center flex-column"
+      >
+      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+      <h3 class="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
+      <listButton
+      groupName="demo-2-checkbox"
+      ariaLabelBy="vehicle-make"
+      buttonID="Honda"
+      buttonLabel="Honda"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-2-checkbox"
+      ariaLabelBy="vehicle-make"
+      buttonID="Acura"
+      buttonLabel="Acura"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-2-checkbox"
+      ariaLabelBy="vehicle-make"
+      buttonID="Infiniti"
+      buttonLabel="Infiniti"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+  </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">
+        List Button - Multi-Line Centered
+      </h4>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+    </div>
+  </div>
+  <div class="row">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-3-radio-group"
+    class="col my-3 d-flex align-items-center flex-column"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
+    <listButton
+    isMultiSelect
+    groupName="demo-3"
+    ariaLabelBy="vehicle-model"
+    buttonID="Corvette"
+    buttonLabel="Corvette"
+    buttonLabelSubCopy="Test sub-headline"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButton
+    isMultiSelect
+    groupName="demo-3"
+    ariaLabelBy="vehicle-model"
+    buttonID="Testarosa"
+    buttonLabel="Testarosa"
+    buttonLabelSubCopy="Test sub-headline"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButton
+    isMultiSelect
+    groupName="demo-3"
+    ariaLabelBy="vehicle-model"
+    buttonID="S600"
+    buttonLabel="S600"
+    buttonLabelSubCopy="Test sub-headline"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    screenReaderOnlyText=" opens new window"
+    />
+  </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
+      <div
+      role="radiogroup"
+      aria-labelledby="demo-3-checkbox-group"
+      class="col my-3 d-flex align-items-center flex-column"
+      >
+      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+      <h3 class="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
+      <listButton
+      groupName="demo-3-checkbox"
+      ariaLabelBy="vehicle-model"
+      buttonID="Accord"
+      buttonLabel="Accord"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-3-checkbox"
+      ariaLabelBy="vehicle-model"
+      buttonID="Civic"
+      buttonLabel="Civic"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-3-checkbox"
+      ariaLabelBy="vehicle-model"
+      buttonID="Ridgeline"
+      buttonLabel="Ridgeline"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+  </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+    </div>
+  </div>
+  <div class="row px-3">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-radio-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4"
+    ariaLabelBy="vehicle-model"
+    buttonID="1"
+    buttonLabel="1"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4"
+    ariaLabelBy="vehicle-model"
+    buttonID="2"
+    buttonLabel="2"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4"
+    ariaLabelBy="vehicle-model"
+    buttonID="3"
+    buttonLabel="3"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    />
+  </div>
+  </div>
+  <div class="row px-3">
+    <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
+    <small class="p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-radio-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4b"
+    ariaLabelBy="vehicle-model"
+    buttonID="1b"
+    buttonLabel="1"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4b"
+    ariaLabelBy="vehicle-model"
+    buttonID="2b"
+    buttonLabel="2"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4b"
+    ariaLabelBy="vehicle-model"
+    buttonID="3b"
+    buttonLabel="3"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+  </div>
+  </div>
+  <div class="row px-3">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-checkbox-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    groupName="demo-4-checkbox"
+    ariaLabelBy="vehicle-model"
+    buttonID="4"
+    buttonLabel="4"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkbox"
+    ariaLabelBy="vehicle-model"
+    buttonID="5"
+    buttonLabel="5"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkbox"
+    ariaLabelBy="vehicle-model"
+    buttonID="6"
+    buttonLabel="6"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    />
+  </div>
+  </div>
+  <div class="row px-3">
+    <h6 class="mx-0 mt-4 mb-0 p-0 d-flex align-self-start">Radio Button with Error</h6>
+    <small class="m-0 p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-checkbox-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    groupName="demo-4-checkboxc"
+    ariaLabelBy="vehicle-model"
+    buttonID="4c"
+    buttonLabel="4"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkboxc"
+    ariaLabelBy="vehicle-model"
+    buttonID="5c"
+    buttonLabel="5"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkboxc"
+    ariaLabelBy="vehicle-model"
+    buttonID="6c"
+    buttonLabel="6"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+  </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <p>This is default body copy font size/weight</p>
+      <p class="small">
+        This is small body copy using <code>.small</code> class
+      </p>
+      <p>
+        <small>This is also small using <code>&lt;small&gt;</code> tag</small>
+      </p>
+    </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <h1>h1 Heading</h1>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <h2>h2 Heading</h2>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <h3>h3 Heading</h3>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <h4>h4 Heading</h4>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <h5>h5 Heading</h5>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <h6>h6 Heading</h6>
+    </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-success"
+      alertHeadline="Dismissible Alert"
+      alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
+      v-bind:isDismissible="true"
+      />
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-danger"
+      alertHeadline="NON-Dismissible Alert"
+      alertCopy="This is an example of a NON-DISMISSIBLE alert."
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-warning"
+      alertHeadline="Warning Alert"
+      alertCopy="This is an example of a WARNING alert."
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-info"
+      alertHeadline="Info Alert"
+      alertCopy="This is an example of a INFO alert."
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-danger"
+      alertHeadline="Danger Alert"
+      alertCopy="This is an example of a DANGER alert."
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-success"
+      alertHeadline="No Body Copy Alert"
+      alertCopy=""
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
+  </div>
+  </template>
 
-<script>
-import buttonMain from "@/ux-components/button-main/button-main";
-import buttonBack from "@/common-components/button-back/button-back";
-import listCard from "@/ux-components/list-card/list-card";
-import listButton from "@/ux-components/list-button/list-button";
-import alert from "@/ux-components/alert/alert";
-import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
-import checkbox from "@/ux-components/checkbox/checkbox";
-import radio from "@/ux-components/radio/radio";
-import textLink from "@/ux-components/text-link/text-link";
-export default {
-  name: "App",
-  components: {
-    buttonMain,
-    buttonBack,
-    listCard,
-    listButton,
-    alert,
-    listButtonHorizontal,
-    checkbox,
-    radio,
-    textLink
-  },
-  data() {
-    return {
-      years: [2023, 2022, 2021, 2020],
-      checkboxAnswers: [
-        "Checkbox Answer 1",
-        "Checkbox Answer 2",
-        "Checkbox Answer 3",
-      ],
-      radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
-      horizontalCheckboxAnswers: [
-        "HCB Answer 1",
-        "HCB Answer 2",
-        "HCB Answer 3",
-      ],
-      horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
-      listCardCheckBox: [
-        {
-          Name: "List-Card-CB",
-          Text: "List Card CB",
-          SubText: "checkbox",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardRadio: [
-        {
-          Name: "List-Card-R",
-          Text: "List Card R",
-          SubText: "Radio",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardCheckBoxHorizontalSubText: [
-        {
-          Name: "List-Card-CBHst",
-          Text: "List Card CBHst",
-          SubText: "With Subtext",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardCheckBoxHorizontal: [
-        {
-          Name: "List-Card-CBH",
-          Text: "List Card CBH",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listRadioHorizontalSubText: [
-        {
-          Name: "List-Card-RHst",
-          Text: "List Card RHst",
-          SubText: "With Subtext",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listRadioHorizontal: [
-        {
-          Name: "List-Card-RH",
-          Text: "List Card RH",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardGroup: [
-        {
-          Name: "Side-Window-1",
-          Text: "Side Window",
-          SubText: "With Subtext",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-        {
-          Name: "Side-Window-2",
-          Text: "Side Window",
-          SubText: "With Subtext that is more than one line",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-        {
-          Name: "Side-Window-3",
-          Text: "Side Window",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-    };
-  },
-};
-</script>
+  <script>
+  import buttonMain from "@/ux-components/button-main/button-main";
+  import buttonBack from "@/common-components/button-back/button-back";
+  import listCard from "@/ux-components/list-card/list-card";
+  import listButton from "@/ux-components/list-button/list-button";
+  import alert from "@/ux-components/alert/alert";
+  import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+  import checkbox from "@/ux-components/checkbox/checkbox";
+  import radio from "@/ux-components/radio/radio";
+  import textLink from "@/ux-components/text-link/text-link";
+  export default {
+    name: "App",
+    components: {
+      buttonMain,
+      buttonBack,
+      listCard,
+      listButton,
+      alert,
+      listButtonHorizontal,
+      checkbox,
+      radio,
+      textLink
+    },
+    data() {
+      return {
+        years: [2023, 2022, 2021, 2020],
+        checkboxAnswers: [
+          "Checkbox Answer 1",
+          "Checkbox Answer 2",
+          "Checkbox Answer 3",
+        ],
+        radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
+        horizontalCheckboxAnswers: [
+          "HCB Answer 1",
+          "HCB Answer 2",
+          "HCB Answer 3",
+        ],
+        horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
+        listCardCheckBox: [
+          {
+            Name: "List-Card-CB",
+            Text: "List Card CB",
+            SubText: "checkbox",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardRadio: [
+          {
+            Name: "List-Card-R",
+            Text: "List Card R",
+            SubText: "Radio",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardCheckBoxHorizontalSubText: [
+          {
+            Name: "List-Card-CBHst",
+            Text: "List Card CBHst",
+            SubText: "With Subtext",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardCheckBoxHorizontal: [
+          {
+            Name: "List-Card-CBH",
+            Text: "List Card CBH",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listRadioHorizontalSubText: [
+          {
+            Name: "List-Card-RHst",
+            Text: "List Card RHst",
+            SubText: "With Subtext",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listRadioHorizontal: [
+          {
+            Name: "List-Card-RH",
+            Text: "List Card RH",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardGroup: [
+          {
+            Name: "Side-Window-1",
+            Text: "Side Window",
+            SubText: "With Subtext",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+          {
+            Name: "Side-Window-2",
+            Text: "Side Window",
+            SubText: "With Subtext that is more than one line",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+          {
+            Name: "Side-Window-3",
+            Text: "Side Window",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+      };
+    },
+  };
+  </script>