Bug 1527370 – Design Tweaks 2 for Discovery Stream. r=Mardak a=lizzard
authork88hudson <k88hudson@gmail.com>
Sat, 16 Feb 2019 00:56:28 +0200
changeset 515998 72498207a0698c24cf368c2ad7b9f97386ef2cc7
parent 515997 5a8c8df8a7a74d1c04fe52c728429dde5a531db9
child 515999 a22505bf212858e257265ee1fe883d32fb4d6fd6
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak, lizzard
bugs1527370
milestone66.0
Bug 1527370 – Design Tweaks 2 for Discovery Stream. r=Mardak a=lizzard Reviewers: Mardak Reviewed By: Mardak Bug #: 1527370 Differential Revision: https://phabricator.services.mozilla.com/D20009
browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
browser/components/newtab/content-src/styles/_variables.scss
browser/components/newtab/css/activity-stream-linux.css
browser/components/newtab/css/activity-stream-mac.css
browser/components/newtab/css/activity-stream-windows.css
browser/components/newtab/data/content/activity-stream.bundle.js
--- a/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
@@ -20,14 +20,18 @@
 
   .ds-column-grid {
     display: grid;
     grid-row-gap: var(--gridRowGap);
   }
 }
 
 .ds-header {
-  font-size: 17px;
+  color: $grey-50;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 24px;
-  color: $grey-90;
-  margin: 24px 0 12px;
+  line-height: 20px;
+  margin: 8px 0;
+
+  .icon {
+    fill: var(--newtab-text-secondary-color);
+  }
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
@@ -1,14 +1,15 @@
 $col4-header-line-height: 20;
 $col4-header-font-size: 14;
 
 .ds-card-grid {
   display: grid;
   grid-gap: 24px;
+  margin: 16px 0;
 
   .ds-card {
     background: $white;
     border-radius: 4px;
   }
 
   &.ds-card-grid-border {
     .ds-card {
@@ -46,22 +47,22 @@
 
   // "Full width layout"
   .ds-column-9 &,
   .ds-column-10 &,
   .ds-column-11 &,
   .ds-column-12 & {
     grid-template-columns: repeat(4, 1fr);
 
-    .meta .title {
-      @include limit-visibile-lines(2, $col4-header-line-height, $col4-header-font-size);
-    }
-
     &.ds-card-grid-divisible-by-3 {
       grid-template-columns: repeat(3, 1fr);
 
       .title {
         font-size: 17px;
         line-height: 24px;
       }
     }
+
+    &.ds-card-grid-divisible-by-4 .title {
+      @include limit-visibile-lines(3, 20, 14);
+    }
   }
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -36,29 +36,30 @@
     flex-grow: 1;
     padding: 16px;
 
     .info-wrap {
       flex-grow: 1;
     }
 
     .title {
-      // show only 2 lines of copy
-      @include limit-visibile-lines(2, $header-line-height, $header-font-size);
+      // show only 3 lines of copy
+      @include limit-visibile-lines(3, $header-line-height, $header-font-size);
       font-weight: 600;
     }
 
     .excerpt {
-      // show only 4 lines of copy
-      @include limit-visibile-lines(4, $excerpt-line-height, $excerpt-font-size);
+      // show only 3 lines of copy
+      @include limit-visibile-lines(3, $excerpt-line-height, $excerpt-font-size);
     }
 
     .context,
     .source {
       font-size: 13px;
+      color: $teal-80;
     }
   }
 
   header {
     line-height: $header-line-height * 1px;
     font-size: $header-font-size * 1px;
     color: $grey-90;
 
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx
@@ -1,27 +1,16 @@
 import React from "react";
 import {SafeAnchor} from "../SafeAnchor/SafeAnchor";
 
 export class DSMessage extends React.PureComponent {
   render() {
-    let hasSubtitleAndOrLink = this.props.link_text && this.props.link_url;
-    hasSubtitleAndOrLink = hasSubtitleAndOrLink || this.props.subtitle;
-
     return (
       <div className="ds-message">
-        {this.props.title && (
-          <header className="title">
-            {this.props.icon && (<img src={this.props.icon} />)}
-            <span>{this.props.title}</span>
-          </header>
-        )}
-        { hasSubtitleAndOrLink && (
-          <p className="subtitle">
-            {this.props.subtitle && (<span>{this.props.subtitle}</span>)}
-            {this.props.link_text && this.props.link_url && (<SafeAnchor url={this.props.link_url}>{this.props.link_text}</SafeAnchor>)}
-          </p>
-        )}
-        <hr className="ds-hr" />
+        <header className="title">
+          {this.props.icon && (<div className="glyph" style={{backgroundImage: `url(${this.props.icon})`}} />)}
+          {this.props.title && (<span className="title-text">{this.props.title}</span>)}
+          {this.props.link_text && this.props.link_url && (<SafeAnchor className="link" url={this.props.link_url}>{this.props.link_text}</SafeAnchor>)}
+        </header>
       </div>
     );
   }
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss
@@ -1,41 +1,37 @@
 .ds-message {
   margin: 8px 0 0;
 
   .title {
     display: flex;
     align-items: center;
 
-    img {
+    .glyph {
       width: 16px;
       height: 16px;
       margin: 0 6px 0 0;
+      -moz-context-properties: fill;
+      fill: var(--newtab-icon-secondary-color);
+      background-position: center center;
+      background-size: 16px;
+      background-repeat: no-repeat;
     }
 
-    span {
-      line-height: 24px;
-      font-size: 17px;
-      color: $grey-90;
+    .title-text {
+      line-height: 20px;
+      font-size: 13px;
+      color: $grey-50;
       font-weight: 600;
+      padding-right: 12px;
+    }
+
+    .link {
+      line-height: 20px;
+      font-size: 13px;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
     }
   }
-
-  .subtitle {
-    line-height: 20px;
-    font-size: 14px;
-    color: $grey-50;
-    margin: 0;
-
-    span::after {
-      content: ' ';
-    }
-
-    a:hover,
-    a:focus {
-      text-decoration: underline;
-    }
-  }
-
-  .ds-hr {
-    margin: 16px 0 8px;
-  }
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
@@ -22,34 +22,30 @@
 
   .ds-list {
     border-top: 0;
     padding-top: 0;
   }
 
   .ds-card {
     border: 0;
+    padding-bottom: 20px;
 
     p {
       margin-top: 4px;
     }
 
     &:hover {
       border: 0;
       box-shadow: none;
       border-radius: 0;
     }
 
     .meta {
       padding: 0;
-
-      .title {
-        // show only 2 lines of copy
-        @include limit-visibile-lines(2, $card-header-in-hero-line-height, $card-header-in-hero-font-size);
-      }
     }
 
     .img-wrapper {
       margin: 0 0 12px;
     }
   }
 
   .img-wrapper {
@@ -93,26 +89,23 @@
       flex-direction: column;
       justify-content: space-between;
 
       header {
         @include limit-visibile-lines(4, 28, 22);
         color: $grey-90;
       }
 
-      p {
-        font-size: 14px;
-
-        &.context {
-          color: $teal-70;
-        }
+      .context {
+        color: $teal-70;
       }
 
       .source {
         font-size: 13px;
+        color: $teal-80;
         margin-bottom: 0;
         overflow-x: hidden;
         text-overflow: ellipsis;
       }
     }
   }
 
   // "2/3 width layout"
@@ -153,57 +146,64 @@
   // "Full width layout"
   .ds-column-9 &,
   .ds-column-10 &,
   .ds-column-11 &,
   .ds-column-12 & {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 24px;
-    padding: 20px 0;
 
     &.ds-hero-border {
       border-top: $border-secondary;
+      padding: 20px 0;
 
       .ds-card:nth-child(-n+2) {
         border-bottom: $border-secondary;
         margin-bottom: 20px;
       }
     }
 
     .wrapper {
       border-top: 0;
       border-bottom: 0;
       margin: 0;
-      padding: 0;
+      padding: 0 0 20px;
+      display: flex;
+      flex-direction: column;
 
       .img-wrapper {
         margin: 0;
       }
 
       .img {
         margin-bottom: 16px;
         height: 0;
         padding-top: 50%; // 2:1 aspect ratio
       }
 
       .meta {
+        flex-grow: 1;
         display: flex;
         padding: 0 24px 0 0;
 
         header {
           @include limit-visibile-lines(3, 28, 22);
           margin: 0 0 8px;
         }
 
         .source {
-          margin: 0;
+          margin-bottom: 0;
         }
       }
     }
 
     .cards {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-column-gap: 24px;
+
+      .title {
+        @include limit-visibile-lines(3, 20, 14);
+      }
     }
   }
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -19,17 +19,17 @@
 @mixin set-item-sizes($font-size, $line-height, $image-size) {
   .ds-list-item {
     // XXX see if we really want absolute units, maybe hoist somewhere central?
     font-size: $font-size * 1px;
     line-height: $line-height * 1px;
   }
 
   .ds-list-item-title {
-    @include limit-visibile-lines(2, $line-height, $font-size);
+    @include limit-visibile-lines(3, $line-height, $font-size);
   }
 
   .ds-list-image {
     min-width: $image-size;
     width: $image-size;
   }
 }
 
@@ -174,17 +174,17 @@
     font-size: $item-font-size * 1px;
     line-height: $item-line-height * 1px;
     margin: 8px 0 0;
   }
 
   .ds-list-item-info,
   .ds-list-item-context {
     @include limit-visibile-lines(1, $item-line-height, $item-font-size);
-    color: $grey-50;
+    color: $teal-80;
     font-size: 13px;
     text-overflow: ellipsis;
   }
 
   .ds-list-item-title {
     font-weight: 600;
     margin-bottom: 4px;
   }
--- a/browser/components/newtab/content-src/styles/_variables.scss
+++ b/browser/components/newtab/content-src/styles/_variables.scss
@@ -9,16 +9,17 @@
 $grey-30: #D7D7DB;
 $grey-40: #B1B1B3;
 $grey-50: #737373;
 $grey-60: #4A4A4F;
 $grey-70: #38383D;
 $grey-80: #2A2A2E;
 $grey-90: #0C0C0D;
 $teal-70: #008EA4;
+$teal-80: #005A71;
 $red-60: #D70022;
 $yellow-50: #FFE900;
 
 // Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
 $grey-10-10: rgba($grey-10, 0.1);
 $grey-10-20: rgba($grey-10, 0.2);
 $grey-10-30: rgba($grey-10, 0.3);
 $grey-10-40: rgba($grey-10, 0.4);
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -1829,25 +1829,28 @@ main {
   .discovery-stream.ds-layout .ds-column-1 {
     grid-column-start: auto;
     grid-column-end: span 1; }
   .discovery-stream.ds-layout .ds-column-grid {
     display: grid;
     grid-row-gap: var(--gridRowGap); }
 
 .ds-header {
-  font-size: 17px;
+  color: #737373;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 24px;
-  color: #0C0C0D;
-  margin: 24px 0 12px; }
+  line-height: 20px;
+  margin: 8px 0; }
+  .ds-header .icon {
+    fill: var(--newtab-text-secondary-color); }
 
 .ds-card-grid {
   display: grid;
-  grid-gap: 24px; }
+  grid-gap: 24px;
+  margin: 16px 0; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
   .ds-card-grid.ds-card-grid-border .ds-card {
     box-shadow: var(--newtab-card-shadow); }
     .ds-card-grid.ds-card-grid-border .ds-card:hover {
       box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
       transition: box-shadow 150ms;
@@ -1863,35 +1866,35 @@ main {
   .ds-column-7 .ds-card-grid,
   .ds-column-8 .ds-card-grid {
     grid-template-columns: repeat(2, 1fr); }
   .ds-column-9 .ds-card-grid,
   .ds-column-10 .ds-card-grid,
   .ds-column-11 .ds-card-grid,
   .ds-column-12 .ds-card-grid {
     grid-template-columns: repeat(4, 1fr); }
-    .ds-column-9 .ds-card-grid .meta .title,
-    .ds-column-10 .ds-card-grid .meta .title,
-    .ds-column-11 .ds-card-grid .meta .title,
-    .ds-column-12 .ds-card-grid .meta .title {
-      font-size: 14px;
-      line-height: 20px;
-      max-height: 2.85714em;
-      overflow: hidden; }
     .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-3 {
       grid-template-columns: repeat(3, 1fr); }
       .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-3 .title {
         font-size: 17px;
         line-height: 24px; }
+    .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-4 .title {
+      font-size: 14px;
+      line-height: 20px;
+      max-height: 4.28571em;
+      overflow: hidden; }
 
 .ds-hero .img {
   background-color: var(--newtab-card-placeholder-color);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
@@ -1910,30 +1913,26 @@ main {
   overflow: hidden;
   margin: 4px 0 8px; }
 
 .ds-hero .ds-list {
   border-top: 0;
   padding-top: 0; }
 
 .ds-hero .ds-card {
-  border: 0; }
+  border: 0;
+  padding-bottom: 20px; }
   .ds-hero .ds-card p {
     margin-top: 4px; }
   .ds-hero .ds-card:hover {
     border: 0;
     box-shadow: none;
     border-radius: 0; }
   .ds-hero .ds-card .meta {
     padding: 0; }
-    .ds-hero .ds-card .meta .title {
-      font-size: 14px;
-      line-height: 20px;
-      max-height: 2.85714em;
-      overflow: hidden; }
   .ds-hero .ds-card .img-wrapper {
     margin: 0 0 12px; }
 
 .ds-hero .img-wrapper {
   margin: 0 0 12px; }
 
 .ds-hero .wrapper {
   color: #737373;
@@ -1960,22 +1959,21 @@ main {
     flex-direction: column;
     justify-content: space-between; }
     .ds-hero .wrapper .meta header {
       font-size: 22px;
       line-height: 28px;
       max-height: 5.09091em;
       overflow: hidden;
       color: #0C0C0D; }
-    .ds-hero .wrapper .meta p {
-      font-size: 14px; }
-      .ds-hero .wrapper .meta p.context {
-        color: #008EA4; }
+    .ds-hero .wrapper .meta .context {
+      color: #008EA4; }
     .ds-hero .wrapper .meta .source {
       font-size: 13px;
+      color: #005A71;
       margin-bottom: 0;
       overflow-x: hidden;
       text-overflow: ellipsis; }
 
 .ds-column-5 .ds-hero .wrapper,
 .ds-column-6 .ds-hero .wrapper,
 .ds-column-7 .ds-hero .wrapper,
 .ds-column-8 .ds-hero .wrapper {
@@ -2012,76 +2010,87 @@ main {
   grid-column-gap: 24px; }
 
 .ds-column-9 .ds-hero,
 .ds-column-10 .ds-hero,
 .ds-column-11 .ds-hero,
 .ds-column-12 .ds-hero {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 24px;
-  padding: 20px 0; }
+  grid-column-gap: 24px; }
   .ds-column-9 .ds-hero.ds-hero-border,
   .ds-column-10 .ds-hero.ds-hero-border,
   .ds-column-11 .ds-hero.ds-hero-border,
   .ds-column-12 .ds-hero.ds-hero-border {
-    border-top: 1px solid var(--newtab-border-secondary-color); }
+    border-top: 1px solid var(--newtab-border-secondary-color);
+    padding: 20px 0; }
     .ds-column-9 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-10 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-11 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-12 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2) {
       border-bottom: 1px solid var(--newtab-border-secondary-color);
       margin-bottom: 20px; }
   .ds-column-9 .ds-hero .wrapper,
   .ds-column-10 .ds-hero .wrapper,
   .ds-column-11 .ds-hero .wrapper,
   .ds-column-12 .ds-hero .wrapper {
     border-top: 0;
     border-bottom: 0;
     margin: 0;
-    padding: 0; }
+    padding: 0 0 20px;
+    display: flex;
+    flex-direction: column; }
     .ds-column-9 .ds-hero .wrapper .img-wrapper,
     .ds-column-10 .ds-hero .wrapper .img-wrapper,
     .ds-column-11 .ds-hero .wrapper .img-wrapper,
     .ds-column-12 .ds-hero .wrapper .img-wrapper {
       margin: 0; }
     .ds-column-9 .ds-hero .wrapper .img,
     .ds-column-10 .ds-hero .wrapper .img,
     .ds-column-11 .ds-hero .wrapper .img,
     .ds-column-12 .ds-hero .wrapper .img {
       margin-bottom: 16px;
       height: 0;
       padding-top: 50%; }
     .ds-column-9 .ds-hero .wrapper .meta,
     .ds-column-10 .ds-hero .wrapper .meta,
     .ds-column-11 .ds-hero .wrapper .meta,
     .ds-column-12 .ds-hero .wrapper .meta {
+      flex-grow: 1;
       display: flex;
       padding: 0 24px 0 0; }
       .ds-column-9 .ds-hero .wrapper .meta header,
       .ds-column-10 .ds-hero .wrapper .meta header,
       .ds-column-11 .ds-hero .wrapper .meta header,
       .ds-column-12 .ds-hero .wrapper .meta header {
         font-size: 22px;
         line-height: 28px;
         max-height: 3.81818em;
         overflow: hidden;
         margin: 0 0 8px; }
       .ds-column-9 .ds-hero .wrapper .meta .source,
       .ds-column-10 .ds-hero .wrapper .meta .source,
       .ds-column-11 .ds-hero .wrapper .meta .source,
       .ds-column-12 .ds-hero .wrapper .meta .source {
-        margin: 0; }
+        margin-bottom: 0; }
   .ds-column-9 .ds-hero .cards,
   .ds-column-10 .ds-hero .cards,
   .ds-column-11 .ds-hero .cards,
   .ds-column-12 .ds-hero .cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 24px; }
+    .ds-column-9 .ds-hero .cards .title,
+    .ds-column-10 .ds-hero .cards .title,
+    .ds-column-11 .ds-hero .cards .title,
+    .ds-column-12 .ds-hero .cards .title {
+      font-size: 14px;
+      line-height: 20px;
+      max-height: 4.28571em;
+      overflow: hidden; }
 
 .ds-hr {
   border: 0;
   height: 0;
   border-top: 1px solid var(--newtab-border-secondary-color); }
 
 .ds-list {
   display: grid;
@@ -2089,17 +2098,17 @@ main {
   grid-column-gap: 24px;
   padding-inline-start: 0; }
   .ds-list:not(.ds-list-full-width) .ds-list-item {
     font-size: 14px;
     line-height: 20px; }
   .ds-list:not(.ds-list-full-width) .ds-list-item-title {
     font-size: 14px;
     line-height: 20px;
-    max-height: 2.85714em;
+    max-height: 4.28571em;
     overflow: hidden; }
   .ds-list:not(.ds-list-full-width) .ds-list-image {
     min-width: 72px;
     width: 72px; }
   .ds-column-5 .ds-list:not(.ds-list-full-width),
   .ds-column-6 .ds-list:not(.ds-list-full-width),
   .ds-column-7 .ds-list:not(.ds-list-full-width),
   .ds-column-8 .ds-list:not(.ds-list-full-width) {
@@ -2168,17 +2177,17 @@ main {
 
 .ds-list-full-width .ds-list-item {
   font-size: 17px;
   line-height: 24px; }
 
 .ds-list-full-width .ds-list-item-title {
   font-size: 17px;
   line-height: 24px;
-  max-height: 2.82353em;
+  max-height: 4.23529em;
   overflow: hidden; }
 
 .ds-list-full-width .ds-list-image {
   min-width: 144px;
   width: 144px; }
 
 .ds-list-item {
   display: block;
@@ -2199,17 +2208,17 @@ main {
     line-height: 20px;
     margin: 8px 0 0; }
   .ds-list-item .ds-list-item-info,
   .ds-list-item .ds-list-item-context {
     font-size: 14px;
     line-height: 20px;
     max-height: 1.42857em;
     overflow: hidden;
-    color: #737373;
+    color: #005A71;
     font-size: 13px;
     text-overflow: ellipsis; }
   .ds-list-item .ds-list-item-title {
     font-weight: 600;
     margin-bottom: 4px; }
   .ds-list-item .ds-list-item-text {
     display: flex;
     flex-direction: column; }
@@ -2373,63 +2382,63 @@ main {
     flex-direction: column;
     flex-grow: 1;
     padding: 16px; }
     .ds-card .meta .info-wrap {
       flex-grow: 1; }
     .ds-card .meta .title {
       font-size: 17px;
       line-height: 24px;
-      max-height: 2.82353em;
+      max-height: 4.23529em;
       overflow: hidden;
       font-weight: 600; }
     .ds-card .meta .excerpt {
       font-size: 14px;
       line-height: 20px;
-      max-height: 5.71429em;
+      max-height: 4.28571em;
       overflow: hidden; }
     .ds-card .meta .context,
     .ds-card .meta .source {
-      font-size: 13px; }
+      font-size: 13px;
+      color: #005A71; }
   .ds-card header {
     line-height: 24px;
     font-size: 17px;
     color: #0C0C0D; }
   .ds-card p {
     font-size: 14px;
     line-height: 20px;
     color: #737373;
     margin: 8px 0 0; }
 
 .ds-message {
   margin: 8px 0 0; }
   .ds-message .title {
     display: flex;
     align-items: center; }
-    .ds-message .title img {
+    .ds-message .title .glyph {
       width: 16px;
       height: 16px;
-      margin: 0 6px 0 0; }
-    .ds-message .title span {
-      line-height: 24px;
-      font-size: 17px;
-      color: #0C0C0D;
-      font-weight: 600; }
-  .ds-message .subtitle {
-    line-height: 20px;
-    font-size: 14px;
-    color: #737373;
-    margin: 0; }
-    .ds-message .subtitle span::after {
-      content: ' '; }
-    .ds-message .subtitle a:hover,
-    .ds-message .subtitle a:focus {
-      text-decoration: underline; }
-  .ds-message .ds-hr {
-    margin: 16px 0 8px; }
+      margin: 0 6px 0 0;
+      -moz-context-properties: fill;
+      fill: var(--newtab-icon-secondary-color);
+      background-position: center center;
+      background-size: 16px;
+      background-repeat: no-repeat; }
+    .ds-message .title .title-text {
+      line-height: 20px;
+      font-size: 13px;
+      color: #737373;
+      font-weight: 600;
+      padding-right: 12px; }
+    .ds-message .title .link {
+      line-height: 20px;
+      font-size: 13px; }
+      .ds-message .title .link:hover, .ds-message .title .link:focus {
+        text-decoration: underline; }
 
 .ASRouterButton {
   font-weight: 600;
   font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
   border: 0;
   font-family: inherit;
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -1832,25 +1832,28 @@ main {
   .discovery-stream.ds-layout .ds-column-1 {
     grid-column-start: auto;
     grid-column-end: span 1; }
   .discovery-stream.ds-layout .ds-column-grid {
     display: grid;
     grid-row-gap: var(--gridRowGap); }
 
 .ds-header {
-  font-size: 17px;
+  color: #737373;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 24px;
-  color: #0C0C0D;
-  margin: 24px 0 12px; }
+  line-height: 20px;
+  margin: 8px 0; }
+  .ds-header .icon {
+    fill: var(--newtab-text-secondary-color); }
 
 .ds-card-grid {
   display: grid;
-  grid-gap: 24px; }
+  grid-gap: 24px;
+  margin: 16px 0; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
   .ds-card-grid.ds-card-grid-border .ds-card {
     box-shadow: var(--newtab-card-shadow); }
     .ds-card-grid.ds-card-grid-border .ds-card:hover {
       box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
       transition: box-shadow 150ms;
@@ -1866,35 +1869,35 @@ main {
   .ds-column-7 .ds-card-grid,
   .ds-column-8 .ds-card-grid {
     grid-template-columns: repeat(2, 1fr); }
   .ds-column-9 .ds-card-grid,
   .ds-column-10 .ds-card-grid,
   .ds-column-11 .ds-card-grid,
   .ds-column-12 .ds-card-grid {
     grid-template-columns: repeat(4, 1fr); }
-    .ds-column-9 .ds-card-grid .meta .title,
-    .ds-column-10 .ds-card-grid .meta .title,
-    .ds-column-11 .ds-card-grid .meta .title,
-    .ds-column-12 .ds-card-grid .meta .title {
-      font-size: 14px;
-      line-height: 20px;
-      max-height: 2.85714em;
-      overflow: hidden; }
     .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-3 {
       grid-template-columns: repeat(3, 1fr); }
       .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-3 .title {
         font-size: 17px;
         line-height: 24px; }
+    .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-4 .title {
+      font-size: 14px;
+      line-height: 20px;
+      max-height: 4.28571em;
+      overflow: hidden; }
 
 .ds-hero .img {
   background-color: var(--newtab-card-placeholder-color);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
@@ -1913,30 +1916,26 @@ main {
   overflow: hidden;
   margin: 4px 0 8px; }
 
 .ds-hero .ds-list {
   border-top: 0;
   padding-top: 0; }
 
 .ds-hero .ds-card {
-  border: 0; }
+  border: 0;
+  padding-bottom: 20px; }
   .ds-hero .ds-card p {
     margin-top: 4px; }
   .ds-hero .ds-card:hover {
     border: 0;
     box-shadow: none;
     border-radius: 0; }
   .ds-hero .ds-card .meta {
     padding: 0; }
-    .ds-hero .ds-card .meta .title {
-      font-size: 14px;
-      line-height: 20px;
-      max-height: 2.85714em;
-      overflow: hidden; }
   .ds-hero .ds-card .img-wrapper {
     margin: 0 0 12px; }
 
 .ds-hero .img-wrapper {
   margin: 0 0 12px; }
 
 .ds-hero .wrapper {
   color: #737373;
@@ -1963,22 +1962,21 @@ main {
     flex-direction: column;
     justify-content: space-between; }
     .ds-hero .wrapper .meta header {
       font-size: 22px;
       line-height: 28px;
       max-height: 5.09091em;
       overflow: hidden;
       color: #0C0C0D; }
-    .ds-hero .wrapper .meta p {
-      font-size: 14px; }
-      .ds-hero .wrapper .meta p.context {
-        color: #008EA4; }
+    .ds-hero .wrapper .meta .context {
+      color: #008EA4; }
     .ds-hero .wrapper .meta .source {
       font-size: 13px;
+      color: #005A71;
       margin-bottom: 0;
       overflow-x: hidden;
       text-overflow: ellipsis; }
 
 .ds-column-5 .ds-hero .wrapper,
 .ds-column-6 .ds-hero .wrapper,
 .ds-column-7 .ds-hero .wrapper,
 .ds-column-8 .ds-hero .wrapper {
@@ -2015,76 +2013,87 @@ main {
   grid-column-gap: 24px; }
 
 .ds-column-9 .ds-hero,
 .ds-column-10 .ds-hero,
 .ds-column-11 .ds-hero,
 .ds-column-12 .ds-hero {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 24px;
-  padding: 20px 0; }
+  grid-column-gap: 24px; }
   .ds-column-9 .ds-hero.ds-hero-border,
   .ds-column-10 .ds-hero.ds-hero-border,
   .ds-column-11 .ds-hero.ds-hero-border,
   .ds-column-12 .ds-hero.ds-hero-border {
-    border-top: 1px solid var(--newtab-border-secondary-color); }
+    border-top: 1px solid var(--newtab-border-secondary-color);
+    padding: 20px 0; }
     .ds-column-9 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-10 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-11 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-12 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2) {
       border-bottom: 1px solid var(--newtab-border-secondary-color);
       margin-bottom: 20px; }
   .ds-column-9 .ds-hero .wrapper,
   .ds-column-10 .ds-hero .wrapper,
   .ds-column-11 .ds-hero .wrapper,
   .ds-column-12 .ds-hero .wrapper {
     border-top: 0;
     border-bottom: 0;
     margin: 0;
-    padding: 0; }
+    padding: 0 0 20px;
+    display: flex;
+    flex-direction: column; }
     .ds-column-9 .ds-hero .wrapper .img-wrapper,
     .ds-column-10 .ds-hero .wrapper .img-wrapper,
     .ds-column-11 .ds-hero .wrapper .img-wrapper,
     .ds-column-12 .ds-hero .wrapper .img-wrapper {
       margin: 0; }
     .ds-column-9 .ds-hero .wrapper .img,
     .ds-column-10 .ds-hero .wrapper .img,
     .ds-column-11 .ds-hero .wrapper .img,
     .ds-column-12 .ds-hero .wrapper .img {
       margin-bottom: 16px;
       height: 0;
       padding-top: 50%; }
     .ds-column-9 .ds-hero .wrapper .meta,
     .ds-column-10 .ds-hero .wrapper .meta,
     .ds-column-11 .ds-hero .wrapper .meta,
     .ds-column-12 .ds-hero .wrapper .meta {
+      flex-grow: 1;
       display: flex;
       padding: 0 24px 0 0; }
       .ds-column-9 .ds-hero .wrapper .meta header,
       .ds-column-10 .ds-hero .wrapper .meta header,
       .ds-column-11 .ds-hero .wrapper .meta header,
       .ds-column-12 .ds-hero .wrapper .meta header {
         font-size: 22px;
         line-height: 28px;
         max-height: 3.81818em;
         overflow: hidden;
         margin: 0 0 8px; }
       .ds-column-9 .ds-hero .wrapper .meta .source,
       .ds-column-10 .ds-hero .wrapper .meta .source,
       .ds-column-11 .ds-hero .wrapper .meta .source,
       .ds-column-12 .ds-hero .wrapper .meta .source {
-        margin: 0; }
+        margin-bottom: 0; }
   .ds-column-9 .ds-hero .cards,
   .ds-column-10 .ds-hero .cards,
   .ds-column-11 .ds-hero .cards,
   .ds-column-12 .ds-hero .cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 24px; }
+    .ds-column-9 .ds-hero .cards .title,
+    .ds-column-10 .ds-hero .cards .title,
+    .ds-column-11 .ds-hero .cards .title,
+    .ds-column-12 .ds-hero .cards .title {
+      font-size: 14px;
+      line-height: 20px;
+      max-height: 4.28571em;
+      overflow: hidden; }
 
 .ds-hr {
   border: 0;
   height: 0;
   border-top: 1px solid var(--newtab-border-secondary-color); }
 
 .ds-list {
   display: grid;
@@ -2092,17 +2101,17 @@ main {
   grid-column-gap: 24px;
   padding-inline-start: 0; }
   .ds-list:not(.ds-list-full-width) .ds-list-item {
     font-size: 14px;
     line-height: 20px; }
   .ds-list:not(.ds-list-full-width) .ds-list-item-title {
     font-size: 14px;
     line-height: 20px;
-    max-height: 2.85714em;
+    max-height: 4.28571em;
     overflow: hidden; }
   .ds-list:not(.ds-list-full-width) .ds-list-image {
     min-width: 72px;
     width: 72px; }
   .ds-column-5 .ds-list:not(.ds-list-full-width),
   .ds-column-6 .ds-list:not(.ds-list-full-width),
   .ds-column-7 .ds-list:not(.ds-list-full-width),
   .ds-column-8 .ds-list:not(.ds-list-full-width) {
@@ -2171,17 +2180,17 @@ main {
 
 .ds-list-full-width .ds-list-item {
   font-size: 17px;
   line-height: 24px; }
 
 .ds-list-full-width .ds-list-item-title {
   font-size: 17px;
   line-height: 24px;
-  max-height: 2.82353em;
+  max-height: 4.23529em;
   overflow: hidden; }
 
 .ds-list-full-width .ds-list-image {
   min-width: 144px;
   width: 144px; }
 
 .ds-list-item {
   display: block;
@@ -2202,17 +2211,17 @@ main {
     line-height: 20px;
     margin: 8px 0 0; }
   .ds-list-item .ds-list-item-info,
   .ds-list-item .ds-list-item-context {
     font-size: 14px;
     line-height: 20px;
     max-height: 1.42857em;
     overflow: hidden;
-    color: #737373;
+    color: #005A71;
     font-size: 13px;
     text-overflow: ellipsis; }
   .ds-list-item .ds-list-item-title {
     font-weight: 600;
     margin-bottom: 4px; }
   .ds-list-item .ds-list-item-text {
     display: flex;
     flex-direction: column; }
@@ -2376,63 +2385,63 @@ main {
     flex-direction: column;
     flex-grow: 1;
     padding: 16px; }
     .ds-card .meta .info-wrap {
       flex-grow: 1; }
     .ds-card .meta .title {
       font-size: 17px;
       line-height: 24px;
-      max-height: 2.82353em;
+      max-height: 4.23529em;
       overflow: hidden;
       font-weight: 600; }
     .ds-card .meta .excerpt {
       font-size: 14px;
       line-height: 20px;
-      max-height: 5.71429em;
+      max-height: 4.28571em;
       overflow: hidden; }
     .ds-card .meta .context,
     .ds-card .meta .source {
-      font-size: 13px; }
+      font-size: 13px;
+      color: #005A71; }
   .ds-card header {
     line-height: 24px;
     font-size: 17px;
     color: #0C0C0D; }
   .ds-card p {
     font-size: 14px;
     line-height: 20px;
     color: #737373;
     margin: 8px 0 0; }
 
 .ds-message {
   margin: 8px 0 0; }
   .ds-message .title {
     display: flex;
     align-items: center; }
-    .ds-message .title img {
+    .ds-message .title .glyph {
       width: 16px;
       height: 16px;
-      margin: 0 6px 0 0; }
-    .ds-message .title span {
-      line-height: 24px;
-      font-size: 17px;
-      color: #0C0C0D;
-      font-weight: 600; }
-  .ds-message .subtitle {
-    line-height: 20px;
-    font-size: 14px;
-    color: #737373;
-    margin: 0; }
-    .ds-message .subtitle span::after {
-      content: ' '; }
-    .ds-message .subtitle a:hover,
-    .ds-message .subtitle a:focus {
-      text-decoration: underline; }
-  .ds-message .ds-hr {
-    margin: 16px 0 8px; }
+      margin: 0 6px 0 0;
+      -moz-context-properties: fill;
+      fill: var(--newtab-icon-secondary-color);
+      background-position: center center;
+      background-size: 16px;
+      background-repeat: no-repeat; }
+    .ds-message .title .title-text {
+      line-height: 20px;
+      font-size: 13px;
+      color: #737373;
+      font-weight: 600;
+      padding-right: 12px; }
+    .ds-message .title .link {
+      line-height: 20px;
+      font-size: 13px; }
+      .ds-message .title .link:hover, .ds-message .title .link:focus {
+        text-decoration: underline; }
 
 .ASRouterButton {
   font-weight: 600;
   font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
   border: 0;
   font-family: inherit;
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -1829,25 +1829,28 @@ main {
   .discovery-stream.ds-layout .ds-column-1 {
     grid-column-start: auto;
     grid-column-end: span 1; }
   .discovery-stream.ds-layout .ds-column-grid {
     display: grid;
     grid-row-gap: var(--gridRowGap); }
 
 .ds-header {
-  font-size: 17px;
+  color: #737373;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 24px;
-  color: #0C0C0D;
-  margin: 24px 0 12px; }
+  line-height: 20px;
+  margin: 8px 0; }
+  .ds-header .icon {
+    fill: var(--newtab-text-secondary-color); }
 
 .ds-card-grid {
   display: grid;
-  grid-gap: 24px; }
+  grid-gap: 24px;
+  margin: 16px 0; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
   .ds-card-grid.ds-card-grid-border .ds-card {
     box-shadow: var(--newtab-card-shadow); }
     .ds-card-grid.ds-card-grid-border .ds-card:hover {
       box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
       transition: box-shadow 150ms;
@@ -1863,35 +1866,35 @@ main {
   .ds-column-7 .ds-card-grid,
   .ds-column-8 .ds-card-grid {
     grid-template-columns: repeat(2, 1fr); }
   .ds-column-9 .ds-card-grid,
   .ds-column-10 .ds-card-grid,
   .ds-column-11 .ds-card-grid,
   .ds-column-12 .ds-card-grid {
     grid-template-columns: repeat(4, 1fr); }
-    .ds-column-9 .ds-card-grid .meta .title,
-    .ds-column-10 .ds-card-grid .meta .title,
-    .ds-column-11 .ds-card-grid .meta .title,
-    .ds-column-12 .ds-card-grid .meta .title {
-      font-size: 14px;
-      line-height: 20px;
-      max-height: 2.85714em;
-      overflow: hidden; }
     .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-3,
     .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-3 {
       grid-template-columns: repeat(3, 1fr); }
       .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-3 .title,
       .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-3 .title {
         font-size: 17px;
         line-height: 24px; }
+    .ds-column-9 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-10 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-11 .ds-card-grid.ds-card-grid-divisible-by-4 .title,
+    .ds-column-12 .ds-card-grid.ds-card-grid-divisible-by-4 .title {
+      font-size: 14px;
+      line-height: 20px;
+      max-height: 4.28571em;
+      overflow: hidden; }
 
 .ds-hero .img {
   background-color: var(--newtab-card-placeholder-color);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
@@ -1910,30 +1913,26 @@ main {
   overflow: hidden;
   margin: 4px 0 8px; }
 
 .ds-hero .ds-list {
   border-top: 0;
   padding-top: 0; }
 
 .ds-hero .ds-card {
-  border: 0; }
+  border: 0;
+  padding-bottom: 20px; }
   .ds-hero .ds-card p {
     margin-top: 4px; }
   .ds-hero .ds-card:hover {
     border: 0;
     box-shadow: none;
     border-radius: 0; }
   .ds-hero .ds-card .meta {
     padding: 0; }
-    .ds-hero .ds-card .meta .title {
-      font-size: 14px;
-      line-height: 20px;
-      max-height: 2.85714em;
-      overflow: hidden; }
   .ds-hero .ds-card .img-wrapper {
     margin: 0 0 12px; }
 
 .ds-hero .img-wrapper {
   margin: 0 0 12px; }
 
 .ds-hero .wrapper {
   color: #737373;
@@ -1960,22 +1959,21 @@ main {
     flex-direction: column;
     justify-content: space-between; }
     .ds-hero .wrapper .meta header {
       font-size: 22px;
       line-height: 28px;
       max-height: 5.09091em;
       overflow: hidden;
       color: #0C0C0D; }
-    .ds-hero .wrapper .meta p {
-      font-size: 14px; }
-      .ds-hero .wrapper .meta p.context {
-        color: #008EA4; }
+    .ds-hero .wrapper .meta .context {
+      color: #008EA4; }
     .ds-hero .wrapper .meta .source {
       font-size: 13px;
+      color: #005A71;
       margin-bottom: 0;
       overflow-x: hidden;
       text-overflow: ellipsis; }
 
 .ds-column-5 .ds-hero .wrapper,
 .ds-column-6 .ds-hero .wrapper,
 .ds-column-7 .ds-hero .wrapper,
 .ds-column-8 .ds-hero .wrapper {
@@ -2012,76 +2010,87 @@ main {
   grid-column-gap: 24px; }
 
 .ds-column-9 .ds-hero,
 .ds-column-10 .ds-hero,
 .ds-column-11 .ds-hero,
 .ds-column-12 .ds-hero {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 24px;
-  padding: 20px 0; }
+  grid-column-gap: 24px; }
   .ds-column-9 .ds-hero.ds-hero-border,
   .ds-column-10 .ds-hero.ds-hero-border,
   .ds-column-11 .ds-hero.ds-hero-border,
   .ds-column-12 .ds-hero.ds-hero-border {
-    border-top: 1px solid var(--newtab-border-secondary-color); }
+    border-top: 1px solid var(--newtab-border-secondary-color);
+    padding: 20px 0; }
     .ds-column-9 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-10 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-11 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2),
     .ds-column-12 .ds-hero.ds-hero-border .ds-card:nth-child(-n+2) {
       border-bottom: 1px solid var(--newtab-border-secondary-color);
       margin-bottom: 20px; }
   .ds-column-9 .ds-hero .wrapper,
   .ds-column-10 .ds-hero .wrapper,
   .ds-column-11 .ds-hero .wrapper,
   .ds-column-12 .ds-hero .wrapper {
     border-top: 0;
     border-bottom: 0;
     margin: 0;
-    padding: 0; }
+    padding: 0 0 20px;
+    display: flex;
+    flex-direction: column; }
     .ds-column-9 .ds-hero .wrapper .img-wrapper,
     .ds-column-10 .ds-hero .wrapper .img-wrapper,
     .ds-column-11 .ds-hero .wrapper .img-wrapper,
     .ds-column-12 .ds-hero .wrapper .img-wrapper {
       margin: 0; }
     .ds-column-9 .ds-hero .wrapper .img,
     .ds-column-10 .ds-hero .wrapper .img,
     .ds-column-11 .ds-hero .wrapper .img,
     .ds-column-12 .ds-hero .wrapper .img {
       margin-bottom: 16px;
       height: 0;
       padding-top: 50%; }
     .ds-column-9 .ds-hero .wrapper .meta,
     .ds-column-10 .ds-hero .wrapper .meta,
     .ds-column-11 .ds-hero .wrapper .meta,
     .ds-column-12 .ds-hero .wrapper .meta {
+      flex-grow: 1;
       display: flex;
       padding: 0 24px 0 0; }
       .ds-column-9 .ds-hero .wrapper .meta header,
       .ds-column-10 .ds-hero .wrapper .meta header,
       .ds-column-11 .ds-hero .wrapper .meta header,
       .ds-column-12 .ds-hero .wrapper .meta header {
         font-size: 22px;
         line-height: 28px;
         max-height: 3.81818em;
         overflow: hidden;
         margin: 0 0 8px; }
       .ds-column-9 .ds-hero .wrapper .meta .source,
       .ds-column-10 .ds-hero .wrapper .meta .source,
       .ds-column-11 .ds-hero .wrapper .meta .source,
       .ds-column-12 .ds-hero .wrapper .meta .source {
-        margin: 0; }
+        margin-bottom: 0; }
   .ds-column-9 .ds-hero .cards,
   .ds-column-10 .ds-hero .cards,
   .ds-column-11 .ds-hero .cards,
   .ds-column-12 .ds-hero .cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 24px; }
+    .ds-column-9 .ds-hero .cards .title,
+    .ds-column-10 .ds-hero .cards .title,
+    .ds-column-11 .ds-hero .cards .title,
+    .ds-column-12 .ds-hero .cards .title {
+      font-size: 14px;
+      line-height: 20px;
+      max-height: 4.28571em;
+      overflow: hidden; }
 
 .ds-hr {
   border: 0;
   height: 0;
   border-top: 1px solid var(--newtab-border-secondary-color); }
 
 .ds-list {
   display: grid;
@@ -2089,17 +2098,17 @@ main {
   grid-column-gap: 24px;
   padding-inline-start: 0; }
   .ds-list:not(.ds-list-full-width) .ds-list-item {
     font-size: 14px;
     line-height: 20px; }
   .ds-list:not(.ds-list-full-width) .ds-list-item-title {
     font-size: 14px;
     line-height: 20px;
-    max-height: 2.85714em;
+    max-height: 4.28571em;
     overflow: hidden; }
   .ds-list:not(.ds-list-full-width) .ds-list-image {
     min-width: 72px;
     width: 72px; }
   .ds-column-5 .ds-list:not(.ds-list-full-width),
   .ds-column-6 .ds-list:not(.ds-list-full-width),
   .ds-column-7 .ds-list:not(.ds-list-full-width),
   .ds-column-8 .ds-list:not(.ds-list-full-width) {
@@ -2168,17 +2177,17 @@ main {
 
 .ds-list-full-width .ds-list-item {
   font-size: 17px;
   line-height: 24px; }
 
 .ds-list-full-width .ds-list-item-title {
   font-size: 17px;
   line-height: 24px;
-  max-height: 2.82353em;
+  max-height: 4.23529em;
   overflow: hidden; }
 
 .ds-list-full-width .ds-list-image {
   min-width: 144px;
   width: 144px; }
 
 .ds-list-item {
   display: block;
@@ -2199,17 +2208,17 @@ main {
     line-height: 20px;
     margin: 8px 0 0; }
   .ds-list-item .ds-list-item-info,
   .ds-list-item .ds-list-item-context {
     font-size: 14px;
     line-height: 20px;
     max-height: 1.42857em;
     overflow: hidden;
-    color: #737373;
+    color: #005A71;
     font-size: 13px;
     text-overflow: ellipsis; }
   .ds-list-item .ds-list-item-title {
     font-weight: 600;
     margin-bottom: 4px; }
   .ds-list-item .ds-list-item-text {
     display: flex;
     flex-direction: column; }
@@ -2373,63 +2382,63 @@ main {
     flex-direction: column;
     flex-grow: 1;
     padding: 16px; }
     .ds-card .meta .info-wrap {
       flex-grow: 1; }
     .ds-card .meta .title {
       font-size: 17px;
       line-height: 24px;
-      max-height: 2.82353em;
+      max-height: 4.23529em;
       overflow: hidden;
       font-weight: 600; }
     .ds-card .meta .excerpt {
       font-size: 14px;
       line-height: 20px;
-      max-height: 5.71429em;
+      max-height: 4.28571em;
       overflow: hidden; }
     .ds-card .meta .context,
     .ds-card .meta .source {
-      font-size: 13px; }
+      font-size: 13px;
+      color: #005A71; }
   .ds-card header {
     line-height: 24px;
     font-size: 17px;
     color: #0C0C0D; }
   .ds-card p {
     font-size: 14px;
     line-height: 20px;
     color: #737373;
     margin: 8px 0 0; }
 
 .ds-message {
   margin: 8px 0 0; }
   .ds-message .title {
     display: flex;
     align-items: center; }
-    .ds-message .title img {
+    .ds-message .title .glyph {
       width: 16px;
       height: 16px;
-      margin: 0 6px 0 0; }
-    .ds-message .title span {
-      line-height: 24px;
-      font-size: 17px;
-      color: #0C0C0D;
-      font-weight: 600; }
-  .ds-message .subtitle {
-    line-height: 20px;
-    font-size: 14px;
-    color: #737373;
-    margin: 0; }
-    .ds-message .subtitle span::after {
-      content: ' '; }
-    .ds-message .subtitle a:hover,
-    .ds-message .subtitle a:focus {
-      text-decoration: underline; }
-  .ds-message .ds-hr {
-    margin: 16px 0 8px; }
+      margin: 0 6px 0 0;
+      -moz-context-properties: fill;
+      fill: var(--newtab-icon-secondary-color);
+      background-position: center center;
+      background-size: 16px;
+      background-repeat: no-repeat; }
+    .ds-message .title .title-text {
+      line-height: 20px;
+      font-size: 13px;
+      color: #737373;
+      font-weight: 600;
+      padding-right: 12px; }
+    .ds-message .title .link {
+      line-height: 20px;
+      font-size: 13px; }
+      .ds-message .title .link:hover, .ds-message .title .link:focus {
+        text-decoration: underline; }
 
 .ASRouterButton {
   font-weight: 600;
   font-size: 14px;
   white-space: nowrap;
   border-radius: 2px;
   border: 0;
   font-family: inherit;
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -7288,47 +7288,34 @@ CardGrid_CardGrid.defaultProps = {
 var external_ReactRedux_ = __webpack_require__(24);
 
 // CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx
 
 
 
 class DSMessage_DSMessage extends external_React_default.a.PureComponent {
   render() {
-    let hasSubtitleAndOrLink = this.props.link_text && this.props.link_url;
-    hasSubtitleAndOrLink = hasSubtitleAndOrLink || this.props.subtitle;
-
     return external_React_default.a.createElement(
       "div",
       { className: "ds-message" },
-      this.props.title && external_React_default.a.createElement(
+      external_React_default.a.createElement(
         "header",
         { className: "title" },
-        this.props.icon && external_React_default.a.createElement("img", { src: this.props.icon }),
-        external_React_default.a.createElement(
+        this.props.icon && external_React_default.a.createElement("div", { className: "glyph", style: { backgroundImage: `url(${this.props.icon})` } }),
+        this.props.title && external_React_default.a.createElement(
           "span",
-          null,
+          { className: "title-text" },
           this.props.title
-        )
-      ),
-      hasSubtitleAndOrLink && external_React_default.a.createElement(
-        "p",
-        { className: "subtitle" },
-        this.props.subtitle && external_React_default.a.createElement(
-          "span",
-          null,
-          this.props.subtitle
         ),
         this.props.link_text && this.props.link_url && external_React_default.a.createElement(
           SafeAnchor_SafeAnchor,
-          { url: this.props.link_url },
+          { className: "link", url: this.props.link_url },
           this.props.link_text
         )
-      ),
-      external_React_default.a.createElement("hr", { className: "ds-hr" })
+      )
     );
   }
 }
 // CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/List/List.jsx