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}>