Update styles on Shade Icon card variation. (#186)

hlxsites · Dec 19, 2023 · fd9a8ba · fd9a8ba
1 parent b67ab37
commit fd9a8ba
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 13 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -6,10 +6,6 @@
   width: 100%;
 }
 
-.cards.block.shade-icon {
-  margin-bottom: 40px;
-}
-
 .cards.block .title {
   padding: 2em 0;
 }
@@ -144,29 +140,39 @@
   background-color: var(--light-grey);
 }
 
-.cards.block.shade-icon .cards-list {
-  gap: 70px;
-  max-width: 83.333%;
-}
-
 .cards.block.shade-icon .cards-list .cards-item {
   background-color: var(--light-grey);
+  padding: 0;
   border-top: 1px solid #000;
   min-height: 274px;
   align-items: center;
   justify-content: center;
 }
 
 .cards.block.shade-icon .cards-list .cards-item .card-body h4 {
+  padding: 8px 30px;
   text-align: center;
-  padding: 8px 0 20px;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-l);
+  letter-spacing: var(--letter-spacing-m);
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
+  margin-bottom: 20px;
+  padding: 0 31px 34px;
+  font-size: var(--body-font-size-s);
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body .icon {
+  display: block;
+  margin-top: 61px;
 }
 
 .cards.block.shade-icon .cards-list .cards-item .card-body .icon img {
   margin: 0 auto;
   display: block;
-  height: 35px;
-  width: 35px;
+  height: 45px;
+  width: 62px;
 }
 
 @media screen and (min-width: 600px) {
@@ -175,9 +181,21 @@
     max-width: 83.333%;
   }
 
+  .cards.block.shade-icon .cards-list {
+    flex-direction: row;
+    column-gap: 20px;
+    align-items: stretch;
+    margin-bottom: 50px;
+  }
+
   .cards.block .cards-list .cards-item .card-body h3 {
     font-size: var(--heading-font-size-m);
   }
+
+  .cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
+    padding: 0 20px;
+  }
+
 }
 
 @media (min-width: 900px) {
@@ -217,4 +235,20 @@
     align-items: stretch;
     column-gap: 20px;
   }
+
+  .cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
+    padding: 0 25px 54px;
+  }
+
+}
+
+@media (min-width: 1200px) {
+  .cards.block.shade-icon .cards-list {
+    justify-content: space-around;
+    column-gap: unset;
+  }
+
+  .cards.block.shade-icon .cards-list .cards-item {
+    flex: 0 1 28%;
+  }
 }
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -2,7 +2,7 @@ export default function decorate(block) {
   const cards = [...block.children];
 
   // Check for a title row
-  if (block.children[0].children.length === 1) {
+  if (!block.classList.contains('shade-icon') && block.children[0].children.length === 1) {
     const wrapper = cards.shift();
     const title = wrapper.children[0];
     title.classList.add('title');