diff --git a/patterns/molecules/media/css/media.component.css b/patterns/molecules/media/css/media.component.css
index 2754945f237dd71b3b54e030ffe508c80f1443ec..b9bc81f455c34ac2ef20e466b374f4918035f5ab 100755
--- a/patterns/molecules/media/css/media.component.css
+++ b/patterns/molecules/media/css/media.component.css
@@ -82,6 +82,7 @@
     top: -15px; }
     .component-media-content__icon::before {
       content: "\7a";
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
       font-size: 50px;
       font-size: 5rem;
       font-family: "cern-icons";
@@ -121,11 +122,10 @@
         display: block;
         position: relative; }
         .component-media-content__title h3 a span {
+          text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
           display: block;
           width: 100%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis; }
+          overflow: hidden; }
       .component-media-content__title h3 a:hover {
         text-decoration: none; }
       .component-media-content__title h3 a:before {
@@ -249,8 +249,8 @@
     background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0)', endColorStr='rgba(0, 0, 0, 0.9)');
     position: absolute;
-    height: 101%;
-    width: 101%;
+    height: 100%;
+    width: 100%;
     top: 0;
     left: 0;
     z-index: 0; }
@@ -411,3 +411,5 @@
 @media screen and (min-width: 992px) {
       .component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
         opacity: 0; } }
+
+/*# sourceMappingURL=media.component.css.map */
diff --git a/patterns/molecules/media/media.html.twig b/patterns/molecules/media/media.html.twig
index bd7d6cf24770e119c2b5973ef1b1b6c939308445..b0eb5fb4a4c1dd2e0bde348697fd966c97e52d8d 100755
--- a/patterns/molecules/media/media.html.twig
+++ b/patterns/molecules/media/media.html.twig
@@ -23,9 +23,24 @@
         {# Link field for component  #}
         {% if link | render %}
           <h3>
-            {{ link|openlink }}
-            <span>{{ link|render|striptags|raw }}</span>
-            {{ link|closelink }}
+						{% if link | render | get_tag_attribute("a", "href") %}
+
+							{{ link|openlink }}
+							<span class="text-color" {{ attributes_textcolor }}>
+                   {{ link|render|striptags|length > 60 ?
+									 link|render|striptags|htmlspecialchars|slice(0,60) ~ '...' :
+									 link|render|striptags|htmlspecialchars }}
+								</span>
+							{{ link|closelink }}
+
+						{% else %}
+
+							{{ link|length > 60 ?
+							link|htmlspecialchars|slice(0,60) ~ '...' :
+							link }}
+
+						{% endif %}
+
           </h3>
         {% endif %}
       </div>
diff --git a/patterns/molecules/media/sass/media.component.scss b/patterns/molecules/media/sass/media.component.scss
index 00f66529a13eac7b98902d083114903af3c04829..1674df7fcb710c96cf14cde1e54cbd8884f4d1f8 100755
--- a/patterns/molecules/media/sass/media.component.scss
+++ b/patterns/molecules/media/sass/media.component.scss
@@ -84,6 +84,7 @@
     top: -15px;
     &::before {
       content: "\7a";
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
       @include font-size(5.0);
       font-family: "cern-icons";
       -moz-osx-font-smoothing: grayscale;
@@ -113,11 +114,10 @@
         display: block;
         position: relative;
         span {
+          text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
           display: block;
           width: 100%;
-          white-space: nowrap;
           overflow: hidden;
-          text-overflow: ellipsis;
         }
       }
       a:hover {
diff --git a/patterns/molecules/preview-card/css/component-preview-card.css b/patterns/molecules/preview-card/css/component-preview-card.css
index 7aaa7b86935a2f3c3ec7e48a424468ac955be2d0..b3f7741da3b1fb8e94f5bb57956298d04a8908e3 100644
--- a/patterns/molecules/preview-card/css/component-preview-card.css
+++ b/patterns/molecules/preview-card/css/component-preview-card.css
@@ -94,6 +94,7 @@
       text-overflow: ellipsis; }
     .component-preview-cards .component-preview-cards__category-icon-vocabulary:before {
       content: attr(data-icon);
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
       color: white;
       font-family: "cern-icons";
       -moz-osx-font-smoothing: grayscale;
diff --git a/patterns/molecules/preview-card/sass/component-preview-card.scss b/patterns/molecules/preview-card/sass/component-preview-card.scss
index eb3b7d0ed662765a850773f57a0b400184bb6d93..ff0310d0fa254b53918d4a577e50d3ef0b1b1885 100755
--- a/patterns/molecules/preview-card/sass/component-preview-card.scss
+++ b/patterns/molecules/preview-card/sass/component-preview-card.scss
@@ -113,6 +113,7 @@
 
     &:before {
       content: attr(data-icon);
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
       color: white;
       font-family: "cern-icons";
       -moz-osx-font-smoothing: grayscale;
diff --git a/patterns/molecules/related-card/css/component-related_card.css b/patterns/molecules/related-card/css/component-related_card.css
index 7dd16c498c48a74597f70facee0cc413919c9c7b..9ac309473dee5e1dd55c4025ba576d1c2bb63aa2 100755
--- a/patterns/molecules/related-card/css/component-related_card.css
+++ b/patterns/molecules/related-card/css/component-related_card.css
@@ -103,15 +103,14 @@
         padding: 0;
         margin: 0; }
       .component-related_card__content__link a {
+        text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
         display: block;
         position: relative;
         text-decoration: none; }
         .component-related_card__content__link a span {
           display: block;
           width: 100%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis; }
+          overflow: hidden; }
       .component-related_card__content__link a:hover {
         text-decoration: none; }
       .component-related_card__content__link a:before {
@@ -154,9 +153,11 @@
       .component-related_card__content__text p:last-child {
         margin: 0; }
     .component-related_card__content__format {
-      font-family: 'sourcesans-light'; }
+      font-family: 'sourcesans-light';
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; }
     .component-related_card__content .preview-card__date {
-      font-family: 'sourcesans-light'; }
+      font-family: 'sourcesans-light';
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; }
   .component-related_card.portrait {
     width: calc(33.3% - 8px);
     min-height: 428px;
@@ -428,3 +429,5 @@
 @media screen and (min-width: 992px) {
       .component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
         opacity: 0; } }
