From a93b44a0d64a39e6d83674d9ab88fe17a5ba3956 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 11 Jan 2022 13:35:21 -0500
Subject: [PATCH 1/2] Update list-cards for proper alignment across layouts.

Update svgs to have same viewbox/canvas.
---
 src/assets/img/icons/back-glass-damage.svg    |  14 +-
 src/assets/img/icons/side-window-damage.svg   |  14 +-
 src/assets/img/icons/windshield-damage.svg    |  16 +--
 src/layouts/component-test/component-test.vue | 120 ++++++++++++------
 src/ux-components/list-card/list-card.vue     |  25 ++--
 5 files changed, 119 insertions(+), 70 deletions(-)

diff --git a/src/assets/img/icons/back-glass-damage.svg b/src/assets/img/icons/back-glass-damage.svg
index 59379e6de..d01d0cfac 100644
--- a/src/assets/img/icons/back-glass-damage.svg
+++ b/src/assets/img/icons/back-glass-damage.svg
@@ -1,10 +1,10 @@
-<svg version="1.1" id="back-glass-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 33.1" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 104.4 35.42" xml:space="preserve">
   <style>
-    .st0,.st2{fill:#fff;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2{fill:none}
+    .st8{stroke:#010101;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;fill:#fff}
   </style>
-  <path class="st0" d="M5.3.4h17.5l3.8 1.1h27.5L62.2.4c7.6 0 10.1 6.2 10.1 13.8v4.7c0 7.7-2.5 13.8-10.1 13.8l-8.1-1.1H26.6l-3.8 1.1H5.3c-.8 0-1.5-.2-2.1-.7-.6-.5-1.1-1.1-1.3-1.9C1.2 27.7.4 23.5.4 17.4s.8-12 1.5-14.5c.2-.7.7-1.4 1.3-1.9C3.7.6 4.5.4 5.3.4z"/>
-  <path class="st0" d="m55.9 3.4-5.7 2.5c-.8.3-1.3 1.6-1.1 2.8.6 5.3.6 10.6 0 15.8-.1 1.2.4 2.4 1.1 2.8l5.7 2.5c1 .4 1.9-.1 2.3-1.3 2.2-7.2 2.2-16.7 0-23.8-.3-1.2-1.3-1.8-2.3-1.3z"/>
-  <path d="m6.8 5.4 4.4 2c.2.1.3.2.4.3.1.2.1.3.1.5-.4 2.8-.6 5.6-.6 8.4 0 2.8.2 5.6.6 8.4 0 .2 0 .3-.1.5-.1.1-.2.3-.3.3l-4.4 2.3c-.1.1-.2.1-.3.1-.1 0-.2 0-.3-.1-.1 0-.2-.1-.3-.2-.1-.1-.1-.2-.2-.3-.5-1.3-1.3-4.5-1.3-11.1S5.3 7 5.8 5.8c0-.1.1-.2.2-.3 0-.1.1-.1.2-.2.1 0 .2-.1.3-.1.1.1.2.1.3.2z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path class="st0" d="M10.8 3.2h7.5c.1 0 .1.1.1.1v.2c0 .1 0 .1-.1.2l-1.4 2c-.1.1-.2.2-.3.2 0 .1-.1.1-.2.1h-1.3c-.4 0-.8-.1-1.1-.2l-3.5-2.4c0-.1.1-.1.1-.2h.2zM50 3.9c.1 0 .1-.1.1-.2v-.2c0-.1-.1-.1-.1-.2-.1 0-.1-.1-.2-.1H36c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.4.5-1.1 1.5-1.5 2.1v.2c0 .1.1.2.1.2h11.5c.2 0 .3 0 .4-.1l4.1-2zM31.7 6c.1 0 .2 0 .3-.1.1-.1.2-.1.3-.2.4-.5 1.1-1.5 1.5-2.1v-.2l-.1-.1h-13c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.3.4-1.1 1.5-1.5 2.1v.2l.1.1h13zM10.8 29.9H19.1c.1 0 .1-.1.1-.1v-.2c0-.1 0-.1-.1-.2l-1.4-2c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1h-2c-.4 0-.8.1-1.1.2l-3.5 2.4c0 .1.1.1.1.2h.2zM50 29.2c.1 0 .1.1.1.2v.2c0 .1-.1.1-.1.2-.1.1-.1.1-.2.1H36c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h11.5c.2 0 .3 0 .4.1l4.1 1.9zM31.7 27.1c.1 0 .2 0 .3.1.1.1.2.1.3.2.4.5 1.1 1.5 1.5 2.1v.2l-.1.1H21.5c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h12.2z"/>
-  <path class="st2" d="M3.1 28.6h1c.1 0 .2.1.3.1.1.1.2.2.2.3l1.1 3.4M69.6 7.9c-1.9-1.1-3.5-2.7-4.6-4.7-.2-.4.6-2.2.6-2.2V.9M3.1 4.3h1c.1 0 .2-.1.3-.1.2-.2.3-.3.3-.4L5.8.4M69.6 25.1c-1.9 1.1-3.5 2.7-4.6 4.7-.2.4.6 2.2.6 2.2v.1"/>
+  <path class="st8" d="M20.27.49H35.8l4.3 1.24h26.84L78.24.49c8.63 0 11.41 7 11.41 15.63v3.18c0 8.63-2.78 15.63-11.41 15.63l-11.3-1.24H40.1l-4.3 1.24H20.27c-.87 0-1.71-.29-2.4-.81a3.94 3.94 0 0 1-1.42-2.09c-.76-2.76-1.7-7.5-1.7-14.32s.92-11.56 1.7-14.32c.23-.83.74-1.57 1.42-2.09.69-.52 1.53-.8 2.4-.81z"/>
+  <path class="st8" d="M69.25 4.07 61.73 6.9c-1.02.38-1.7 1.82-1.49 3.13.79 5.22.79 10.53 0 15.74-.19 1.31.48 2.75 1.49 3.13l7.52 2.84c.3.12.61.18.93.18.32-.01.64-.08.92-.22.29-.14.55-.33.76-.58.21-.24.36-.53.46-.83a36.949 36.949 0 0 0 0-24.77c-.09-.31-.25-.59-.46-.83-.21-.24-.47-.44-.76-.58-.29-.14-.6-.21-.92-.22-.32-.01-.64.05-.93.18z"/>
+  <path d="m20.29 5.57 2.92 2.06c.42.29.69 1.61.61 2.85-.33 4.94-.33 9.89 0 14.83.08 1.24-.2 2.55-.61 2.85l-2.92 2.06c-.48.34-.94-.27-1.12-1.49-1-7.19-1-14.48 0-21.66.18-1.23.65-1.84 1.12-1.5z" fill="#d92e27" stroke="#010101" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path class="st8" d="M62.37 31.91H44.78c-.06 0-.12-.01-.17-.04a.396.396 0 0 1-.15-.1l-2.26-2.26a.478.478 0 0 1-.13-.23.387.387 0 0 1 .03-.26.41.41 0 0 1 .17-.2c.08-.05.16-.08.25-.08h14.15c.06 0 .12.01.17.03l5.69 2.26c.1.04.18.11.24.2s.07.2.05.31a.47.47 0 0 1-.16.27c-.08.06-.19.1-.29.1zm-37.98 0h16.62c.09 0 .18-.03.25-.08a.47.47 0 0 0 .17-.2c.03-.08.04-.18.03-.26a.41.41 0 0 0-.13-.23l-2.26-2.26a.482.482 0 0 0-.32-.13H27.71c-.09 0-.18.03-.26.08l-3.3 2.26c-.08.05-.14.13-.17.22a.448.448 0 0 0 .15.51c.07.05.16.08.26.09zM62.37 3.89H44.78c-.12 0-.24.05-.32.13L42.2 6.28c-.06.06-.11.14-.13.23-.01.09 0 .19.03.27.03.08.09.15.17.2.08.05.16.08.25.08h14.15c.06 0 .12-.01.17-.03l5.69-2.26c.1-.04.18-.11.24-.2s.07-.2.05-.31c-.02-.11-.08-.2-.16-.27s-.19-.1-.29-.1zm-37.98 0h16.62c.09 0 .18.03.25.08.08.05.13.12.17.2.03.08.04.18.03.26a.41.41 0 0 1-.13.23l-2.26 2.26c-.09.08-.2.13-.32.13H27.71c-.09 0-.18-.03-.26-.08l-3.3-2.26a.341.341 0 0 1-.18-.21.448.448 0 0 1 .15-.51c.08-.06.17-.1.27-.1z"/>
+  <path d="M86.1 7.06c-1.39-.93-2.55-2.16-3.4-3.6-.2-.37.54-1.84.54-1.84.01-.03.02-.05.03-.07M18.28 32.02c.06 0 .62.06.96.09.09.01.17.04.25.08.08.04.14.1.2.18l1.25 2.37c.04.06.06.12.06.19M18.28 3.5c.06 0 .62-.06.96-.09.09-.01.17-.04.25-.08.08-.04.14-.1.2-.18L20.94.78c.04-.06.06-.13.06-.19m65.1 27.72c-1.39.93-2.55 2.16-3.4 3.6-.2.37.54 1.84.54 1.84.01.03.02.05.03.07" fill="none" stroke="#010101" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/assets/img/icons/side-window-damage.svg b/src/assets/img/icons/side-window-damage.svg
index 356145856..4f4ae7517 100644
--- a/src/assets/img/icons/side-window-damage.svg
+++ b/src/assets/img/icons/side-window-damage.svg
@@ -1,10 +1,10 @@
-<svg version="1.1" id="side-window-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 24.8" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 104.4 35.42" xml:space="preserve">
   <style>
-    .st1,.st2,.st3{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2,.st3{fill:#fff}.st3{fill:#d92d27}
+    .st6{fill:none;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;stroke:#010101}
   </style>
-  <path d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8" fill="#fff"/>
-  <path class="st1" d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8"/>
-  <path class="st2" d="M13.7 24.5c3.2 0 5.8-2.6 5.8-5.8 0-3.2-2.6-5.8-5.8-5.8s-5.8 2.6-5.8 5.8c0 3.2 2.6 5.8 5.8 5.8zM54.7 18.6c0 1.2.3 2.3 1 3.2.6 1 1.5 1.7 2.6 2.1 1.1.4 2.2.6 3.4.3 1.1-.2 2.2-.8 3-1.6.8-.8 1.4-1.9 1.6-3 .2-1.1.1-2.3-.3-3.4s-1.2-2-2.1-2.6c-1-.6-2.1-1-3.2-1-.8 0-1.5.2-2.2.4-.7.3-1.3.7-1.9 1.3-.5.5-1 1.2-1.3 1.9-.5.9-.6 1.7-.6 2.4z"/>
-  <path class="st1" d="M64.2 11.5s.3-.2 1.2-.3h.3c1.2.4 2.4 1 3.4 2-1.1-.1-2.2-.4-3.3-.8M31.7 10.3c-.4-.2-.4-.4-.4-.5 0-.5.6-.6 1.3-.6h.6c.4 0 .7.1 1.1.2.2 0 .7.2.7.6 0 .5-.6.5-1.3.5M18.1 9.2c-.6-.2-.5-.5-.5-.6 0-.5.6-.6 1.3-.6h.6c1.8.1 1.8.6 1.8.8 0 .5-.6.6-1.3.6M15.5 22c-.7.4-1.6.6-2.4.4-.8-.1-1.6-.5-2.2-1.1-.6-.6-1-1.4-1.1-2.2-.1-.8.1-1.7.5-2.4s1.1-1.3 1.9-1.6c.8-.3 1.7-.4 2.5-.1.8.2 1.5.7 2.1 1.4.5.7.8 1.5.8 2.3M58.6 15.2c.7-.4 1.6-.6 2.4-.4.8.1 1.6.5 2.2 1.1.6.6 1 1.4 1.1 2.2.1.8-.1 1.7-.5 2.4s-1.1 1.3-1.9 1.6c-.8.3-1.7.4-2.5.1-.8-.2-1.5-.7-2.1-1.4-.5-.7-.8-1.5-.8-2.3M54.7 19.8H19.5M3.3 7.8s11-.5 0 3.1"/>
-  <path class="st3" d="m42.8 8-11.1-.7.1-5.2c4.3.1 8 1.2 10.9 2.3l.1 3.6zM50.6 8.4 44.3 8V5c2.2.9 3.9 1.6 5 2.3.5.5.9.9 1.3 1.1zM30.2 2.1l-.1 5.1-7.7-.4.1-4c2.6-.5 5.1-.7 7.7-.7zM16.6 6.5C17.3 5 19 3.9 21 3.3l-.1 3.5-4.3-.3z"/>
+  <path d="m95.12 28.4 7.73-1.01s-1.42-2.23.77-3.26c0 0 5.58-12.21-24.59-12.63 0 0-19.85-10.18-23.75-10.56 0 0-13.62-1.23-26.66-.08-.58.06-1.16.21-1.68.47-1.5.73-4.79 2.35-7.39 3.85A28.407 28.407 0 0 1 4.68 9.41l-.16 1.66S.16 11.49.39 21.08a4.37 4.37 0 0 0 1.62 3.28c1.59 1.26 4.41 2.91 9.16 4.05" fill="#fff"/>
+  <path class="st6" d="m95.12 28.4 7.73-1.01s-1.42-2.23.77-3.26c0 0 5.58-12.21-24.59-12.63 0 0-19.85-10.18-23.75-10.56 0 0-13.62-1.23-26.66-.08-.58.06-1.16.21-1.68.47-1.5.73-4.79 2.35-7.39 3.85A28.407 28.407 0 0 1 4.68 9.41l-.16 1.66S.16 11.49.39 21.08a4.37 4.37 0 0 0 1.62 3.28c1.59 1.26 4.41 2.91 9.16 4.05"/>
+  <path d="M19.56 35.05c4.63 0 8.39-3.76 8.39-8.39 0-4.63-3.76-8.39-8.39-8.39s-8.39 3.76-8.39 8.39c0 4.63 3.76 8.39 8.39 8.39zm58.97-8.39c0 1.66.49 3.28 1.41 4.66a8.413 8.413 0 0 0 3.76 3.09c1.53.63 3.22.8 4.85.48a8.337 8.337 0 0 0 4.29-2.29 8.467 8.467 0 0 0 2.3-4.29c.32-1.63.16-3.31-.48-4.85a8.427 8.427 0 0 0-3.09-3.77c-1.38-.92-3-1.41-4.66-1.42-1.1 0-2.19.22-3.21.64s-1.94 1.04-2.72 1.82-1.4 1.7-1.82 2.72a8.617 8.617 0 0 0-.63 3.21z" fill="#fff" stroke="#010101" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path class="st6" d="M92.32 16.39c.07-.07.42-.35 1.68-.5a.99.99 0 0 1 .48.05c1.75.61 3.51 1.41 4.92 2.93-1.62-.21-3.21-.59-4.76-1.12M45.45 14.6c-.56-.27-.53-.59-.52-.76.05-.7.92-.8 1.83-.8.28 0 .57.01.87.04.52.04 1.03.12 1.53.24.29.08 1.07.29 1.02.94-.05.65-.91.79-1.83.79M25.9 13.14c-.8-.29-.77-.66-.75-.84.05-.7.91-.8 1.84-.8.28 0 .57 0 .87.04 2.63.21 2.58.89 2.55 1.18-.05.7-.91.8-1.83.8m-6.37 18.04c-1.07.58-2.31.79-3.51.61a5.558 5.558 0 0 1-3.16-1.65 5.544 5.544 0 0 1-1.52-3.23c-.14-1.21.12-2.44.75-3.49a5.586 5.586 0 0 1 2.71-2.32c1.13-.46 2.38-.53 3.56-.2 1.18.32 2.21 1.02 2.95 2 .74.97 1.14 2.16 1.14 3.38m59.12-4.89c1.07-.58 2.31-.8 3.51-.62 1.21.18 2.32.76 3.17 1.64.85.88 1.38 2.01 1.52 3.22.14 1.21-.12 2.44-.74 3.49A5.492 5.492 0 0 1 89 31.82a5.57 5.57 0 0 1-3.56.21 5.55 5.55 0 0 1-4.1-5.37m-2.73 1.61H27.96M4.52 11.07s15.79-.73-.04 4.5"/>
+  <path d="m61.4 11.31-15.99-.9.21-7.45c6.22.13 11.49 1.77 15.68 3.28l.1 5.07zm11.24.63-9.07-.51-.04-4.3c3.2 1.34 5.61 2.35 7.15 3.37.85.61 1.47 1.12 1.96 1.44zM43.35 2.92l-.2 7.37-11.07-.64.21-5.73c3.64-.74 7.35-1.08 11.06-1zM23.72 9.23c1.01-2.27 3.47-3.73 6.36-4.66l-.11 5-6.25-.34z" fill="#d92e27" stroke="#010101" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/assets/img/icons/windshield-damage.svg b/src/assets/img/icons/windshield-damage.svg
index dfdea1bb1..7b2a128f6 100644
--- a/src/assets/img/icons/windshield-damage.svg
+++ b/src/assets/img/icons/windshield-damage.svg
@@ -1,12 +1,12 @@
-<svg version="1.1" id="windshield-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.1 47.1" xml:space="preserve">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 104.4 35.42" xml:space="preserve">
   <style>
     .st0{fill:#fff}.st1{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
   </style>
-  <path class="st0" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
-  <path class="st1" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
-  <path class="st0" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
-  <path class="st1" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
-  <path d="M36.1.4c12.4 0 18.2 1.4 18.2 1.4 5.5.9 8.7 11.1 8.7 11.1h1.1c0-3.7 2-3.7 3.6-3.1 1.1.5 2.1 1.2 2.9 2.1 2 2.4.7 2.6.7 2.6h-7.8l5.9 4.6v18.5c0 3.7-3.1 3.6-3.1 3.6H5.8s-3.1.2-3.1-3.6V19.2l5.9-4.6H.8s-1.3-.2.7-2.6c.8-.9 1.7-1.6 2.9-2.1C5.9 9.3 8 9.2 8 13h1.1s3.2-10.2 8.7-11.1c0-.1 5.9-1.5 18.3-1.5z" fill="#fff" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M36.1 12.8c12.2 0 22.5.8 22.5.8 0-4-3.7-9.3-3.7-9.3S48.9 3 36.1 3 17.2 4.3 17.2 4.3s-3.7 5.3-3.7 9.3c0 0 10.4-.8 22.6-.8z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path class="st1" d="M25.7 24.6c6.8-.7 13.6-.7 20.4 0M51.1 24s3.7-3.5 13.2-3.5c0 0 1.8 4.1-3.9 5.2M20.6 24s-3.7-3.5-13.2-3.5c0 0-1.8 4 3.9 5.2M5.9 34.7s33 5.6 60 0"/>
+  <path class="st0" d="M29.5 30.98c.03 1.06.47 2.06 1.24 2.8.76.74 1.78 1.15 2.83 1.15 1.06 0 2.08-.42 2.83-1.15.76-.74 1.2-1.75 1.24-2.8"/>
+  <path class="st1" d="M29.5 30.98c.03 1.06.47 2.06 1.24 2.8.76.74 1.78 1.15 2.83 1.15 1.06 0 2.08-.42 2.83-1.15.76-.74 1.2-1.75 1.24-2.8"/>
+  <path class="st0" d="M66.52 30.98c0 1.08.42 2.11 1.19 2.88s1.8 1.19 2.88 1.19 2.11-.42 2.88-1.19 1.19-1.8 1.19-2.88"/>
+  <path class="st1" d="M66.52 30.98c0 1.08.42 2.11 1.19 2.88s1.8 1.19 2.88 1.19 2.11-.42 2.88-1.19 1.19-1.8 1.19-2.88"/>
+  <path d="M52.21.38c9.33 0 13.72 1.08 13.72 1.08 4.13.66 6.57 8.32 6.57 8.32h.84c0-2.8 1.51-2.77 2.71-2.31.83.34 1.57.88 2.14 1.57 1.52 1.78.54 1.93.54 1.93h-5.85l4.44 3.47v13.87c0 2.78-2.35 2.67-2.35 2.67H29.45s-2.35.12-2.35-2.67V14.45l4.43-3.47h-5.86s-.99-.15.54-1.93c.57-.69 1.31-1.24 2.14-1.57 1.19-.46 2.71-.49 2.71 2.31h.85s2.45-7.66 6.57-8.32c.01-.01 4.4-1.09 13.73-1.09z" fill="#fff" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M52.21 9.66c9.14 0 16.95.59 16.95.59 0-2.98-2.75-6.93-2.75-6.93s-4.57-.95-14.2-.95-14.2.95-14.2.95-2.75 3.95-2.75 6.93c.01 0 7.81-.59 16.95-.59z" fill="#d92f27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path class="st1" d="M44.38 18.52c5.1-.54 10.23-.54 15.33 0m3.78-.51s2.75-2.6 9.94-2.6c0 0 1.36 3.07-2.94 3.89M40.6 18.01s-2.75-2.6-9.94-2.6c0 0-1.34 2.97 2.94 3.89m-4.1 6.76s24.84 4.21 45.16 0"/>
 </svg>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 2fe818932..777969046 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -8,10 +8,10 @@
     <div class="row">
       <div class="col">
         <checkbox
-          checkboxName="demo checkbox"
-          buttonID="checkbox-1"
-          tabIndex="1"
-          checkboxLabel="I'm a checkbox"
+        checkboxName="demo checkbox"
+        buttonID="checkbox-1"
+        tabIndex="1"
+        checkboxLabel="I'm a checkbox"
         />
       </div>
     </div>
@@ -31,19 +31,63 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonSecondary
-          buttonText="Secondary"
-          loaderColor="white"
-          sizeInRem="1"
+        buttonText="Secondary"
+        loaderColor="white"
+        sizeInRem="1"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonBack
-          backButtonAccessibleText="Back button label"
+        backButtonAccessibleText="Back button label"
         />
       </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 in Column Layout</h6>
+      </div>
+    </div>
+    <fieldset>
+      <legend class="sr-only">Functioning as Checkbox</legend>
+      <div class="row g-2">
+        <div class="col-4">
+          <listCard
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox 1"
+          groupID="checkbox-demo-1"
+          buttonLabelSubCopy="Description"
+          />
+        </div>
+        <div class="col-4">
+          <listCard
+          isMultiSelect
+          buttonImage="side-window-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox 2"
+          groupID="checkbox-demo-1"
+          buttonLabelSubCopy="Description with more than one line"
+          />
+        </div>
+        <div class="col-4">
+          <listCard
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox 3"
+          groupID="checkbox-demo-1"
+          buttonLabelSubCopy=""
+          />
+        </div>
+      </div>
+    </fieldset>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@@ -141,8 +185,8 @@
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
           isMultiSelectHorizontal
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
+          buttonImage="side-window-damage.svg"
+          buttonLabel="Side Window"
           altText=""
           buttonID="List Card Horizontal Checkbox b"
           groupID="checkbox-demo-3b"
@@ -158,8 +202,8 @@
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
           isRadioHorizontal
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
+          buttonImage="back-glass-damage.svg"
+          buttonLabel="Rear Window"
           altText=""
           buttonID="List Card Horizontal Radio Button"
           groupID="radio-demo-4"
@@ -629,60 +673,60 @@
     <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"
+        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"
+        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"
+        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"
+        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"
+        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"
+        alertClass="alert-success"
+        alertHeadline="No Body Copy Alert"
+        alertCopy=""
+        v-bind:isDismissible="false"
         />
       </div>
     </div>
@@ -694,7 +738,7 @@
     <div class="row my-3">
       <div class="col">
         <funnelHeader
-          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
+        imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
         />
       </div>
     </div>
@@ -706,7 +750,7 @@
     <div class="row my-3">
       <div class="col">
         <vehicleBanner
-          vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
+        vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
         />
       </div>
     </div>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 68b1c80b0..ea8502ca9 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,24 +1,24 @@
 <template>
   <!-- Heavily documented below -->
-  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center">
+  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
       <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
+  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
       <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
+  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -26,9 +26,9 @@
       </div>
     </label>
   </div>
-  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
+  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -65,9 +65,9 @@ export default {
   &.invalid { //Red border if invalid
     border: 1px solid $red;
   }
-  img {
+  img {// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
     height: auto;
-    width: 2.875rem;
+    width: 6.5rem;
     margin-bottom: 3rem;
   }
   &:hover {
@@ -85,6 +85,9 @@ export default {
       &:hover {
         cursor: pointer;
       }
+      p {
+        text-align: center;
+      }
     }
     &:focus + label {
       box-shadow: 0 0 0 2.5px $blue;
@@ -146,6 +149,7 @@ export default {
   &.horizontal {
     img {
       margin-bottom: 0;
+      width: 5.5rem;
     }
     input[type='checkbox'],
     input[type="radio"] {
@@ -161,6 +165,7 @@ export default {
         left: .875rem;
       }
       + label {
+        min-height: 48px;
         img {
           margin-bottom: 0;
         }

From 29597417a019508060a80452400b7b22b7f09056 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 11 Jan 2022 16:53:48 -0500
Subject: [PATCH 2/2] BRM css tweaks to list-card.vue.

---
 src/ux-components/list-card/list-card.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index ea8502ca9..1bd0739ba 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -110,6 +110,7 @@ export default {
       border: 1px solid $gray-500;
       border-radius: 2px;
       order: 2;
+      flex-shrink: 0;
     }
     + label.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
@@ -169,6 +170,9 @@ export default {
         img {
           margin-bottom: 0;
         }
+        p {
+          text-align: left;
+        }
       }
     }
   }