Refactor Module teaser Limit texts to two lines

client/src/components/modules/ModuleTeaser.vue

@@ -8,13 +8,16 @@
       class="module-teaser__image"
     />
     <div class="module-teaser__body">
-      <h3 class="module-teaser__meta-title">{{ metaTitle }}</h3>
-      <h3 class="module-teaser__title">
-        {{ title }}
-      </h3>
-      <p class="module-teaser__description">
-        {{ teaser }}
-      </p>
+      <div class="module-teaser__content">
+        <h3 class="module-teaser__content-meta-title">{{ metaTitle }}</h3>
+        <h3 class="module-teaser__content-title">
+          {{ title }}
+        </h3>
+        <p class="module-teaser__content-description">
+          {{ teaser }}
+        </p>
+      </div>
+
       <div
         class="module-teaser__pills"
         v-if="$flavor.showModuleFilter"
@@ -62,22 +65,36 @@ const moduleLink = computed(() => {
 <style scoped lang="scss">
 @import 'styles/helpers';
 
+@mixin two-line-text {
+  //Max height of text 2 lines and truncate with ... when overflowing
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 .module-teaser {
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
   border: 1px solid #e2e2e2;
-  height: 390px;
+  min-height: 390px;
   width: 100%;
-  border-radius: 12px;
+  border-radius: $default-border-radius;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
-
   max-width: $topic-mobile-width;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: start;
   @include desktop {
     max-width: $topic-desktop-width;
   }
 
   &--small {
+    min-height: 300px;
     height: 300px;
   }
 
@@ -88,30 +105,41 @@ const moduleLink = computed(() => {
     background-position: center;
     background-size: 100% auto;
     background-repeat: no-repeat;
+    // prevent image from shrinking
+    flex-shrink: 0;
   }
 
   &__body {
-    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: $medium-spacing;
   }
 
-  &__meta-title {
+  &__pills {
+    margin-top: auto;
+  }
+
+  &__content {
+    margin-bottom: $medium-spacing;
+  }
+
+  &__content-meta-title {
     color: $color-silver-dark;
     margin-bottom: $large-spacing;
     @include regular-text;
   }
 
-  &__title {
+  &__content-title {
     @include heading-3;
-    margin-bottom: 5px;
+    margin-bottom: $small-spacing;
+    @include two-line-text;
   }
 
-  &__description {
+  &__content-description {
     line-height: $default-line-height;
     font-size: 1.2rem;
-  }
-
-  &__pills {
-    margin-top: $medium-spacing;
+    @include two-line-text;
   }
 }
 </style>