Fiddling with margins

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

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="text-block w-100 mt-2"
-        :class="[justifyText, typeStyle, fontWeight]"
+        class="text-block w-100"
+        :class="[justifyText, typeStyle, fontWeight, margin]"
         v-html="this.TextBlockCopy"></div>
 </template>
 
@@ -11,6 +11,11 @@ export default {
     props: {
         customText: String, // used to allow the insert of token values into textblock
         justifyText: String, // left, right, center
+        margin: {
+            // bootstrap margin to apply to the block.
+            type: String,
+            default: "mt-2",
+        },
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,

src/layouts/review/review.vue

@@ -7,8 +7,17 @@
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
 
-            <textBlock :customText="subHeaderTitle" typeStyle="h5" justifyText="text-center" class="dark-header" />
-            <textBlock :customText="subHeaderBody" typeStyle="body" justifyText="left" />
+            <textBlock
+                :customText="subHeaderTitle"
+                typeStyle="h5"
+                justifyText="text-center"
+                margin="mt-1"
+                class="dark-header" />
+            <textBlock
+                :customText="subHeaderBody"
+                typeStyle="body"
+                justifyText="left"
+                margin="mt-0 mb-2" />
 
             <buttonMain
                 ref="buttonMain"