Add variable for heading size.

web-illinois · Sep 3, 2024 · 857f56b · 857f56b
1 parent 8264575
commit 857f56b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/builder/versions/ilw-card.1.0.0-alpha1.json b/builder/versions/ilw-card.1.0.0-alpha1.json
@@ -120,7 +120,12 @@
         {
             "name": "--ilw-card--font-size",
             "depreciated": false,
-            "description": "Card text font size [default: 1.2em]"
+            "description": "Card text font size [default: 1.2rem]"
+        },
+        {
+            "name": "--ilw-card--heading--font-size",
+            "depreciated": false,
+            "description": "Font size for a card's heading [default: 1.45em]"
         },
         {
             "name": "--ilw-card--icon-width",

diff --git a/src/ilw-card.css b/src/ilw-card.css
@@ -7,7 +7,8 @@
         --ilw-card--content-padding-right: 2rem; /*var: Right padding around main content in the card*/
         --ilw-card--content-padding-bottom: 2rem; /*var: Bottom padding around main content in the card*/
         --ilw-card--content-padding-left: 2rem; /*var: Left padding around main content in the card*/
-        --ilw-card--font-size: 1.2em; /*var: Card text font size*/
+        --ilw-card--font-size: 1.2rem; /*var: Card text font size*/
+        --ilw-card--heading--font-size: 1.45em; /*var: Font size for a card's heading*/
         --ilw-card--icon-width: 120px; /*var: Limit for an icon's width*/
         --ilw-card--icon-height: 80px; /*var: Limit for an icon's height*/
         --ilw-card--orange-1: #fd890e;
@@ -257,6 +258,7 @@ ilw-card {
     & > h5,
     & > h6 {
         color: var(--ilw-card--heading-color);
+        font-size: var(--ilw-card--heading--font-size);
 
         &:first-of-type {
             margin-top: 0;
@@ -325,6 +327,12 @@ ilw-card {
             }
         }
     }
+
+    > [slot=image] {
+        img {
+            display: block;
+        }
+    }
 }
 
 ilw-card[clickable] {
@@ -342,6 +350,10 @@ ilw-card[clickable] {
     }
 }
 
+ilw-card[aspect-ratio] > [slot=image] {
+
+}
+
 /* Make il icons color currentColor in cards */
 ilw-card path.cls-1 {
     fill: currentColor;