2 files changed, 71 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Highlights/Highlights.jsx b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Highlights/Highlights.jsx
new file mode 100644
index 0000000000..d0cc87cce3
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Highlights/Highlights.jsx
@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { connect } from "react-redux";
+import React from "react";
+import { SectionIntl } from "content-src/components/Sections/Sections";
+
+export class _Highlights extends React.PureComponent {
+  render() {
+    const section = this.props.Sections.find(s => s.id === "highlights");
+    if (!section || !section.enabled) {
+      return null;
+    }
+
+    return (
+      <div className="ds-highlights sections-list">
+        <SectionIntl {...section} isFixed={true} />
+      </div>
+    );
+  }
+}
+
+export const Highlights = connect(state => ({ Sections: state.Sections }))(
+  _Highlights
+);
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss
new file mode 100644
index 0000000000..3c5b60e946
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss
@@ -0,0 +1,45 @@
+.ds-highlights {
+  .section {
+    .section-list {
+      grid-gap: var(--gridRowGap);
+      grid-template-columns: repeat(1, 1fr);
+
+      @media (min-width: $break-point-medium) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media (min-width: $break-point-large) {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      .card-outer {
+        $line-height: 20px;
+
+        height: 175px;
+
+        .card-host-name {
+          font-size: 13px;
+          line-height: $line-height;
+          margin-bottom: 2px;
+          padding-bottom: 0;
+          text-transform: unset;
+        }
+
+        .card-title {
+          font-size: 14px;
+          font-weight: 600;
+          line-height: $line-height;
+          max-height: $line-height;
+        }
+
+        a {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .hide-for-narrow {
+    display: block;
+  }
+}