change(card): added extra content for teaser card story

- we can now enable themes
- cleaned up typos
- added ability to enable or disable the title on
  image option
- decreased font size of title and card headers to
  mobile size also on tablets as there is less space
  for them
- show by default up to 3 lines not 2 as the whole point
  of the title on image is to see the title

src/ui/Card/Card.stories.jsx

@@ -473,16 +473,25 @@ const TeaserCard = ({ variant, inverted, titleOnImage, card }) => (
       } ${inverted ? 'inverted' : ''}`}
     >
       <div
-        className={`ui card u-card max-2-lines title-max-2-lines ${
+        className={`ui card u-card max-3-lines title-max-3-lines ${
           card.fluid ? 'fluid' : ''
-        }`}
+        } ${variant}`}
       >
-        <a claclassNamess="image" href={card.href}>
-          <img src={card.imgUrl} alt={card.title} class="ui image" />
-          <div className="gradient">
+        <a className="image" href={card.href}>
+          <img src={card.imgUrl} alt={card.title} className="ui image" />
+          {titleOnImage && (
+            <div className="gradient">
+              <div className="header">{card.title}</div>
+            </div>
+          )}
+        </a>
+
+        {!titleOnImage && (
+          <div className="content">
             <div className="header">{card.title}</div>
+            <Card.Description>{card.description}</Card.Description>
           </div>
-        </a>
+        )}
       </div>
     </div>
   </div>
@@ -508,13 +517,16 @@ const TeaserTemplate = (args) => (
 
 export const TeaserCardGrid = TeaserTemplate.bind({});
 TeaserCardGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
     {
       title: "State of Europe's environment",
       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,
       href: '/#',
       fluid: true,
@@ -524,6 +536,8 @@ TeaserCardGrid.args = {
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       hasImage: true,
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       href: '/#',
       fluid: true,
     },
@@ -532,6 +546,8 @@ TeaserCardGrid.args = {
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       hasImage: true,
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       href: '/#',
       fluid: true,
     },

theme/themes/eea/views/card.overrides

@@ -282,7 +282,7 @@
   line-height: @imageTitleLineHeight;
 }
 
-@media only screen and (min-width: @tabletBreakpoint) {
+@media only screen and (min-width: @computerBreakpoint) {
   .card .gradient {
     padding-block: @imageTitlePaddingBlock;
   }
@@ -437,12 +437,9 @@
 }
 
 // Added from listing-cards.less
-.title-max-2-lines {
-  --title-max-lines: 2;
-}
 .grid-block-teaser .ui.card.u-card .header {
   display: -webkit-box !important;
   overflow: hidden;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--title-max-lines, 5);
-}
+  -webkit-line-clamp: var(--title-max-lines, 3);
+}