From 04dceb4d0d55d8b4a0f7c827994466ca4bfb90ed Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 7 Jul 2020 17:01:13 -0400
Subject: [PATCH] feat: new subheaders in overview pages

---
 src/templates/OverviewTemplate.js          | 43 ++++++++++++----------
 src/templates/OverviewTemplate.module.scss |  4 ++
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
index 5dce6cb31..d65ce367b 100644
--- a/src/templates/OverviewTemplate.js
+++ b/src/templates/OverviewTemplate.js
@@ -22,25 +22,30 @@ const OverviewTemplate = ({ data }) => {
       <PageTitle>{title}</PageTitle>
       <MDXContainer>{body}</MDXContainer>
       {!!guides?.nodes.length && (
-        <GuideListing className={styles.guideListing}>
-          <GuideListing.List>
-            {guides?.nodes.map(({ frontmatter }, index) => (
-              <GuideTile
-                as={Link}
-                to={frontmatter.path}
-                key={index}
-                duration={frontmatter.duration}
-                title={frontmatter.tileShorthand?.title || frontmatter.title}
-                description={
-                  frontmatter.tileShorthand?.description ||
-                  frontmatter.description
-                }
-                path={frontmatter.path}
-                alignment={GuideTile.ALIGNMENT.LEFT}
-              />
-            ))}
-          </GuideListing.List>
-        </GuideListing>
+        <>
+          <h2
+            className={styles.subtitle}
+          >{`Guides to ${title.toLowerCase()}`}</h2>
+          <GuideListing className={styles.guideListing}>
+            <GuideListing.List>
+              {guides?.nodes.map(({ frontmatter }, index) => (
+                <GuideTile
+                  as={Link}
+                  to={frontmatter.path}
+                  key={index}
+                  duration={frontmatter.duration}
+                  title={frontmatter.tileShorthand?.title || frontmatter.title}
+                  description={
+                    frontmatter.tileShorthand?.description ||
+                    frontmatter.description
+                  }
+                  path={frontmatter.path}
+                  alignment={GuideTile.ALIGNMENT.LEFT}
+                />
+              ))}
+            </GuideListing.List>
+          </GuideListing>
+        </>
       )}
     </Layout>
   );
diff --git a/src/templates/OverviewTemplate.module.scss b/src/templates/OverviewTemplate.module.scss
index 02d9ee698..bee96fdf0 100644
--- a/src/templates/OverviewTemplate.module.scss
+++ b/src/templates/OverviewTemplate.module.scss
@@ -1,3 +1,7 @@
 .guideListing {
   margin-top: 2rem;
 }
+
+.subtitle {
+  margin-top: 2rem;
+}