feat: content card updates

src/wmcads/components/content-card/_content-card.njk

@@ -7,23 +7,23 @@
 {# HTML content #}
 {% set html = params.html if params.html else "
     <div class=\"wmcads-p-sm\">
-    <h3>Where the adventure starts</h3>
-    <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
+    <h2>Lorem ipsum dolor sit amet</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
 " %}
 
 {# This macro checks if it's being called inside a {% call %} tag #}
 {# It's an easier way to pass in larger html content  #}
-<{{tag}}{{attributes | safe}} class="wmcads-content-card{{" blue" if params.isCta else "" }}">
+<{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }}">
     {% if(params.src) %}
-        <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=590&height=150&rnd=132122595620000000" alt="content image">
+        <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=1180&height=300&rnd=132122595620000000" alt="content image">
     {% endif %}
     {% if(params.isCta) %}
         <div class="wmcads-p-sm">
             <svg>
                 <use xlink:href="#wmcads-general-toolkit" href="#wmcads-general-toolkit"></use>
             </svg>
-            <h3>Where the adventure starts</h3>
+            <h2>Lorem ipsum dolor sit amet</h2>
         </div>
     {% else %}
         {%- if caller -%}

src/wmcads/components/content-card/_content-card.scss

@@ -1,3 +1,15 @@
+//accessibility styles
+@mixin accessibility-hover {
+  h2 {
+    text-decoration: underline;
+  }
+
+  &:hover,
+  &:focus {
+    box-shadow: inset 0 0 0 1px get-color(primary);
+  }
+}
+
 .wmcads-content-card {
   display: block;
   min-height: 150px;
@@ -6,15 +18,29 @@
   background-color: $white;
   text-decoration: none;
 
-  svg {
-    width: 60px;
-    height: 60px;
-    fill: $white;
+  @at-root a#{&} {
+    display: block;
+    color: get-color(text);
+    text-decoration: none;
+    @include accessibility-hover;
+  }
+
+  // Modifiers
+  &--blue {
+    display: block;
+    border-bottom: 0;
+    color: $white;
+    background: get-color(cta);
+
+    h2 {
+      color: $white;
+    }
+
+    svg {
+      width: 60px;
+      height: 60px;
+      fill: $white;
+    }
   }
-}
 
-.wmcads-content-card.blue {
-  border-bottom: 0;
-  color: $white;
-  background: get-color(cta);
 }