+
+/*# sourceMappingURL=component-related_card.css.map */
diff --git a/patterns/molecules/related-card/related-card.html.twig b/patterns/molecules/related-card/related-card.html.twig
index d9e53b7297d9619f9fa0a6fc2d743497aae82a4b..762044cd673f9ed6c09f7975ce79bdb86837ea0b 100755
--- a/patterns/molecules/related-card/related-card.html.twig
+++ b/patterns/molecules/related-card/related-card.html.twig
@@ -47,9 +47,24 @@
       <div class="component-related_card__content__link">
         {% if link | render is not empty %}
           <h3>
-            {{ link|openlink }}
-            <span class="text-color" {{ attributes_textcolor }}>{{ link|render|striptags|raw }}</span>
-            {{ link|closelink }}
+						{% if link | render | get_tag_attribute("a", "href") %}
+
+							{{ link|openlink }}
+								<span class="text-color" {{ attributes_textcolor }}>
+                   {{ link|render|striptags|length > 60 ?
+									 link|render|striptags|htmlspecialchars|slice(0,60) ~ '...' :
+									 link|render|striptags|htmlspecialchars }}
+								</span>
+							{{ link|closelink }}
+
+						{% else %}
+
+							{{ link|length > 60 ?
+							link|htmlspecialchars|slice(0,60) ~ '...' :
+							link }}
+
+						{% endif %}
+
           </h3>
         {% endif %}
       </div>
diff --git a/patterns/molecules/related-card/sass/component-related_card.scss b/patterns/molecules/related-card/sass/component-related_card.scss
index 08a106ebf12efbb28ad72793daaf4226a7d66b12..2b1f0496bbb5167ced5e804a7f0fac5bfaab19eb 100755
--- a/patterns/molecules/related-card/sass/component-related_card.scss
+++ b/patterns/molecules/related-card/sass/component-related_card.scss
@@ -109,15 +109,14 @@
         margin: 0;
       }
       a {
+        text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
         display: block;
         position: relative;
         text-decoration: none;
         span {
           display: block;
           width: 100%;
-          white-space: nowrap;
           overflow: hidden;
-          text-overflow: ellipsis;
         }
       }
       a:hover {
@@ -167,9 +166,13 @@
     }
     &__format {
       font-family: 'sourcesans-light';
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
+
     }
     .preview-card__date {
       font-family: 'sourcesans-light';
+      text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
+
     }
   } //
   // display