TCI-1129: extend card image use (#863)

JudicialCouncilOfCalifornia · Dec 13, 2023 · 5014611 · 5014611
1 parent beb3045
commit 5014611
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss
@@ -222,7 +222,8 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
   }
 
   .usa-card--media-full-overlay &,
-  .usa-card--media-top-overlay & {
+  .usa-card--media-top-overlay &,
+  .usa-card--media-top & {
     .usa-card__media {
       @each $overlay-bgcolor, $color-value in map-get($_config, overlay-bgcolors) {
         @if $overlay-bgcolor {
@@ -342,6 +343,14 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       }
     }
   }
+  .usa-card--media-top & {
+    .usa-card__header {
+      height: calc(18rem - 15px);
+      .usa-card__heading {
+        @include u-color(map-get($_config, title-color));
+      }
+    }
+  }
 }
 
 .usa-card:not(.usa-card--flag) .usa-card__container > :only-child {
@@ -488,3 +497,33 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     @include u-color(ink);
   }
 }
+
+.usa-card__container.type-image {
+  @include u-padding(0);
+
+  .usa-card__media {
+    line-height: 0;
+    @include u-margin-right(2);
+
+    img {
+      object-fit: fill;
+    }
+  }
+
+  .usa-card__content {
+    @include u-padding(3);
+  }
+}
+
+.jcc-cards--1-cols {
+  .usa-card__container.type-image {
+    .jcc-card--overlay-color-none {
+      aspect-ratio: 16/9;
+      overflow: hidden;
+      border-radius: initial;
+      img {
+        object-fit: fill;
+      }
+    }
+  }
+}
diff --git a/source/_patterns/02-molecules/card/card.twig b/source/_patterns/02-molecules/card/card.twig
@@ -27,6 +27,7 @@
 {% set heading_tag = card.card_title_tag|default('h3') %}
 {% set unique_id = 'card-' ~ random() %}
 {% set style = card.style|default('cta') %}
+{% set type = card.type|default('icon') %}
 {% set icon_set = card.icon.set|default('fa') %}
 
 {% if (style == 'hover') or (card.is_clickable == TRUE) %}
@@ -45,7 +46,7 @@
 ]|merge(card.classes|default([''])) %}
 
 <{{ tag }} {{ attributes.addClass(classes) }}>
-  <div class="usa-card__container">
+  <div class="usa-card__container{% if card.media.src is not null and card.media.src is not empty %} type-image{% endif %}">
     <div class="usa-card__content">
       <header class="usa-card__header">
         {% if card.brow %}