- Adjusted the cards so they are all the same

min-height and the link sticks to the bottom
18F · Apr 4, 2024 · 1326b7e · 1326b7e
1 parent f4bba8a
commit 1326b7e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/_includes/card-with-image-guides.html b/_includes/card-with-image-guides.html
@@ -19,7 +19,7 @@
 hero.url - for guides where "promoted" = true, this will be the hero image for the card.
 {% endcomment %}
 
-<div class="card-with-image-guides display-flex flex-column radius-lg minh-card-lg">
+<div class="card-with-image-guides display-flex flex-column radius-lg">
 
   <!--The card only attempts to render a hero image (and the background color) if it has one assigned, which right now is only reserved for guides labeled "important"-->
   <!--Using a few inline styles here to force the hero div to respect the border radii of the card, but there might be a more elegant way of doing that-->
@@ -29,7 +29,7 @@
   </div>
   {% endif %}
 
-  <div class="padding-4 display-flex flex-column">
+  <div class="padding-4 display-flex flex-column flex-align-stretch card-content">
     <div class="margin-bottom-2 display-flex flex-align-center {%- if include.image_side == "right" %} flex-justify {% endif %} height-full">
 
       {% capture card_image %}
@@ -54,5 +54,6 @@
     </div>
 
     <p class="font-sans-md margin-y-0 text-no-underline">{{ include.text_descrip }}</p>
-    <a href="{{include.link_url}}" class="text-bold flex-align-end">Read <span class="text-lowercase">{{ include.text_content }}</span> guide</a>  </div>
+    <a href="{{include.link_url}}" class="text-bold flex-align-end">Read <span class="text-lowercase">{{ include.text_content }}</span> guide</a>  
+  </div>
 </div>
diff --git a/_sass/_components/card-with-image-guides.scss b/_sass/_components/card-with-image-guides.scss
@@ -8,6 +8,11 @@
   background-color: white;
   border-radius: radius-lg;
   flex-grow: 0;
+  min-height: 260px;
+}
+
+.card-content{
+  flex-grow: 1;
 }
 
 .card-with-image-guides p{