From 2fa77f3f93935dd01cd5e3d77437fe8dc03721da Mon Sep 17 00:00:00 2001
From: Antonis Tarantilis <antonis@itml.gr>
Date: Wed, 23 Nov 2022 15:52:01 +0000
Subject: [PATCH 1/8] refactor(Card): create card template for stories

---
 src/ui/Card/Card.stories.jsx | 364 +++++++++++++----------------------
 1 file changed, 139 insertions(+), 225 deletions(-)

diff --git a/src/ui/Card/Card.stories.jsx b/src/ui/Card/Card.stories.jsx
index 4fe88de63a..7d0b0971d5 100644
--- a/src/ui/Card/Card.stories.jsx
+++ b/src/ui/Card/Card.stories.jsx
@@ -17,6 +17,15 @@ export default {
     },
   },
   argTypes: {
+    titleOnImage: {
+      name: 'Display title on image',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+      },
+    },
     variant: {
       options: ['default', 'primary', 'secondary', 'tertiary'],
       control: { type: 'select' },
@@ -28,140 +37,131 @@ export default {
         defaultValue: { summary: 'default' },
       },
     },
-    cards: {
-      description: 'cards data',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: '' },
-      },
-    },
     inverted: {
-      description: 'Inverted card',
       table: {
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' },
       },
     },
+    cards: {
+      table: {
+        type: {
+          summary: 'Object',
+        },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
   },
 };
 
-const MetaRight = (args) => (
-  <span className="bold text-right">{args.metaRight}</span>
-);
-
-const Template = (args) => (
-  <Container>
-    <Card
-      fluid={args.fluid}
-      className={`${args.variant === 'default' ? '' : args.variant} ${
-        args.inverted ? 'inverted' : ''
-      }`}
-    >
-      {args.hasImage && (
+const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
+  <Card
+    fluid={card.fluid}
+    className={`${variant === 'default' ? '' : variant} ${
+      inverted ? 'inverted' : ''
+    }`}
+  >
+    {/* Card Image */}
+    {card.hasImage ? (
+      titleOnImage ? (
+        <CardImage {...card} />
+      ) : (
         <Image
           as="a"
-          href={args.href}
-          src={args.imgUrl}
+          href={card.href}
+          src={card.imgUrl}
           wrapped
           ui={false}
           alt="card image"
         />
-      )}
-      <Card.Content>
-        <Card.Meta>
-          {args.meta} <MetaRight {...args} />
-        </Card.Meta>
+      )
+    ) : (
+      ''
+    )}
+    <Card.Content>
+      {/* Type & Date */}
+      <Card.Meta>
+        {card.meta} <MetaRight {...card} />
+      </Card.Meta>
+
+      {/* Title */}
+      {!titleOnImage || !card.hasImage ? (
         <Card.Header>
-          <a href={args.href}>{args.title}</a>
+          <a href={card.href}>{card.title}</a>
         </Card.Header>
-        <Card.Description>{args.description}</Card.Description>
-      </Card.Content>
-      {args.links !== null &&
-        args.links.map((item, index) => (
-          <Card.Content extra key={index}>
-            <a href={args.href}>{item.linkName}</a>
-          </Card.Content>
-        ))}
-    </Card>
+      ) : (
+        ''
+      )}
+
+      {/* Decription */}
+      <Card.Description>{card.description}</Card.Description>
+    </Card.Content>
+
+    {/* Additional links */}
+    {card.links &&
+      card.links.map((item, index) => (
+        <Card.Content extra key={index}>
+          <a href={card.href}>{item.linkName}</a>
+        </Card.Content>
+      ))}
+  </Card>
+);
+
+const CardImage = (card) => (
+  <div className="image-with-title">
+    <Image
+      as="a"
+      href={card.href}
+      src={card.imgUrl}
+      wrapped
+      ui={false}
+      alt="card image"
+    />
+    <div className="gradient">
+      <Card.Header>
+        <a href={card.href}>{card.title}</a>
+      </Card.Header>
+    </div>
+  </div>
+);
+
+const MetaRight = (args) => (
+  <span className="bold text-right">{args.metaRight}</span>
+);
+
+const Template = (args) => (
+  <Container>
+    {args.cards.map((card, index) => (
+      <CardTemplate
+        variant={args.variant}
+        titleOnImage={args.titleOnImage}
+        inverted={args.inverted}
+        card={card}
+        key={index}
+      />
+    ))}
   </Container>
 );
 
 export const Default = Template.bind({});
 Default.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
