From d9d9dd133741391402eee61d7ff586d52b676eab Mon Sep 17 00:00:00 2001
From: Daniel Sauble <dsauble@newrelic.com>
Date: Mon, 8 Jun 2020 15:12:21 -0700
Subject: [PATCH] fix: Updates description in component reference docs to match
 Intro styling

---
 src/components/Intro.module.scss            |  6 ++----
 src/components/styles.scss                  | 10 ++++++++++
 src/templates/ComponentReferenceTemplate.js |  4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Intro.module.scss b/src/components/Intro.module.scss
index 7095b1aeb..49f01e327 100644
--- a/src/components/Intro.module.scss
+++ b/src/components/Intro.module.scss
@@ -1,5 +1,3 @@
-.container p {
-  color: var(--color-neutrals-600);
-  font-size: 1.125rem;
-  line-height: 2rem;
+.container {
+  composes: intro-text from global;
 }
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 7fe6580af..3392f75cf 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -176,3 +176,13 @@ ul {
 li {
   margin-bottom: 1rem;
 }
+
+:global {
+  .intro-text {
+    p {
+      color: var(--color-neutrals-600);
+      font-size: 1.125rem;
+      line-height: 2rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index 1c88795ee..f785fed00 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -51,7 +51,9 @@ const ComponentReferenceTemplate = ({ data }) => {
           <section
             className={cx(templateStyles.section, templateStyles.description)}
           >
-            <ReactMarkdown source={componentDescription} />
+            <div class="intro-text">
+              <ReactMarkdown source={componentDescription} />
+            </div>
           </section>
 
           <section className={templateStyles.section}>