Tci 1129 Created new branch and updated code in card.css (#864)

* Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * Added media css for cta variant (#856) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color --------- Co-authored-by: Reshma Dhane <reshmaingavale@gmail.com> * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Adding images to card (#857) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left --------- Co-authored-by: Reshma Dhane <reshmaingavale@gmail.com> * TCI-1129 Changes into card.css for media left in card * Tci 1129 add images to card (#858) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Changes into card.css for media left in card --------- Co-authored-by: Reshma Dhane <reshmaingavale@gmail.com> * TCI-1185: Correct button styling on hero alt background (#859) * Image size is fixed for Image in card * Tci 1129 add images to card (#860) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Changes into card.css for media left in card * Image size is fixed for Image in card --------- Co-authored-by: Reshma Dhane <reshmaingavale@gmail.com> * TCI-1129 Heading height issue fixed. * Tci 1129 add images to card (#861) * Added media css for cta variant * TCI-1129 Changed css for media top * TCI-1129--Media top css fix * TCI-1129 change in media top title color * TCI-1129--Added css to media top card title * TCI-1129 Css added for media left * TCI-1129 Changes into card.css for media left in card * Image size is fixed for Image in card * TCI-1129 Heading height issue fixed. --------- Co-authored-by: Reshma Dhane <reshmaingavale@gmail.com> * TCI-1129 Courtyard Image in card css for media top changed * TCI-1129 revert code from card media left * TCI-1129 css change --------- Co-authored-by: Reshma Dhane <reshmaingavale@gmail.com> Co-authored-by: Mel Wong <46764557+melwong-jcc@users.noreply.github.com>
JudicialCouncilOfCalifornia · Dec 14, 2023 · 6a569f9 · 6a569f9
1 parent 5014611
commit 6a569f9
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 19 deletions.
diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss
@@ -498,32 +498,51 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
   }
 }
 
-.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--media-left, .usa-card--media-top {
+  .usa-card__container.type-image {
+    @include u-padding(0);
+    .usa-card__body {
+      @include u-padding-left(0);
+      @include u-padding-right(0);
     }
   }
+}
 
-  .usa-card__content {
-    @include u-padding(3);
-  }
+.usa-card--media-top {
+  .usa-card__container.type-image {
+    .usa-card__header {
+      height: unset;
+      margin-top: 21rem;
+      .usa-card__heading {
+        @include u-color(map-get($_config, title-color));
+        position: unset;
+        white-space: normal;
+      }
+    }
+    .usa-card__media{
+      line-height: 0;
+      @include u-margin-right(1);
+      img{
+        object-fit: cover;
+        height: 20rem;
+        display: flex;
+        }
+      }
+    }
+    .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;
+  .usa-card--media-left{
+    .usa-card__container.type-image {
+      .jcc-card--overlay-color-none {
+        aspect-ratio: var(--frame-h,16)/var(--frame-v,9);
+        overflow: hidden;
+        border-radius: initial;
       }
     }
   }
 }
+
diff --git a/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml b/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml
@@ -0,0 +1,25 @@
+cards:
+  heading:
+    title: "Cards"
+    lead: "<p>Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis.</p>"
+  num_cols: "2-60-40"
+  items:
+    - style: "media-top"
+      title: "Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare "
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media:
+        src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+        alt: "green"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+    - style: "media-top"
+      title: "Posuere et ornare"
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media:
+        src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+        alt: "green"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+