change(card): added image card section, tweaked mobile heading size

eea · Jan 23, 2023 · 0f879e1 · 0f879e1
1 parent b83d982
commit 0f879e1
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/src/ui/Card/Card.stories.jsx b/src/ui/Card/Card.stories.jsx
@@ -216,6 +216,39 @@ CardGrid.args = {
   ],
 };
 
+export const ImageGrid = GridTemplate.bind({});
+ImageGrid.args = {
+  titleOnImage: true,
+  variant: 'default',
+  inverted: false,
+  cards: [
+    {
+      title: 'Nature',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      hasImage: true,
+      href: '/#',
+      fluid: true,
+    },
+    {
+      title: 'Economy and resources',
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
+      hasImage: true,
+      href: '/#',
+      fluid: true,
+    },
+    {
+      title: "State of Europe's environment",
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
+      hasImage: true,
+      href: '/#',
+      fluid: true,
+    },
+  ],
+};
+
 const FluidGridTemplate = (args) => (
   <Container>
     <div className="fluid-card-row">

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -276,19 +276,18 @@
 }
 
 .gradient .header {
-  font-size: var(--image-header-font-size, @imageTitleFontSize);
+  font-size: var(--image-header-font-size, @imageTitleMobileFontSize);
   color: @imageTitleColor;
   font-weight: @imageTitleFontWeight;
   line-height: @imageTitleLineHeight;
-  text-transform: @imageTitleTextTransform;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
   .card .gradient {
     padding-block: @imageTitlePaddingBlock;
   }
   .gradient .header {
-    --image-header-font-size: @font-size-7;
+    --image-header-font-size: @imageTitleFontSize;
   }
 }
 

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -267,12 +267,12 @@
         Image with title
 *******************************/
 @imageTitleColor: @white;
-@imageTitleFontSize: @font-size-4;
+@imageTitleFontSize: @h2;
+@imageTitleMobileFontSize: @mobileH1;
 @imageTitleFontWeight: @font-weight-7;
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;
 @imageTitlePaddingBlock: @rem-space-2;
-@imageTitleTextTransform: none;
 
 /*******************************
           Rounded Card