Create CSM entries and markup for coverage statement page.

Remove hard-coded margin-bottom from vehicleBanner and replace it at the component level.

"Recalibration" link at bottom of page is for testing only and will be removed when textLink functionality is added to the CMS.

src/digital-components/text-block/text-block.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="text-block w-100 mt-2"
+        class="text-block w-100"
         :class="[justifyText, typeStyle, fontWeight]"
         v-html="this.TextBlockCopy"></div>
 </template>
@@ -25,12 +25,15 @@ export default {
 <style lang="scss" scoped>
 .text-block {
     &.left {
+        display: flex;
         justify-content: flex-start;
     }
     &.right {
+        display: flex;
         justify-content: flex-end;
     }
     &.center {
+        display: flex;
         justify-content: center;
     }
     &.bold {

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -2,7 +2,7 @@
     <div :class="`page-container-grouped-styles questions-page`">
         <loadingModal ref="loadingModal" />
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+        <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
         <div class="fade-on-route-transition sub-container make-tall">
             <alert

src/iss-components/vehicle-banner/vehicle-banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-3 text-center">
+  <div class="vehicle_banner text-center">
     <img
       class="vehicle-image img-fluid"
       :src="vehicleImageToDisplay"

src/layouts/address-lookup/address-lookup.vue

@@ -8,6 +8,7 @@
         <div class="page-container-grouped-styles">
             <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
             <vehicleBanner
+                class="mb-3"
                 cmsWidgetName="VehicleBannerWidget"
                 ref="vehicleBanner"
                 :displayGenericVehicleImage="false" />

src/layouts/address-vehicles/address-vehicles.vue

@@ -8,6 +8,7 @@
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <vehicleBanner
+        class="mb-3"
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
       />

src/layouts/capability-questions/capability-questions.vue

@@ -11,6 +11,7 @@
       <vehicleBanner
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
+        class="mb-3"
       />
       <siteSubHeader
         cmsWidgetName="SiteSubHeaderWidget"

src/layouts/coverage-statement/coverage-statement.vue

@@ -11,13 +11,31 @@
       <vehicleBanner
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
+        class="mb-0"
       />
-      <siteSubHeader
+      <div class="fade-on-route-transition sub-container make-tall">
-        cmsWidgetName="SiteSubHeaderWidget"
+        <textBlock
-      />
+            cmsWidgetName="verifyingCoverageStatement"
-      <div class="fade-on-route-transition sub-container make-tall mt-5">
+            typeStyle="h5"
-        <p>Placeholder for coverage-statement page</p>
+            justifyText="center"
-
+            class="mt-4 mb-4"
+        />
+        <textBlock
+            cmsWidgetName="continueWithSchedulingCopy"
+            typeStyle="body"
+            class="mt-0"
+        />
+        <textBlock
+            cmsWidgetName="whatHappensNextCopy"
+            typeStyle="h6"
+            class="mt-4"
+        />
+        <textBlock
+            cmsWidgetName="UnverifiedADASNextStepsWidget"
+            typeStyle="body"
+        />
+        <a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
+        <modal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -30,9 +48,6 @@
   </Form>
 </template>
 <script>
-// Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { settleAllPromises } from '@/helpers/layout-helper';
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -41,6 +56,12 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import textBlock from "@/digital-components/text-block/text-block";
+import modal from "@/digital-components/modal/modal";
+
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
 
 export default {
   name: 'coverage-statement',
@@ -51,6 +72,8 @@ export default {
     siteSubHeader,
     Form,
     vehicleBanner,
+    textBlock,
+    modal,
   },
   data() {
     return {};
@@ -87,3 +110,12 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+    ol {
+        margin-left: -1rem;
+        li {
+            margin-bottom: .5rem;
+        }
+    }
+</style>

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -6,6 +6,7 @@
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cms-widget-name="SiteHeaderWidget" />
       <vehicleBanner
+        class="mb-3"
         cms-widget-name="VehicleBannerWidget"
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -3,6 +3,7 @@
         <div class="page-container-grouped-styles overflow-auto">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <vehicleBanner
+                class="mb-3"
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -8,6 +8,7 @@
         cms-widget-name="SiteHeaderWidget"
       />
       <VehicleBanner
+        class="mb-3"
         cms-widget-name="VehicleBannerWidget"
         :display-generic-vehicle-image="false"
       />

src/layouts/vehicle-make/vehicle-make.vue

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
+          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
           <siteSubHeader
             cmsWidgetName="SiteSubHeaderWidget"
             :hasBackButton="true"

src/layouts/vehicle-model/vehicle-model.vue

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
           <siteSubHeader
             cmsWidgetName="SiteSubHeaderWidget"
             :hasBackButton="true"
@@ -109,4 +109,3 @@
     },
   };
   </script>
-  

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -3,6 +3,7 @@
         <div class="page-container-grouped-styles vehicle-parts">
             <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
             <vehicleBanner
+                class="mb-3"
                 ref="vehicleBanner"
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />

src/layouts/vehicle-style/vehicle-style.vue

@@ -3,7 +3,7 @@
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
         <div class="select-car">
             <div class="select-car-form rounded text-center">
-                <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
                 <siteSubHeader
                     cmsWidgetName="SiteSubHeaderWidget"
                     :hasBackButton="true"

src/layouts/vehicle-year/vehicle-year.vue

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
+          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
           <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
           <div class="fade-on-route-transition">
             <yearQuestion
@@ -99,4 +99,3 @@
     },
   };
   </script>
-  

src/layouts/vin-lookup/vin-lookup.vue

@@ -9,6 +9,7 @@
         cmsWidgetName="SiteHeaderWidget"
       />
       <vehicleBanner
+        class="mb-3"
         cmsWidgetName="VehicleBannerWidget"
         :displayGenericVehicleImage="false"
       />

src/layouts/welcome-page/welcome-page.vue

@@ -34,7 +34,7 @@
             </div>
             <div class="row">
                 <div class="col">
-                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
+                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
                 </div>
             </div>
             <div class="row mt-4">

src/styles/common-typography-styles.scss

@@ -25,7 +25,7 @@ h4,.h4 {
   font-weight: 300;
 }
 h5,.h5 {
-  line-height: 1.325;
+  line-height: 1.6;
   font-weight: 400;
 }
 h6,.h6 {