CASH-1397 add copy to header.

src/layouts/estimate/estimate.vue

@@ -11,7 +11,14 @@
                 <div class="col-md-6 col-xl-4 mt-4">
                     <funnelSubHeader class="pb-2" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
-                        <div class="vinlookupquestion mb-5" v-html="VinLookupQuestionText"></div>
+                        <p class="header-copy mb-2 text-md-center" v-html="HeaderText"></p>
+
+                        <p
+                            class="header-sub-copy mb-5 text-md-center"
+                            v-html="VinLookupQuestionText"></p>
+
+                        <p class="select-option mb-2" v-html="SelectOptionText"></p>
+
                         <buttonQuestion
                             cmsWidgetName="VinLookupMethod"
                             :answers="answersFromCms"
@@ -229,6 +236,12 @@ export default {
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
+        HeaderText() {
+            return this.getCmsContent("VinLookupQuestion", "HeaderText");
+        },
+        SelectOptionText() {
+            return this.getCmsContent("VinLookupQuestion", "FooterText");
+        },
     },
     components: {
         funnelHeader,
@@ -241,16 +254,15 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.vinlookupquestion p {
+.header-copy {
-    margin-bottom: 0;
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
 }
-.vinlookupquestion strong {
+.header-sub-copy {
-    font-weight: 500;
-    color: $black;
-}
-.vinlookupquestion p:nth-child(2) {
     font-size: 0.875rem;
-    margin-bottom: 1rem;
+}
+.select-option {
+    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+    font-weight: 600;
 }
 </style>