SWED-2503 add utility d-grid + default align in cards wide no img no …

…txt-content
SwedbankPay · Jun 20, 2024 · 8e407ba · 8e407ba
1 parent 280c4d2
commit 8e407ba
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -7,6 +7,11 @@
 - Cards
 
   - add support for div.illustration & picture elements in lieu of the img element as illustrations of used in the cards component (changes in documentation will come in a future release)
+  - default cards wide with no img and no text content -> align-items: center (better default when title wraps)
+
+- Utility classes
+
+  - Add utility classes for display grid and inline grid
 
 ## Technical changes
 

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -226,6 +226,7 @@
 			grid-template-columns: auto 1fr min-content;
 			grid-template-rows: auto;
 			padding: var(--padding-outer);
+			align-items: center;
 
 			& :is(.cards-icon, .h4, .cards-cta) {
 				padding: 0;

diff --git a/src/less/utilities/display.less b/src/less/utilities/display.less
@@ -14,6 +14,8 @@ each(@grid-breakpoints, .(@size, @abbr) {
         .d@{infix}-table-cell     { display: table-cell !important; }
         .d@{infix}-flex           { display: flex !important; }
         .d@{infix}-inline-flex    { display: inline-flex !important; }
+        .d@{infix}-grid           { display: grid !important; }
+        .d@{infix}-inline-grid    { display: inline-grid !important; }
     }
 
     .media-breakpoint-up(@size, @abbr, @ruleset);