Bug 1524632 - Design tweaks for discovery stream. r=Mardak a=lizzard
authorGavin Lazar Suntop <gavin@gsuntop.com>
Thu, 14 Feb 2019 19:01:16 +0100
changeset 515951 24c97a1ec2485ab1ca019cc6ada2036451bce287
parent 515950 0f8d776acfbf488e9c357b923f0b401cbc368713
child 515952 e320050c6f958301665225d0e63d09e6df73eb91
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
bugs1524632
milestone66.0
Bug 1524632 - Design tweaks for discovery stream. r=Mardak a=lizzard
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/Hero/Hero.jsx
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/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
browser/components/newtab/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.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
@@ -24,10 +24,10 @@
   }
 }
 
 .ds-header {
   font-size: 17px;
   font-weight: 600;
   line-height: 24px;
   color: $grey-90;
-  margin: 16px 0;
+  margin: 24px 0 12px;
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
@@ -1,10 +1,10 @@
 $col4-header-line-height: 20;
-$col4-header-font-size: 13;
+$col4-header-font-size: 14;
 
 .ds-card-grid {
   display: grid;
   grid-gap: 24px;
 
   .ds-card {
     background: $white;
     border-radius: 4px;
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -1,12 +1,12 @@
 // Type sizes
 $header-font-size: 17;
 $header-line-height: 24;
-$excerpt-font-size: 13;
+$excerpt-font-size: 14;
 $excerpt-line-height: 20;
 
 .ds-card {
   display: flex;
   flex-direction: column;
 
   &:hover {
     header {
@@ -45,28 +45,29 @@
       @include limit-visibile-lines(2, $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);
     }
+
+    .context,
+    .source {
+      font-size: 13px;
+    }
   }
 
   header {
     line-height: $header-line-height * 1px;
     font-size: $header-font-size * 1px;
     color: $grey-90;
 
   }
 
   p {
     font-size: $excerpt-font-size * 1px;
     line-height: $excerpt-line-height * 1px;
     color: $grey-50;
     margin: 8px 0 0;
   }
-
-  .context {
-    color: $teal-70;
-  }
 }
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
@@ -69,17 +69,17 @@ export class Hero extends React.PureComp
         <div className="ds-header">{this.props.title}</div>
         <div className={`ds-hero ds-hero-${this.props.border}`}>
           <a href={heroRec.url} className="wrapper" onClick={this.onLinkClick}>
             <div className="img-wrapper">
               <div className="img" style={{backgroundImage: `url(${heroRec.image_src})`}} />
             </div>
             <div className="meta">
               <header>{heroRec.title}</header>
-              <p>{heroRec.excerpt}</p>
+              <p className="excerpt">{heroRec.excerpt}</p>
               {heroRec.context ? (
                 <p className="context">{heroRec.context}</p>
               ) : (
                 <p className="source">{heroRec.domain}</p>
               )}
             </div>
           </a>
           <div className={`${this.props.subComponentType}`}>
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
@@ -1,32 +1,42 @@
-$card-header-in-hero-font-size: 13;
+$card-header-in-hero-font-size: 14;
 $card-header-in-hero-line-height: 20;
 
 .ds-hero {
   .img {
     @include image-as-background;
   }
 
   header {
     font-weight: 600;
   }
 
   p {
     line-height: 1.538;
+    margin: 8px 0;
+  }
+
+  .excerpt {
+    @include limit-visibile-lines(4, 23, 15);
+    margin: 4px 0 8px;
   }
 
   .ds-list {
     border-top: 0;
     padding-top: 0;
   }
 
   .ds-card {
     border: 0;
 
+    p {
+      margin-top: 4px;
+    }
+
     &:hover {
       border: 0;
       box-shadow: none;
       border-radius: 0;
     }
 
     .meta {
       padding: 0;
@@ -45,25 +55,25 @@
   .img-wrapper {
     margin: 0 0 12px;
   }
 
   // "1/3 width layout" (aka "Mobile First")
   .wrapper {
     color: $grey-50;
     display: block;
-    margin: 16px 0 24px;
-    padding: 24px 0;
+    margin: 12px 0 16px;
+    padding: 16px 0;
     border-top: $border-secondary;
     border-bottom: $border-secondary;
 
     @at-root .ds-hero-no-border .wrapper {
       border-top: 0;
       border-bottom: 0;
-      padding: 0;
+      padding: 0 0 8px;
     }
 
     &:hover .meta header {
       color: $blue-60;
     }
 
     &:active .meta header {
       color: $blue-70;
@@ -75,30 +85,33 @@
 
     .img {
       height: 0;
       padding-top: 50%; // 2:1 aspect ratio
     }
 
     .meta {
       header {
-        font-size: 22px;
+        @include limit-visibile-lines(2, 28, 22);
         color: $grey-90;
       }
 
       p {
-        font-size: 13px;
+        font-size: 14px;
 
         &.context {
           color: $teal-70;
         }
       }
 
       .source {
+        font-size: 13px;
         margin-bottom: 0;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
 
   // "2/3 width layout"
   .ds-column-5 &,
   .ds-column-6 &,
   .ds-column-7 &,
@@ -152,21 +165,21 @@
         padding-top: 50%; // 2:1 aspect ratio
       }
 
       .meta {
         width: 33%;
         padding: 0 24px 0 0;
 
         header {
-          font-size: 22px;
+          @include limit-visibile-lines(6, 28, 22);
+          margin: 0 0 4px;
         }
 
         p {
-          font-size: 15px;
           line-height: 1.6;
         }
       }
     }
 
     .cards {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -1,11 +1,11 @@
 // Type sizes
 $bordered-spacing: 16px;
-$item-font-size: 13;
+$item-font-size: 14;
 $item-image-size: 72px;
 $item-line-height: 20;
 
 // XXX this is gross, and attaches the bottom-border to the item above.
 // Ideally, we'd attach the top-border to the item that needs it.
 // Unfortunately the border needs to go _above_ the row gap as currently
 // set up, which means that some refactoring will be required to do this.
 @mixin bottom-border-except-last-grid-row($columns) {
@@ -162,28 +162,28 @@
 
     display: flex;
     justify-content: space-between;
   }
 
   .ds-list-item-excerpt {
     @include limit-visibile-lines(2, $item-line-height, $item-font-size);
     color: var(--newtab-text-secondary-color);
-    margin-bottom: 8px;
+    margin: 4px 0 8px;
   }
 
   .ds-list-item-info {
     @include limit-visibile-lines(1, $item-line-height, $item-font-size);
     color: var(--newtab-text-secondary-color);
     text-overflow: ellipsis;
   }
 
   .ds-list-item-title {
     font-weight: 600;
-    margin-bottom: 8px;
+    margin-bottom: 4px;
   }
 
   .ds-list-item-text {
     display: flex;
     flex-direction: column;
   }
 
   .ds-list-image {
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
@@ -1,12 +1,12 @@
 .ds-navigation {
   line-height: 32px;
   padding: 4px 0;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
 
   &.ds-navigation-centered {
     text-align: center;
   }
 
   &.ds-navigation-right-aligned {
     text-align: end;
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss
@@ -1,17 +1,18 @@
 .ds-section-title {
   text-align: center;
+  margin-top: 24px;
 
   .title {
     line-height: 48px;
     font-size: 36px;
     font-weight: 300;
     color: $grey-90;
   }
 
   .subtitle {
     line-height: 24px;
-    font-size: 15px;
+    font-size: 14px;
     color: $grey-50;
     margin-top: 4px;
   }
 }
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -1827,17 +1827,17 @@ main {
     display: grid;
     grid-row-gap: var(--gridRowGap); }
 
 .ds-header {
   font-size: 17px;
   font-weight: 600;
   line-height: 24px;
   color: #0C0C0D;
-  margin: 16px 0; }
+  margin: 24px 0 12px; }
 
 .ds-card-grid {
   display: grid;
   grid-gap: 24px; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
   .ds-card-grid.ds-card-grid-border .ds-card {
@@ -1861,19 +1861,19 @@ main {
   .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: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 3.07692em;
+      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,
@@ -1889,70 +1889,86 @@ main {
   background-size: cover;
   border-radius: 4px;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
 
 .ds-hero header {
   font-weight: 600; }
 
 .ds-hero p {
-  line-height: 1.538; }
+  line-height: 1.538;
+  margin: 8px 0; }
+
+.ds-hero .excerpt {
+  font-size: 15px;
+  line-height: 23px;
+  max-height: 6.13333em;
+  overflow: hidden;
+  margin: 4px 0 8px; }
 
 .ds-hero .ds-list {
   border-top: 0;
   padding-top: 0; }
 
 .ds-hero .ds-card {
   border: 0; }
+  .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: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 3.07692em;
+      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;
   display: block;
-  margin: 16px 0 24px;
-  padding: 24px 0;
+  margin: 12px 0 16px;
+  padding: 16px 0;
   border-top: 1px solid var(--newtab-border-secondary-color);
   border-bottom: 1px solid var(--newtab-border-secondary-color); }
   .ds-hero-no-border .wrapper {
     border-top: 0;
     border-bottom: 0;
-    padding: 0; }
+    padding: 0 0 8px; }
   .ds-hero .wrapper:hover .meta header {
     color: #0060DF; }
   .ds-hero .wrapper:active .meta header {
     color: #003EAA; }
   .ds-hero .wrapper .img-wrapper {
     width: 100%; }
   .ds-hero .wrapper .img {
     height: 0;
     padding-top: 50%; }
   .ds-hero .wrapper .meta header {
     font-size: 22px;
+    line-height: 28px;
+    max-height: 2.54545em;
+    overflow: hidden;
     color: #0C0C0D; }
   .ds-hero .wrapper .meta p {
-    font-size: 13px; }
+    font-size: 14px; }
     .ds-hero .wrapper .meta p.context {
       color: #008EA4; }
   .ds-hero .wrapper .meta .source {
-    margin-bottom: 0; }
+    font-size: 13px;
+    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 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 24px; }
@@ -2008,22 +2024,25 @@ main {
   .ds-column-11 .ds-hero .wrapper .meta,
   .ds-column-12 .ds-hero .wrapper .meta {
     width: 33%;
     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; }
+      font-size: 22px;
+      line-height: 28px;
+      max-height: 7.63636em;
+      overflow: hidden;
+      margin: 0 0 4px; }
     .ds-column-9 .ds-hero .wrapper .meta p,
     .ds-column-10 .ds-hero .wrapper .meta p,
     .ds-column-11 .ds-hero .wrapper .meta p,
     .ds-column-12 .ds-hero .wrapper .meta p {
-      font-size: 15px;
       line-height: 1.6; }
 
 .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(4, 1fr);
@@ -2035,22 +2054,22 @@ main {
   border-top: 1px solid var(--newtab-border-secondary-color); }
 
 .ds-list {
   display: grid;
   grid-row-gap: 24px;
   grid-column-gap: 24px;
   padding-inline-start: 0; }
   .ds-list:not(.ds-list-full-width) .ds-list-item {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px; }
   .ds-list:not(.ds-list-full-width) .ds-list-item-title {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 3.07692em;
+    max-height: 2.85714em;
     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) {
@@ -2066,27 +2085,27 @@ main {
     display: none; }
   .ds-list a {
     color: #0C0C0D; }
 
 .ds-list-numbers .ds-list-item {
   counter-increment: list; }
 
 .ds-list-numbers .ds-list-item-link {
-  padding-inline-start: 42.5px; }
+  padding-inline-start: 41px; }
   .ds-list-numbers .ds-list-item-link::before {
     background-color: var(--newtab-link-secondary-color);
     border-radius: 32px;
     color: #FFF;
     content: counter(list);
     font-size: 17px;
     height: 32px;
     line-height: 32px;
-    margin-inline-start: -42.5px;
-    margin-top: 3.5px;
+    margin-inline-start: -41px;
+    margin-top: 3px;
     position: absolute;
     text-align: center;
     width: 32px; }
   .ds-list-numbers .ds-list-item-link:hover::before {
     background-color: var(--newtab-link-primary-color); }
   .ds-list-numbers .ds-list-item-link:active::before {
     background-color: #003EAA; }
 
@@ -2134,54 +2153,54 @@ main {
 .ds-list-item {
   display: block;
   text-align: start; }
   .ds-list-item .ds-list-item-link {
     mix-blend-mode: normal;
     display: flex;
     justify-content: space-between; }
   .ds-list-item .ds-list-item-excerpt {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 3.07692em;
+    max-height: 2.85714em;
     overflow: hidden;
     color: var(--newtab-text-secondary-color);
-    margin-bottom: 8px; }
+    margin: 4px 0 8px; }
   .ds-list-item .ds-list-item-info {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 1.53846em;
+    max-height: 1.42857em;
     overflow: hidden;
     color: var(--newtab-text-secondary-color);
     text-overflow: ellipsis; }
   .ds-list-item .ds-list-item-title {
     font-weight: 600;
-    margin-bottom: 8px; }
+    margin-bottom: 4px; }
   .ds-list-item .ds-list-item-text {
     display: flex;
     flex-direction: column; }
   .ds-list-item .ds-list-image {
     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);
     height: 72px;
-    margin-inline-start: 13px;
+    margin-inline-start: 14px;
     min-height: 72px; }
   .ds-list-item:hover .ds-list-item-title {
     color: var(--newtab-link-primary-color); }
   .ds-list-item:active .ds-list-item-title {
     color: #003EAA; }
 
 .ds-navigation {
   line-height: 32px;
   padding: 4px 0;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600; }
   .ds-navigation.ds-navigation-centered {
     text-align: center; }
   .ds-navigation.ds-navigation-right-aligned {
     text-align: end; }
   .ds-navigation ul {
     margin: 0;
     padding: 0; }
@@ -2198,25 +2217,26 @@ main {
       .ds-navigation ul li a:hover:active {
         border-bottom: 1px solid #003EAA; }
     .ds-navigation ul li a:active {
       color: #003EAA; }
   .ds-navigation .ds-header {
     margin-bottom: 8px; }
 
 .ds-section-title {
-  text-align: center; }
+  text-align: center;
+  margin-top: 24px; }
   .ds-section-title .title {
     line-height: 48px;
     font-size: 36px;
     font-weight: 300;
     color: #0C0C0D; }
   .ds-section-title .subtitle {
     line-height: 24px;
-    font-size: 15px;
+    font-size: 14px;
     color: #737373;
     margin-top: 4px; }
 
 .ds-top-sites .ds-header-title {
   vertical-align: middle; }
 
 .ds-top-sites .top-sites {
   padding: 0; }
@@ -2321,31 +2341,32 @@ main {
       flex-grow: 1; }
     .ds-card .meta .title {
       font-size: 17px;
       line-height: 24px;
       max-height: 2.82353em;
       overflow: hidden;
       font-weight: 600; }
     .ds-card .meta .excerpt {
-      font-size: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 6.15385em;
+      max-height: 5.71429em;
       overflow: hidden; }
+    .ds-card .meta .context,
+    .ds-card .meta .source {
+      font-size: 13px; }
   .ds-card header {
     line-height: 24px;
     font-size: 17px;
     color: #0C0C0D; }
   .ds-card p {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
     color: #737373;
     margin: 8px 0 0; }
-  .ds-card .context {
-    color: #008EA4; }
 
 .ds-message {
   margin: 8px 0 0; }
   .ds-message .title {
     display: flex;
     align-items: center; }
     .ds-message .title img {
       width: 16px;
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -1830,17 +1830,17 @@ main {
     display: grid;
     grid-row-gap: var(--gridRowGap); }
 
 .ds-header {
   font-size: 17px;
   font-weight: 600;
   line-height: 24px;
   color: #0C0C0D;
-  margin: 16px 0; }
+  margin: 24px 0 12px; }
 
 .ds-card-grid {
   display: grid;
   grid-gap: 24px; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
   .ds-card-grid.ds-card-grid-border .ds-card {
@@ -1864,19 +1864,19 @@ main {
   .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: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 3.07692em;
+      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,
@@ -1892,70 +1892,86 @@ main {
   background-size: cover;
   border-radius: 4px;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
 
 .ds-hero header {
   font-weight: 600; }
 
 .ds-hero p {
-  line-height: 1.538; }
+  line-height: 1.538;
+  margin: 8px 0; }
+
+.ds-hero .excerpt {
+  font-size: 15px;
+  line-height: 23px;
+  max-height: 6.13333em;
+  overflow: hidden;
+  margin: 4px 0 8px; }
 
 .ds-hero .ds-list {
   border-top: 0;
   padding-top: 0; }
 
 .ds-hero .ds-card {
   border: 0; }
+  .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: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 3.07692em;
+      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;
   display: block;
-  margin: 16px 0 24px;
-  padding: 24px 0;
+  margin: 12px 0 16px;
+  padding: 16px 0;
   border-top: 1px solid var(--newtab-border-secondary-color);
   border-bottom: 1px solid var(--newtab-border-secondary-color); }
   .ds-hero-no-border .wrapper {
     border-top: 0;
     border-bottom: 0;
-    padding: 0; }
+    padding: 0 0 8px; }
   .ds-hero .wrapper:hover .meta header {
     color: #0060DF; }
   .ds-hero .wrapper:active .meta header {
     color: #003EAA; }
   .ds-hero .wrapper .img-wrapper {
     width: 100%; }
   .ds-hero .wrapper .img {
     height: 0;
     padding-top: 50%; }
   .ds-hero .wrapper .meta header {
     font-size: 22px;
+    line-height: 28px;
+    max-height: 2.54545em;
+    overflow: hidden;
     color: #0C0C0D; }
   .ds-hero .wrapper .meta p {
-    font-size: 13px; }
+    font-size: 14px; }
     .ds-hero .wrapper .meta p.context {
       color: #008EA4; }
   .ds-hero .wrapper .meta .source {
-    margin-bottom: 0; }
+    font-size: 13px;
+    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 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 24px; }
@@ -2011,22 +2027,25 @@ main {
   .ds-column-11 .ds-hero .wrapper .meta,
   .ds-column-12 .ds-hero .wrapper .meta {
     width: 33%;
     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; }
+      font-size: 22px;
+      line-height: 28px;
+      max-height: 7.63636em;
+      overflow: hidden;
+      margin: 0 0 4px; }
     .ds-column-9 .ds-hero .wrapper .meta p,
     .ds-column-10 .ds-hero .wrapper .meta p,
     .ds-column-11 .ds-hero .wrapper .meta p,
     .ds-column-12 .ds-hero .wrapper .meta p {
-      font-size: 15px;
       line-height: 1.6; }
 
 .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(4, 1fr);
@@ -2038,22 +2057,22 @@ main {
   border-top: 1px solid var(--newtab-border-secondary-color); }
 
 .ds-list {
   display: grid;
   grid-row-gap: 24px;
   grid-column-gap: 24px;
   padding-inline-start: 0; }
   .ds-list:not(.ds-list-full-width) .ds-list-item {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px; }
   .ds-list:not(.ds-list-full-width) .ds-list-item-title {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 3.07692em;
+    max-height: 2.85714em;
     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) {
@@ -2069,27 +2088,27 @@ main {
     display: none; }
   .ds-list a {
     color: #0C0C0D; }
 
 .ds-list-numbers .ds-list-item {
   counter-increment: list; }
 
 .ds-list-numbers .ds-list-item-link {
-  padding-inline-start: 42.5px; }
+  padding-inline-start: 41px; }
   .ds-list-numbers .ds-list-item-link::before {
     background-color: var(--newtab-link-secondary-color);
     border-radius: 32px;
     color: #FFF;
     content: counter(list);
     font-size: 17px;
     height: 32px;
     line-height: 32px;
-    margin-inline-start: -42.5px;
-    margin-top: 3.5px;
+    margin-inline-start: -41px;
+    margin-top: 3px;
     position: absolute;
     text-align: center;
     width: 32px; }
   .ds-list-numbers .ds-list-item-link:hover::before {
     background-color: var(--newtab-link-primary-color); }
   .ds-list-numbers .ds-list-item-link:active::before {
     background-color: #003EAA; }
 
@@ -2137,54 +2156,54 @@ main {
 .ds-list-item {
   display: block;
   text-align: start; }
   .ds-list-item .ds-list-item-link {
     mix-blend-mode: normal;
     display: flex;
     justify-content: space-between; }
   .ds-list-item .ds-list-item-excerpt {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 3.07692em;
+    max-height: 2.85714em;
     overflow: hidden;
     color: var(--newtab-text-secondary-color);
-    margin-bottom: 8px; }
+    margin: 4px 0 8px; }
   .ds-list-item .ds-list-item-info {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 1.53846em;
+    max-height: 1.42857em;
     overflow: hidden;
     color: var(--newtab-text-secondary-color);
     text-overflow: ellipsis; }
   .ds-list-item .ds-list-item-title {
     font-weight: 600;
-    margin-bottom: 8px; }
+    margin-bottom: 4px; }
   .ds-list-item .ds-list-item-text {
     display: flex;
     flex-direction: column; }
   .ds-list-item .ds-list-image {
     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);
     height: 72px;
-    margin-inline-start: 13px;
+    margin-inline-start: 14px;
     min-height: 72px; }
   .ds-list-item:hover .ds-list-item-title {
     color: var(--newtab-link-primary-color); }
   .ds-list-item:active .ds-list-item-title {
     color: #003EAA; }
 
 .ds-navigation {
   line-height: 32px;
   padding: 4px 0;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600; }
   .ds-navigation.ds-navigation-centered {
     text-align: center; }
   .ds-navigation.ds-navigation-right-aligned {
     text-align: end; }
   .ds-navigation ul {
     margin: 0;
     padding: 0; }
@@ -2201,25 +2220,26 @@ main {
       .ds-navigation ul li a:hover:active {
         border-bottom: 1px solid #003EAA; }
     .ds-navigation ul li a:active {
       color: #003EAA; }
   .ds-navigation .ds-header {
     margin-bottom: 8px; }
 
 .ds-section-title {
-  text-align: center; }
+  text-align: center;
+  margin-top: 24px; }
   .ds-section-title .title {
     line-height: 48px;
     font-size: 36px;
     font-weight: 300;
     color: #0C0C0D; }
   .ds-section-title .subtitle {
     line-height: 24px;
-    font-size: 15px;
+    font-size: 14px;
     color: #737373;
     margin-top: 4px; }
 
 .ds-top-sites .ds-header-title {
   vertical-align: middle; }
 
 .ds-top-sites .top-sites {
   padding: 0; }
@@ -2324,31 +2344,32 @@ main {
       flex-grow: 1; }
     .ds-card .meta .title {
       font-size: 17px;
       line-height: 24px;
       max-height: 2.82353em;
       overflow: hidden;
       font-weight: 600; }
     .ds-card .meta .excerpt {
-      font-size: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 6.15385em;
+      max-height: 5.71429em;
       overflow: hidden; }
+    .ds-card .meta .context,
+    .ds-card .meta .source {
+      font-size: 13px; }
   .ds-card header {
     line-height: 24px;
     font-size: 17px;
     color: #0C0C0D; }
   .ds-card p {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
     color: #737373;
     margin: 8px 0 0; }
-  .ds-card .context {
-    color: #008EA4; }
 
 .ds-message {
   margin: 8px 0 0; }
   .ds-message .title {
     display: flex;
     align-items: center; }
     .ds-message .title img {
       width: 16px;
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -1827,17 +1827,17 @@ main {
     display: grid;
     grid-row-gap: var(--gridRowGap); }
 
 .ds-header {
   font-size: 17px;
   font-weight: 600;
   line-height: 24px;
   color: #0C0C0D;
-  margin: 16px 0; }
+  margin: 24px 0 12px; }
 
 .ds-card-grid {
   display: grid;
   grid-gap: 24px; }
   .ds-card-grid .ds-card {
     background: #FFF;
     border-radius: 4px; }
   .ds-card-grid.ds-card-grid-border .ds-card {
@@ -1861,19 +1861,19 @@ main {
   .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: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 3.07692em;
+      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,
@@ -1889,70 +1889,86 @@ main {
   background-size: cover;
   border-radius: 4px;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
 
 .ds-hero header {
   font-weight: 600; }
 
 .ds-hero p {
-  line-height: 1.538; }
+  line-height: 1.538;
+  margin: 8px 0; }
+
+.ds-hero .excerpt {
+  font-size: 15px;
+  line-height: 23px;
+  max-height: 6.13333em;
+  overflow: hidden;
+  margin: 4px 0 8px; }
 
 .ds-hero .ds-list {
   border-top: 0;
   padding-top: 0; }
 
 .ds-hero .ds-card {
   border: 0; }
+  .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: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 3.07692em;
+      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;
   display: block;
-  margin: 16px 0 24px;
-  padding: 24px 0;
+  margin: 12px 0 16px;
+  padding: 16px 0;
   border-top: 1px solid var(--newtab-border-secondary-color);
   border-bottom: 1px solid var(--newtab-border-secondary-color); }
   .ds-hero-no-border .wrapper {
     border-top: 0;
     border-bottom: 0;
-    padding: 0; }
+    padding: 0 0 8px; }
   .ds-hero .wrapper:hover .meta header {
     color: #0060DF; }
   .ds-hero .wrapper:active .meta header {
     color: #003EAA; }
   .ds-hero .wrapper .img-wrapper {
     width: 100%; }
   .ds-hero .wrapper .img {
     height: 0;
     padding-top: 50%; }
   .ds-hero .wrapper .meta header {
     font-size: 22px;
+    line-height: 28px;
+    max-height: 2.54545em;
+    overflow: hidden;
     color: #0C0C0D; }
   .ds-hero .wrapper .meta p {
-    font-size: 13px; }
+    font-size: 14px; }
     .ds-hero .wrapper .meta p.context {
       color: #008EA4; }
   .ds-hero .wrapper .meta .source {
-    margin-bottom: 0; }
+    font-size: 13px;
+    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 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 24px; }
@@ -2008,22 +2024,25 @@ main {
   .ds-column-11 .ds-hero .wrapper .meta,
   .ds-column-12 .ds-hero .wrapper .meta {
     width: 33%;
     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; }
+      font-size: 22px;
+      line-height: 28px;
+      max-height: 7.63636em;
+      overflow: hidden;
+      margin: 0 0 4px; }
     .ds-column-9 .ds-hero .wrapper .meta p,
     .ds-column-10 .ds-hero .wrapper .meta p,
     .ds-column-11 .ds-hero .wrapper .meta p,
     .ds-column-12 .ds-hero .wrapper .meta p {
-      font-size: 15px;
       line-height: 1.6; }
 
 .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(4, 1fr);
@@ -2035,22 +2054,22 @@ main {
   border-top: 1px solid var(--newtab-border-secondary-color); }
 
 .ds-list {
   display: grid;
   grid-row-gap: 24px;
   grid-column-gap: 24px;
   padding-inline-start: 0; }
   .ds-list:not(.ds-list-full-width) .ds-list-item {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px; }
   .ds-list:not(.ds-list-full-width) .ds-list-item-title {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 3.07692em;
+    max-height: 2.85714em;
     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) {
@@ -2066,27 +2085,27 @@ main {
     display: none; }
   .ds-list a {
     color: #0C0C0D; }
 
 .ds-list-numbers .ds-list-item {
   counter-increment: list; }
 
 .ds-list-numbers .ds-list-item-link {
-  padding-inline-start: 42.5px; }
+  padding-inline-start: 41px; }
   .ds-list-numbers .ds-list-item-link::before {
     background-color: var(--newtab-link-secondary-color);
     border-radius: 32px;
     color: #FFF;
     content: counter(list);
     font-size: 17px;
     height: 32px;
     line-height: 32px;
-    margin-inline-start: -42.5px;
-    margin-top: 3.5px;
+    margin-inline-start: -41px;
+    margin-top: 3px;
     position: absolute;
     text-align: center;
     width: 32px; }
   .ds-list-numbers .ds-list-item-link:hover::before {
     background-color: var(--newtab-link-primary-color); }
   .ds-list-numbers .ds-list-item-link:active::before {
     background-color: #003EAA; }
 
@@ -2134,54 +2153,54 @@ main {
 .ds-list-item {
   display: block;
   text-align: start; }
   .ds-list-item .ds-list-item-link {
     mix-blend-mode: normal;
     display: flex;
     justify-content: space-between; }
   .ds-list-item .ds-list-item-excerpt {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 3.07692em;
+    max-height: 2.85714em;
     overflow: hidden;
     color: var(--newtab-text-secondary-color);
-    margin-bottom: 8px; }
+    margin: 4px 0 8px; }
   .ds-list-item .ds-list-item-info {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
-    max-height: 1.53846em;
+    max-height: 1.42857em;
     overflow: hidden;
     color: var(--newtab-text-secondary-color);
     text-overflow: ellipsis; }
   .ds-list-item .ds-list-item-title {
     font-weight: 600;
-    margin-bottom: 8px; }
+    margin-bottom: 4px; }
   .ds-list-item .ds-list-item-text {
     display: flex;
     flex-direction: column; }
   .ds-list-item .ds-list-image {
     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);
     height: 72px;
-    margin-inline-start: 13px;
+    margin-inline-start: 14px;
     min-height: 72px; }
   .ds-list-item:hover .ds-list-item-title {
     color: var(--newtab-link-primary-color); }
   .ds-list-item:active .ds-list-item-title {
     color: #003EAA; }
 
 .ds-navigation {
   line-height: 32px;
   padding: 4px 0;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600; }
   .ds-navigation.ds-navigation-centered {
     text-align: center; }
   .ds-navigation.ds-navigation-right-aligned {
     text-align: end; }
   .ds-navigation ul {
     margin: 0;
     padding: 0; }
@@ -2198,25 +2217,26 @@ main {
       .ds-navigation ul li a:hover:active {
         border-bottom: 1px solid #003EAA; }
     .ds-navigation ul li a:active {
       color: #003EAA; }
   .ds-navigation .ds-header {
     margin-bottom: 8px; }
 
 .ds-section-title {
-  text-align: center; }
+  text-align: center;
+  margin-top: 24px; }
   .ds-section-title .title {
     line-height: 48px;
     font-size: 36px;
     font-weight: 300;
     color: #0C0C0D; }
   .ds-section-title .subtitle {
     line-height: 24px;
-    font-size: 15px;
+    font-size: 14px;
     color: #737373;
     margin-top: 4px; }
 
 .ds-top-sites .ds-header-title {
   vertical-align: middle; }
 
 .ds-top-sites .top-sites {
   padding: 0; }
@@ -2321,31 +2341,32 @@ main {
       flex-grow: 1; }
     .ds-card .meta .title {
       font-size: 17px;
       line-height: 24px;
       max-height: 2.82353em;
       overflow: hidden;
       font-weight: 600; }
     .ds-card .meta .excerpt {
-      font-size: 13px;
+      font-size: 14px;
       line-height: 20px;
-      max-height: 6.15385em;
+      max-height: 5.71429em;
       overflow: hidden; }
+    .ds-card .meta .context,
+    .ds-card .meta .source {
+      font-size: 13px; }
   .ds-card header {
     line-height: 24px;
     font-size: 17px;
     color: #0C0C0D; }
   .ds-card p {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 20px;
     color: #737373;
     margin: 8px 0 0; }
-  .ds-card .context {
-    color: #008EA4; }
 
 .ds-message {
   margin: 8px 0 0; }
   .ds-message .title {
     display: flex;
     align-items: center; }
     .ds-message .title img {
       width: 16px;
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -7473,17 +7473,17 @@ class Hero_Hero extends external_React_d
             { className: "meta" },
             external_React_default.a.createElement(
               "header",
               null,
               heroRec.title
             ),
             external_React_default.a.createElement(
               "p",
-              null,
+              { className: "excerpt" },
               heroRec.excerpt
             ),
             heroRec.context ? external_React_default.a.createElement(
               "p",
               { className: "context" },
               heroRec.context
             ) : external_React_default.a.createElement(
               "p",