-  imgUrl:
-    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
-
-  meta: 'Article',
-  metaRight: '30/07/2022',
-  title: 'Lorem Ipsum',
-  description:
-    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
-  hasImage: true,
-  href: '/#',
-  links: null,
-  fluid: false,
-};
-Default.argTypes = {
-  imgUrl:
-    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
-  hasImage: {
-    description: 'true if card contains image',
-    table: {
-      type: {
-        summary: 'boolean',
-      },
-      defaultValue: { summary: true },
-    },
-  },
-  fluid: {
-    description: 'take up the width of its container',
-    table: {
-      type: {
-        summary: 'boolean',
-      },
-      defaultValue: { summary: false },
-    },
-  },
-  meta: {
-    description: 'Card metadata',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  metaRight: {
-    description: 'Card right metadata',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  title: {
-    description: 'card header',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  description: {
-    description: 'card main content',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
+  cards: [
+    {
+      title: 'Lorem Ipsum',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: true,
+      meta: 'Article',
+      metaRight: '30/07/2022',
+      href: '/#',
+      fluid: false,
     },
-  },
-};
-Default.parameters = {
-  controls: { exclude: ['cards', 'href', 'links'] },
-  hideNoControlsWarning: true,
+  ],
 };
 
 const GridTemplate = (args) => (
@@ -169,38 +169,13 @@ const GridTemplate = (args) => (
     <Grid>
       {args.cards.map((card, index) => (
         <Grid.Column mobile={12} tablet={6} computer={4} key={index}>
-          <Card
-            fluid={card.fluid}
-            className={`${args.variant === 'default' ? '' : args.variant} ${
-              args.inverted ? 'inverted' : ''
-            }`}
-          >
-            {card.hasImage && (
-              <Image
-                as="a"
-                href={card.href}
-                src={card.imgUrl}
-                wrapped
-                ui={false}
-                alt="card image"
-              />
-            )}
-            <Card.Content>
-              <Card.Meta>
-                {card.meta} <MetaRight {...card} />
-              </Card.Meta>
-              <Card.Header>
-                <a href={args.href}>{card.title}</a>
-              </Card.Header>
-              <Card.Description>{card.description}</Card.Description>
-            </Card.Content>
-            {card.links !== null &&
-              card.links.map((item, index) => (
-                <Card.Content extra key={index}>
-                  <a href="/#">{item.linkName}</a>
-                </Card.Content>
-              ))}
-          </Card>
+          <CardTemplate
+            variant={args.variant}
+            titleOnImage={args.titleOnImage}
+            inverted={args.inverted}
+            card={card}
+            key={index}
+          />
         </Grid.Column>
       ))}
     </Grid>
@@ -209,6 +184,7 @@ const GridTemplate = (args) => (
 
 export const CardGrid = GridTemplate.bind({});
 CardGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
@@ -222,7 +198,6 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
     {
@@ -235,7 +210,6 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
     {
@@ -246,60 +220,22 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
   ],
 };
-CardGrid.argTypes = {
-  cards: {
-    description: 'array with cards data',
-    table: {
-      type: {
-        summary: 'Object',
-      },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-};
 
 const FluidGridTemplate = (args) => (
   <Container>
     <div className="fluid-card-row">
       {args.cards.map((card, index) => (
-        <Card
-          fluid={card.fluid}
-          className={`${args.variant === 'default' ? '' : args.variant} ${
-            args.inverted ? 'inverted' : ''
-          }`}
+        <CardTemplate
+          variant={args.variant}
+          titleOnImage={args.titleOnImage}
+          inverted={args.inverted}
+          card={card}
           key={index}
-        >
-          {card.hasImage && (
-            <Image
-              as="a"
-              href={card.href}
-              src={card.imgUrl}
-              wrapped
-              ui={false}
-              alt="card image"
-            />
-          )}
-          <Card.Content>
-            <Card.Meta>
-              {card.meta} <MetaRight {...card} />
-            </Card.Meta>
-            <Card.Header>
-              <a href={args.href}>{card.title}</a>
-            </Card.Header>
-            <Card.Description>{card.description}</Card.Description>
-          </Card.Content>
-          {card.links !== null &&
-            card.links.map((item, index) => (
-              <Card.Content extra key={index}>
-                <a href="/#">{item.linkName}</a>
-              </Card.Content>
-            ))}
-        </Card>
+        />
       ))}
     </div>
   </Container>
@@ -307,6 +243,7 @@ const FluidGridTemplate = (args) => (
 
 export const FluidGrid = FluidGridTemplate.bind({});
 FluidGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
@@ -321,7 +258,6 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
     {
       title: 'Suspendisse iaculis feugiat',
@@ -334,7 +270,6 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
     {
       title: 'Eget tellus blandit aenean mattis.',
@@ -345,21 +280,9 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
   ],
 };
-CardGrid.argTypes = {
-  cards: {
-    description: 'array with cards data',
-    table: {
-      type: {
-        summary: 'Object',
-      },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-};
 
 const Arrows = (props) => {
   const { slider = {} } = props;
@@ -394,36 +317,26 @@ const Arrows = (props) => {
   );
 };
 
-function CarouselCardsContent({ variant, inverted, settings, cards, ...rest }) {
+function CarouselCardsContent({
+  titleOnImage,
+  variant,
+  inverted,
+  settings,
+  cards,
+  ...rest
+}) {
   const slider = React.useRef(null);
   return (
     <div className="cards-carousel">
       <Slider {...settings} ref={slider}>
         {cards.map((card, index) => (
-          <Card
-            fluid={card.fluid}
+          <CardTemplate
+            variant={variant}
+            titleOnImage={titleOnImage}
+            inverted={inverted}
+            card={card}
             key={index}
-            className={`${variant === 'default' ? '' : variant} ${
-              inverted ? 'inverted' : ''
-            }`}
-          >
-            {card.hasImage && (
-              <Image
-                as="a"
-                href={card.href}
-                src={card.imgUrl}
-                wrapped
-                ui={false}
-                alt="card image"
-              />
-            )}
-            <Card.Content>
-              <Card.Meta>{card.meta}</Card.Meta>
-              <Card.Header>
-                <a href={card.href}>{card.title}</a>
-              </Card.Header>
-            </Card.Content>
-          </Card>
+          />
         ))}
       </Slider>
       <Arrows slider={slider} />
@@ -439,6 +352,7 @@ const CarouselCardsTemplate = (args) => (
 
 export const CarouselCards = CarouselCardsTemplate.bind({});
 CarouselCards.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   settings: {

From 6e6e63e2362a27b0bbf4b8dd968f11a0dc87da2a Mon Sep 17 00:00:00 2001
From: Antonis Tarantilis <antonis@itml.gr>
Date: Wed, 23 Nov 2022 15:54:04 +0000
Subject: [PATCH 2/8] refactor(Card): add image with title css

---
 theme/themes/eea/views/card.overrides | 60 ++++++++++++++++++++++++++-
 theme/themes/eea/views/card.variables | 11 +++++
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
index 1a87913fe4..0e24b91302 100644
--- a/theme/themes/eea/views/card.overrides
+++ b/theme/themes/eea/views/card.overrides
@@ -14,6 +14,7 @@
 
 /* Cards must have same height */
 .ui.card {
+  min-width: @minWidth;
   height: 100%;
   text-align: var(--text-align, @cardTextAlign);
   background-color: var(--card-background-color, @background);
@@ -25,7 +26,8 @@
 }
 
 .ui.cards > .card:not(.rounded) > .image,
-.ui.card:not(.rounded) > .image {
+.ui.card:not(.rounded) > .image,
+.ui.card .image-with-title .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
 
@@ -255,6 +257,62 @@
   }
 }
 
+/*******************************
+      Image with title
+*******************************/
+// Adding the default image css for image inside image-with-title
+.ui.cards > .card > .image, .ui.card .image-with-title > .image {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  padding: 0em;
+  background: transparent;
+}
+
+.image-with-title {
+  position: relative;
+}
+
+// Gradient Mixin
+.gradientMix(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
+  .gradientMix(@type; @colors; @dir; @prefixes; (@index - 1));
+
+  @prefix  : extract(@prefixes, @index);
+  @dir-old : 90 - (@dir);
+
+  background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
+& when ( @index = length(@prefixes) ) {
+      background-image: ~"@{type}-gradient(@{dir}, @{colors})";
+  }
+}
+
+.image-with-title .gradient {
+  display: flex;
+  align-items: end;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  padding: @imageTitlePadding;
+  .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg);
+}
+
+.image-with-title .header a {
+  font-size: var(--image-header-font-size, @imageTitleFontSize);
+  color: @imageTitleColor;
+  font-weight: @imageTitleFontWeight;
+  line-height: @imageTitleLineHeight;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .image-with-title .gradient {
+    padding-block: @imageTitlePaddingBlock;
+  }
+  .image-with-title .header a {
+    --image-header-font-size: @font-size-10;
+  }
+}
+
 /*******************************
         Carousel
 *******************************/
diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
index 8aed9c2bc5..4db78b57f1 100644
--- a/theme/themes/eea/views/card.variables
+++ b/theme/themes/eea/views/card.variables
@@ -22,6 +22,7 @@
 @minHeight: 0px;
 @padding: 0em;
 @width: 290px;
+@minWidth: 250px;
 @borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor;
 @boxShadow: @eeaGlobalShadow;
@@ -262,6 +263,16 @@
 @invertedTertiaryCardColor: @tertiaryColor;
 @invertedTertiaryCardBackgroundColor: @white;
 
+/*******************************
+        Image with title
+*******************************/
+@imageTitleColor: @white;
+@imageTitleFontSize: @font-size-7;
+@imageTitleFontWeight: @font-weight-7;
+@imageTitleLineHeight: @font-lineheight-0;
+@imageTitlePadding: @rem-space-6;
+@imageTitlePaddingBlock: @rem-space-2;
+
 /*******************************
           Rounded Card
 *******************************/

From c35ad5c76caa00556f8a501d2e7d516464790dc4 Mon Sep 17 00:00:00 2001
From: Antonis Tarantilis <antonis@itml.gr>
Date: Thu, 12 Jan 2023 16:09:33 +0000
Subject: [PATCH 3/8] refactor(card): Update titles value and size

---
 src/ui/Card/Card.stories.jsx          | 25 ++++++++++++-------------
 theme/themes/eea/views/card.overrides |  2 +-
 theme/themes/eea/views/card.variables |  2 +-
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/ui/Card/Card.stories.jsx b/src/ui/Card/Card.stories.jsx
index 7d0b0971d5..0870409423 100644
--- a/src/ui/Card/Card.stories.jsx
+++ b/src/ui/Card/Card.stories.jsx
@@ -150,7 +150,7 @@ Default.args = {
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Economy and resources',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -189,7 +189,7 @@ CardGrid.args = {
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Nature',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -201,7 +201,7 @@ CardGrid.args = {
       fluid: true,
     },
     {
-      title: 'Suspendisse iaculis feugiat',
+      title: 'Economy and resources',
       imgUrl:
         'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
@@ -213,7 +213,7 @@ CardGrid.args = {
       fluid: true,
     },
     {
-      title: 'Eget tellus blandit aenean mattis.',
+      title: 'State of Europe\'s environment',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: false,
@@ -248,7 +248,7 @@ FluidGrid.args = {
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Nature',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -260,7 +260,7 @@ FluidGrid.args = {
       fluid: true,
     },
     {
-      title: 'Suspendisse iaculis feugiat',
+      title: 'Health',
       imgUrl:
         'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
@@ -272,7 +272,7 @@ FluidGrid.args = {
       fluid: true,
     },
     {
-      title: 'Eget tellus blandit aenean mattis.',
+      title: 'State of Europe\'s environment',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: false,
@@ -382,7 +382,7 @@ CarouselCards.args = {
   },
   cards: [
     {
-      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      title: 'State of Europe\'s environment',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -391,7 +391,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title: 'Lorem ipsum.',
+      title: 'Nature',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -400,7 +400,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      title: 'Health',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -409,8 +409,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa strong.',
+      title: 'Climate',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -419,7 +418,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      title: 'Economy and resources',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
index 7f0e902b44..a5546c1760 100644
--- a/theme/themes/eea/views/card.overrides
+++ b/theme/themes/eea/views/card.overrides
@@ -304,7 +304,7 @@
     padding-block: @imageTitlePaddingBlock;
   }
   .image-with-title .header a {
-    --image-header-font-size: @font-size-10;
+    --image-header-font-size: @font-size-7;
   }
 }
 
diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
index 4db78b57f1..dfca6c9a11 100644
--- a/theme/themes/eea/views/card.variables
+++ b/theme/themes/eea/views/card.variables
@@ -267,7 +267,7 @@
         Image with title
 *******************************/
 @imageTitleColor: @white;
-@imageTitleFontSize: @font-size-7;
+@imageTitleFontSize: @font-size-4;
 @imageTitleFontWeight: @font-weight-7;
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;

From ff6cc600978355e04dde704d014d2cbe27df1298 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Thu, 19 Jan 2023 22:09:04 +0200
Subject: [PATCH 4/8] change(card): implement title on image within image
 section

- this way we simplify the transformation from normal
  card to card with header on the image section
- heading on image is capitalized
---
 src/ui/Card/Card.stories.jsx          | 30 ++++++++-------------------
 theme/themes/eea/views/card.overrides | 20 +++++++-----------
 theme/themes/eea/views/card.variables |  1 +
 3 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/src/ui/Card/Card.stories.jsx b/src/ui/Card/Card.stories.jsx
index 0870409423..90fdece3ce 100644
--- a/src/ui/Card/Card.stories.jsx
+++ b/src/ui/Card/Card.stories.jsx
@@ -86,14 +86,12 @@ const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
 
       {/* Title */}
       {!titleOnImage || !card.hasImage ? (
-        <Card.Header>
-          <a href={card.href}>{card.title}</a>
-        </Card.Header>
+        <Card.Header>{card.title}</Card.Header>
       ) : (
         ''
       )}
 
-      {/* Decription */}
+      {/* Description */}
       <Card.Description>{card.description}</Card.Description>
     </Card.Content>
 
@@ -108,21 +106,12 @@ const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
 );
 
 const CardImage = (card) => (
-  <div className="image-with-title">
-    <Image
-      as="a"
-      href={card.href}
-      src={card.imgUrl}
-      wrapped
-      ui={false}
-      alt="card image"
-    />
+  <a href={card.href} className={'image'}>
+    <Image src={card.imgUrl} ui={false} alt="card image" />
     <div className="gradient">
-      <Card.Header>
-        <a href={card.href}>{card.title}</a>
-      </Card.Header>
+      <Card.Header>{card.title}</Card.Header>
     </div>
-  </div>
+  </a>
 );
 
 const MetaRight = (args) => (
@@ -213,7 +202,7 @@ CardGrid.args = {
       fluid: true,
     },
     {
-      title: 'State of Europe\'s environment',
+      title: "State of Europe's environment",
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: false,
@@ -272,7 +261,7 @@ FluidGrid.args = {
       fluid: true,
     },
     {
-      title: 'State of Europe\'s environment',
+      title: "State of Europe's environment",
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: false,
@@ -323,7 +312,6 @@ function CarouselCardsContent({
   inverted,
   settings,
   cards,
-  ...rest
 }) {
   const slider = React.useRef(null);
   return (
@@ -382,7 +370,7 @@ CarouselCards.args = {
   },
   cards: [
     {
-      title: 'State of Europe\'s environment',
+      title: "State of Europe's environment",
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
index a5546c1760..f7fffedd30 100644
--- a/theme/themes/eea/views/card.overrides
+++ b/theme/themes/eea/views/card.overrides
@@ -26,8 +26,7 @@
 }
 
 .ui.cards > .card:not(.rounded) > .image,
-.ui.card:not(.rounded) > .image,
-.ui.card .image-with-title .image {
+.ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
 
@@ -256,18 +255,14 @@
       Image with title
 *******************************/
 // Adding the default image css for image inside image-with-title
-.ui.cards > .card > .image, .ui.card .image-with-title > .image {
+.ui.cards > .card > .image {
   position: relative;
   display: block;
   flex: 0 0 auto;
-  padding: 0em;
+  padding: 0;
   background: transparent;
 }
 
-.image-with-title {
-  position: relative;
-}
-
 // Gradient Mixin
 .gradientMix(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
   .gradientMix(@type; @colors; @dir; @prefixes; (@index - 1));
@@ -281,7 +276,7 @@
   }
 }
 
-.image-with-title .gradient {
+.card .gradient {
   display: flex;
   align-items: end;
   position: absolute;
@@ -292,18 +287,19 @@
   .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg);
 }
 
-.image-with-title .header a {
+.gradient .header {
   font-size: var(--image-header-font-size, @imageTitleFontSize);
   color: @imageTitleColor;
   font-weight: @imageTitleFontWeight;
   line-height: @imageTitleLineHeight;
+  text-transform: @imageTitleTextTransform;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .image-with-title .gradient {
+  .card .gradient {
     padding-block: @imageTitlePaddingBlock;
   }
-  .image-with-title .header a {
+  .gradient .header {
     --image-header-font-size: @font-size-7;
   }
 }
diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
index dfca6c9a11..4d74c7ee3a 100644
--- a/theme/themes/eea/views/card.variables
+++ b/theme/themes/eea/views/card.variables
@@ -272,6 +272,7 @@
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;
 @imageTitlePaddingBlock: @rem-space-2;
+@imageTitleTextTransform: uppercase;
 
 /*******************************
           Rounded Card

From 3f194130bb6fb7b9ab04a7e1305f26fa135c23d2 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Fri, 20 Jan 2023 12:08:03 +0200
Subject: [PATCH 5/8] change(cards): added image for all storybook card
 examples

- There will never be a listing where one card doesn't use
  an image, and we should try to expose examples that would
  mimic what is used in the real world
---
 src/ui/Card/Card.stories.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui/Card/Card.stories.jsx b/src/ui/Card/Card.stories.jsx
index 90fdece3ce..c093ac64ec 100644
--- a/src/ui/Card/Card.stories.jsx
+++ b/src/ui/Card/Card.stories.jsx
@@ -203,9 +203,11 @@ CardGrid.args = {
     },
     {
       title: "State of Europe's environment",
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
-      hasImage: false,
+      hasImage: true,
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
@@ -262,9 +264,11 @@ FluidGrid.args = {
     },
     {
       title: "State of Europe's environment",
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
-      hasImage: false,
+      hasImage: true,
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',

From 2948ae16f748911929910ac53d1e0acf96952317 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Fri, 20 Jan 2023 15:26:23 +0200
Subject: [PATCH 6/8] change(card): removed uppercase transform from title on
 image

- in the ticket there was a mention that uppercase is not needed however the variable is still there set to none, if needed
  you can override the variable to set it back to uppercase
---
 theme/themes/eea/views/card.variables | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
index 4d74c7ee3a..b07091793e 100644
--- a/theme/themes/eea/views/card.variables
+++ b/theme/themes/eea/views/card.variables
@@ -272,7 +272,7 @@
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;
 @imageTitlePaddingBlock: @rem-space-2;
-@imageTitleTextTransform: uppercase;
+@imageTitleTextTransform: none;
 
 /*******************************
           Rounded Card

From 40066405d97af838e986370101371a8162029e02 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Fri, 20 Jan 2023 19:08:21 +0200
Subject: [PATCH 7/8] fix typos in footer gradient variables

---
 theme/themes/eea/extras/footer.less      | 12 ++++++------
 theme/themes/eea/extras/footer.variables |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/theme/themes/eea/extras/footer.less b/theme/themes/eea/extras/footer.less
index a2c7e6b248..5db4d366f2 100644
--- a/theme/themes/eea/extras/footer.less
+++ b/theme/themes/eea/extras/footer.less
@@ -11,7 +11,7 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: @mobileFooterBackgroundGrandient;
+  background: @mobileFooterBackgroundGradient;
   color: @white;
 
   .footer-wrapper {
@@ -78,7 +78,7 @@ footer .theme-sites {
   display: flex;
   justify-content: @mobileSocialJustifyContent;
   margin: @mobileSocialIconsMargin;
-  
+
   a {
     color: @socialIconColor;
 
@@ -132,7 +132,7 @@ footer .footer-wrapper .menu {
 
 @media only screen and (min-width: @tabletBreakpoint) {
   footer {
-    background: @computerFooterBackgroundGrandient;
+    background: @computerFooterBackgroundGradient;
   }
   footer .theme-sites {
     .header {
@@ -246,11 +246,11 @@ footer .footer-wrapper .menu {
   }
 
   .footer .footer-wrapper .menu {
-  
+
     a {
       font-size: @computerMenuFontSize;
     }
-  } 
+  }
 }
 
-.loadUIOverrides();
\ No newline at end of file
+.loadUIOverrides();
diff --git a/theme/themes/eea/extras/footer.variables b/theme/themes/eea/extras/footer.variables
index 58f9453876..f312fe67f4 100644
--- a/theme/themes/eea/extras/footer.variables
+++ b/theme/themes/eea/extras/footer.variables
@@ -2,9 +2,9 @@
             Footer
 *******************************/
 
-/* @footerBackgroundGrandient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%); */
-@mobileFooterBackgroundGrandient: linear-gradient(220.4deg, @green-5 8.29%, @blue-grey-6 56.3%, #212D38 89.06%);
-@computerFooterBackgroundGrandient: linear-gradient(212.33deg, @green-5 6.78%, #212D38 69.54%, #212D38 98.23%);
+/* @footerBackgroundGradient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%); */
+@mobileFooterBackgroundGradient: linear-gradient(220.4deg, @green-5 8.29%, @blue-grey-6 56.3%, #212D38 89.06%);
+@computerFooterBackgroundGradient: linear-gradient(212.33deg, @green-5 6.78%, #212D38 69.54%, #212D38 98.23%);
 
 /* Titles */
 @footerTitleFontWeight      : @font-weight-7;

From 8b4928a87bfe5fae6f64c93d7c8f1f7a3045816c Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Fri, 20 Jan 2023 19:12:11 +0200
Subject: [PATCH 8/8] change(cards): moved image gradient overlay to a
 mixin.less file

- we can reuse this gradient in other sections as needed
---
 theme/themes/eea/globals/mixins.less    | 16 ++++++++++++++++
 theme/themes/eea/globals/site.variables |  1 +
 theme/themes/eea/views/card.overrides   | 14 +-------------
 3 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 theme/themes/eea/globals/mixins.less

diff --git a/theme/themes/eea/globals/mixins.less b/theme/themes/eea/globals/mixins.less
new file mode 100644
index 0000000000..5231af1e55
--- /dev/null
+++ b/theme/themes/eea/globals/mixins.less
@@ -0,0 +1,16 @@
+// Gradient Mixin
+.gradientMix(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
+  .gradientMix(@type; @colors; @dir; @prefixes; (@index - 1));
+
+  @prefix  : extract(@prefixes, @index);
+  @dir-old : 90 - (@dir);
+
+  background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
+  & when ( @index = length(@prefixes) ) {
+    background-image: ~"@{type}-gradient(@{dir}, @{colors})";
+  }
+}
+
+.image-overlay-gradient() {
+  .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg)
+}
diff --git a/theme/themes/eea/globals/site.variables b/theme/themes/eea/globals/site.variables
index 355939dc17..5f5ce0b391 100644
--- a/theme/themes/eea/globals/site.variables
+++ b/theme/themes/eea/globals/site.variables
@@ -3,6 +3,7 @@
 *******************************/
 
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/tokens/tokens';
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/mixins';
 
 /*-------------------
        Fonts
diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
index f7fffedd30..86c833f208 100644
--- a/theme/themes/eea/views/card.overrides
+++ b/theme/themes/eea/views/card.overrides
@@ -263,18 +263,6 @@
   background: transparent;
 }
 
-// Gradient Mixin
-.gradientMix(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
-  .gradientMix(@type; @colors; @dir; @prefixes; (@index - 1));
-
-  @prefix  : extract(@prefixes, @index);
-  @dir-old : 90 - (@dir);
-
-  background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
-& when ( @index = length(@prefixes) ) {
-      background-image: ~"@{type}-gradient(@{dir}, @{colors})";
-  }
-}
 
 .card .gradient {
   display: flex;
@@ -284,7 +272,7 @@
   width: 100%;
   height: 100%;
   padding: @imageTitlePadding;
-  .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg);
+  .image-overlay-gradient();
 }
 
 .gradient .header {