@eeacms/volto-eea-design-system 1.0.0-alpha.11 → 1.0.0-alpha.12

package/CHANGELOG.md

@@ -4,6 +4,38 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-alpha.12](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.11...1.0.0-alpha.12) - 24 January 2023
+
+#### :bug: Bug Fixes
+
+- fix(mobile menu): sub links when an accordion section is active [David Ichim - [`bb3be81`](https://github.com/eea/volto-eea-design-system/commit/bb3be81416340ad0e3e992cd4e75642fc50f8ad3)]
+
+#### :nail_care: Enhancements
+
+- change(card): title padding value for a more balance look [David Ichim - [`74b6556`](https://github.com/eea/volto-eea-design-system/commit/74b65563d973eb9c6afc534935e253f2705fe9ee)]
+- change(card): added image card section, tweaked mobile heading size [David Ichim - [`0f879e1`](https://github.com/eea/volto-eea-design-system/commit/0f879e15d22ae066f020d8188ef3e355c27d016c)]
+- change(cards): moved image gradient overlay to a mixin.less file [David Ichim - [`8b4928a`](https://github.com/eea/volto-eea-design-system/commit/8b4928a87bfe5fae6f64c93d7c8f1f7a3045816c)]
+- change(card): removed uppercase transform from title on image [David Ichim - [`2948ae1`](https://github.com/eea/volto-eea-design-system/commit/2948ae16f748911929910ac53d1e0acf96952317)]
+- change(cards): added image for all storybook card examples [David Ichim - [`3f19413`](https://github.com/eea/volto-eea-design-system/commit/3f194130bb6fb7b9ab04a7e1305f26fa135c23d2)]
+- change(card): implement title on image within image section [David Ichim - [`ff6cc60`](https://github.com/eea/volto-eea-design-system/commit/ff6cc600978355e04dde704d014d2cbe27df1298)]
+- change(colors, Docusaurus): Visited link colour change and thematic logo replacement #278 from eea/refactor-visited-link [ichim-david - [`f82d978`](https://github.com/eea/volto-eea-design-system/commit/f82d9781cc3b34443f181565c2ec1892d534f8e2)]
+- change(banner): restored label value of metadata field when type isn't date [David Ichim - [`571a4f2`](https://github.com/eea/volto-eea-design-system/commit/571a4f27fe73d0465b6482f70dd70b2dc47dffe8)]
+- refactor(docusaurus): applied image naming convention [Giorgos Stamatis - [`ee7bc29`](https://github.com/eea/volto-eea-design-system/commit/ee7bc290084e198f9f94e40fbf44c6d9cb19d1ba)]
+- refactor(card): Update titles value and size [Antonis Tarantilis - [`c35ad5c`](https://github.com/eea/volto-eea-design-system/commit/c35ad5c76caa00556f8a501d2e7d516464790dc4)]
+- refactor(storybook): visited link variables [Dora Anastasiou - [`b209b2f`](https://github.com/eea/volto-eea-design-system/commit/b209b2f7703641926c6d4b1f7162eef39b2a1ad8)]
+- refactor(Card): add image with title css [Antonis Tarantilis - [`6e6e63e`](https://github.com/eea/volto-eea-design-system/commit/6e6e63e2362a27b0bbf4b8dd968f11a0dc87da2a)]
+- refactor(Card): create card template for stories [Antonis Tarantilis - [`2fa77f3`](https://github.com/eea/volto-eea-design-system/commit/2fa77f3f93935dd01cd5e3d77437fe8dc03721da)]
+
+#### :house: Documentation changes
+
+- docs(colors): visited link update [Dora Anastasiou - [`ece77fe`](https://github.com/eea/volto-eea-design-system/commit/ece77fec130de1d9d8014d40e7da975bf57061ee)]
+
+#### :hammer_and_wrench: Others
+
+- change version to alpha 12 instead of 1 final [David Ichim - [`3225025`](https://github.com/eea/volto-eea-design-system/commit/32250253f5d7fe9f01126136ad86b8a4f2f5c700)]
+- feature(card): new card variation with title on top of image #267 from eea/title-on-image-card [ichim-david - [`2c0ca95`](https://github.com/eea/volto-eea-design-system/commit/2c0ca95700bb162bc1273c83f2fc4f591de8dcf0)]
+- fix typos in footer gradient variables [David Ichim - [`4006640`](https://github.com/eea/volto-eea-design-system/commit/40066405d97af838e986370101371a8162029e02)]
+- Back to dev [Alin Voinea - [`477d997`](https://github.com/eea/volto-eea-design-system/commit/477d997513ef5152ab98e080ad07f927b5869705)]
 ### [1.0.0-alpha.11](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.10...1.0.0-alpha.11) - 17 January 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.jsx

@@ -118,7 +118,12 @@ Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
         })}
       </span>
     );
-  return <span className={`field ${type}`}>{value}</span>;
+  return (
+    <span className={`field ${type}`}>
+      {label && <>{label}: </>}
+      {value}
+    </span>
+  );
 };
 
 export default Banner;

package/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,120 @@ 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>
+      {/* Type & Date */}
+      <Card.Meta>
+        {card.meta} <MetaRight {...card} />
+      </Card.Meta>
+
+      {/* Title */}
+      {!titleOnImage || !card.hasImage ? (
+        <Card.Header>{card.title}</Card.Header>
+      ) : (
+        ''
       )}
-      <Card.Content>
-        <Card.Meta>
-          {args.meta} <MetaRight {...args} />
-        </Card.Meta>
-        <Card.Header>
-          <a href={args.href}>{args.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>
+
+      {/* Description */}
+      <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) => (
+  <a href={card.href} className={'image'}>
+    <Image src={card.imgUrl} ui={false} alt="card image" />
+    <div className="gradient">
+      <Card.Header>{card.title}</Card.Header>
+    </div>
+  </a>
+);
+
+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: 'Economy and resources',
+      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 +158,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,11 +173,12 @@ const GridTemplate = (args) => (
 
 export const CardGrid = GridTemplate.bind({});
 CardGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Nature',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -222,11 +187,10 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       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:
@@ -235,71 +199,67 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
     {
-      title: 'Eget tellus blandit aenean mattis.',
+      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: '/#',
-      links: null,
       fluid: true,
     },
   ],
 };
-CardGrid.argTypes = {
-  cards: {
-    description: 'array with cards data',
-    table: {
-      type: {
-        summary: 'Object',
-      },
-      defaultValue: { summary: ' "" ' },
+
+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">
       {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,11 +267,12 @@ const FluidGridTemplate = (args) => (
 
 export const FluidGrid = FluidGridTemplate.bind({});
 FluidGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Nature',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -321,10 +282,9 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
     {
-      title: 'Suspendisse iaculis feugiat',
+      title: 'Health',
       imgUrl:
         'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
@@ -334,32 +294,21 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
     {
-      title: 'Eget tellus blandit aenean mattis.',
+      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: '/#',
       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 +343,25 @@ const Arrows = (props) => {
   );
 };
 
-function CarouselCardsContent({ variant, inverted, settings, cards, ...rest }) {
+function CarouselCardsContent({
+  titleOnImage,
+  variant,
+  inverted,
+  settings,
+  cards,
+}) {
   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 +377,7 @@ const CarouselCardsTemplate = (args) => (
 
 export const CarouselCards = CarouselCardsTemplate.bind({});
 CarouselCards.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   settings: {
@@ -468,7 +407,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',
@@ -477,7 +416,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',
@@ -486,7 +425,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',
@@ -495,8 +434,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',
@@ -505,7 +443,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',

package/theme/theme.config

@@ -135,5 +135,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */

package/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();
+.loadUIOverrides();

package/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;

package/theme/themes/eea/extras/header.less

@@ -833,7 +833,8 @@
   display: none;
 }
 
-#main #mega-menu .ui.accordion .title:first-child + .content {
+// hide content of accordion titles that are not active
+#main #mega-menu .ui.accordion .title:first-child + .content:not(.active) {
   display: none;
 }
 

package/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)
+}

package/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
@@ -209,7 +210,7 @@
 
 @linkColor           : @blue-4;
 @linkHoverColor      : @blue-5;
-@linkVisitedColor    : @purple-5;
+@linkVisitedColor    : @purple-4;
 @linkActiveColor     : @blue-6;
 @linkUnderline       : none;
 @linkHoverUnderline  : @linkUnderline;

package/theme/themes/eea/tokens/colors.less

@@ -10,7 +10,7 @@
 @purple-1: #DFD6E7;
 @purple-2: #BEADCE;
 @purple-3: #9E84B6;
-@purple-4: #7D5B9D;
+@purple-4: #753AAD;
 @purple-5: #5C3285;
 @purple-6: #3C096C;
 

package/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);
@@ -24,6 +25,7 @@
   margin-left: @cardMetaDateMarginLeft;
 }
 
+.ui.cards > .card:not(.rounded) > .image,
 .ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
@@ -249,6 +251,46 @@
   }
 }
 
+/*******************************
+      Image with title
+*******************************/
+// Adding the default image css for image inside image-with-title
+.ui.cards > .card > .image {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  padding: 0;
+  background: transparent;
+}
+
+
+.card .gradient {
+  display: flex;
+  align-items: end;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  padding: @imageTitlePadding;
+  .image-overlay-gradient();
+}
+
+.gradient .header {
+  font-size: var(--image-header-font-size, @imageTitleMobileFontSize);
+  color: @imageTitleColor;
+  font-weight: @imageTitleFontWeight;
+  line-height: @imageTitleLineHeight;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .card .gradient {
+    padding-block: @imageTitlePaddingBlock;
+  }
+  .gradient .header {
+    --image-header-font-size: @imageTitleFontSize;
+  }
+}
+
 /*******************************
         Carousel
 *******************************/

package/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,17 @@
 @invertedTertiaryCardColor: @tertiaryColor;
 @invertedTertiaryCardBackgroundColor: @white;
 
+/*******************************
+        Image with title
+*******************************/
+@imageTitleColor: @white;
+@imageTitleFontSize: @h2;
+@imageTitleMobileFontSize: @mobileH1;
+@imageTitleFontWeight: @font-weight-7;
+@imageTitleLineHeight: @font-lineheight-0;
+@imageTitlePadding: @rem-space-6;
+@imageTitlePaddingBlock: @rem-space-4;
+
 /*******************************
           Rounded Card
 *******************************/