Merging ISTWCMS-5267

source/_patterns/04-components/card/card--banner/_card--banner.scss

@@ -4,44 +4,60 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
   .#{$faculty} {
     // If the UW branding group
     @if $faculty == org-default {
-        .card__banner--caption{
-          background-color:$uw-black;
-          @include small {
-            background-color: rgba(0,0,0,.8);
-          }
-          a {
+      .card__banner{
+        a  {
+          .card__banner--title {
             color: $uw-gold;
-            &:hover {
+          }
+          .card__banner--sub-title  {
+            color: $uw-white !important;
+          }
+          &:hover,
+          &:focus {
+            .card__banner--title {
               color: $uw-gold;
+              text-decoration:underline;
             }
+            .card__banner--sub-title  {
+              color: $uw-white !important;
+              text-decoration:underline;
+            }
+            //color: $uw-gold;
           }
         }
-        .card__banner--sub-title  {
-          color: $uw-white;
-        }
-        .card__banner--title {
-          color: $uw-gold;
-        }
       }
+      .card__banner--caption{
+        background-color:$uw-black;
+      }
+
+    }
     @else {
-        .card__banner--caption{
-            background:gesso-brand($faculty, 'primary');
-            @include small {
-              background: rgba(gesso-brand($faculty, 'primary'), 0.8);
+        .card__banner{
+          a {
+            .card__banner--title  {
+              color:gesso-brand($faculty, 'lvl1');
+
             }
-            a {
-            color:gesso-brand($faculty, 'lvl1');
-            &:hover {
+            .card__banner--sub-title  {
               color:gesso-brand($faculty, 'lvl1');
             }
+
+            &:hover,
+            &:focus {
+              .card__banner--title  {
+                color:gesso-brand($faculty, 'lvl1');
+                text-decoration: underline;
+
+              }
+              .card__banner--sub-title  {
+                color:gesso-brand($faculty, 'lvl1');
+                text-decoration: underline;
+              }
+            }
           }
         }
-        .card__banner--sub-title  {
-          color:gesso-brand($faculty, 'lvl1');
-        }
-        .card__banner--title  {
-          color:gesso-brand($faculty, 'lvl1');
-
+        .card__banner--caption{
+            background:gesso-brand($faculty, 'primary');
         }
       }
     }
@@ -52,6 +68,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
   }
 }
 .card__banner--image {
+    background: $uw-black;
     margin-bottom: 0;
     padding: 0;
     position: relative;
@@ -63,22 +80,12 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
   opacity: 1;
   padding: 1rem 2rem;
   position:relative;
-  @include small{
-    bottom:0;
-    position:absolute;
-  }
   text-align: center;
   width: 100%;
-  z-index: gesso-z-index(overlay);
   strong{
     font-weight:400;
   }
-  a {
-    text-decoration: none;
-    &:hover {
-    text-decoration: underline;
-    }
-  }
+
 }
 .card__banner--title {
   display: block;
@@ -98,25 +105,39 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
   line-height: 1.25;
   width:auto;
 }
-.card__banner--media {
-  background:$uw-black;
-  margin-bottom: 0;
-  order: inherit;
+.card__banner {
   a {
-    background:$uw-black;
-    display: block;
-    opacity:1;
-    transition-delay: 0s;
-    transition-duration: .2s;
-    transition-property: color,background-color,border-color,opacity;
-    transition-timing-function: linear;
-    &:hover{
-      opacity:0.6;
+    background: $uw-black;
+    .card__banner--media {
+      margin-bottom: 0;
+      opacity:1;
+      order: inherit;
       transition-delay: 0s;
       transition-duration: .2s;
       transition-property: color,background-color,border-color,opacity;
       transition-timing-function: linear;
+
+    }
+    &:hover {
+      .card__banner--media {
+        opacity: 0.6;
+        transition-delay: 0s;
+        transition-duration: .2s;
+        transition-property: color, background-color, border-color, opacity;
+        transition-timing-function: linear;
+      }
     }
+  }
+  .card__body {
+    padding:inherit;
+  }
+  .uw-picture__fallback{
+    background: $uw-black;
+    display:block;
 
   }
 }
+// Fixes spacing below embeded images
+.uw-picture img{
+  display:block;
+}

source/_patterns/04-components/card/card-elements/_banner.twig

 <div class="card__banner--image {{ image.faculty }}">
   {% if image.link %}
-  <div class="card__banner--media">
-    <a href="{{ image.link }}">
+  <a href="{{ image.link }}">
     {% endif %}
-
+  <div class="card__banner--media">
       {% include "@components/responsive-image/responsive-image.twig" with {
         sources: image.sources,
         img_element: listing_image.img_element,
         alt: listing_image.alt
       }%}
-
-      {% if image.link %}
-    </a>
   </div>
-
-  {% endif %}
   {% if image.big_text or image.small_text %}
     <div class="card__banner--caption">
       {% if image.big_text %}
       <strong>
-      {% if image.link %}
-        <a href="{{ image.link }}">
-      {% endif %}
         <span class="card__banner--title">
           {{ image.big_text }}
         </span>
-        {% if image.link %}
-        </a>
-        {% endif %}
       {% endif %}
       </strong>
       {% if image.small_text %}
@@ -37,5 +25,7 @@
       {% endif %}
     </div>
   {% endif %}
-
+    {% if image.link %}
+  </a>
+  {% endif %}
 </div>