+ {this.props.title && (
+
+ {this.props.icon && ()}
+ {this.props.title}
+
+ )}
+ { hasSubtitleAndOrLink && (
+
+ {this.props.subtitle && ({this.props.subtitle})}
+ {this.props.link_text && this.props.link_url && ({this.props.link_text})}
+
+ )}
+
+
+ );
+ }
+}
diff --git a/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss b/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss
new file mode 100644
index 000000000..ff7a25744
--- /dev/null
+++ b/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss
@@ -0,0 +1,41 @@
+.ds-message {
+ margin: 8px 0 0;
+
+ .title {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 16px;
+ height: 16px;
+ margin: 0 6px 0 0;
+ }
+
+ span {
+ line-height: 24px;
+ font-size: 17px;
+ color: $grey-90;
+ font-weight: 600;
+ }
+ }
+
+ .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;
+ }
+}
diff --git a/content-src/styles/_activity-stream.scss b/content-src/styles/_activity-stream.scss
index 667f01f88..7134d317b 100644
--- a/content-src/styles/_activity-stream.scss
+++ b/content-src/styles/_activity-stream.scss
@@ -155,6 +155,7 @@ input {
@import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle';
@import '../components/DiscoveryStreamComponents/TopSites/TopSites';
@import '../components/DiscoveryStreamComponents/DSCard/DSCard';
+@import '../components/DiscoveryStreamComponents/DSMessage/DSMessage';
// AS Router
@import '../asrouter/components/Button/Button';