feat: new subheaders in overview pages

newrelic · Jul 7, 2020 · 04dceb4 · 04dceb4
1 parent 73cf3fc
commit 04dceb4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git 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
@@ -1,3 +1,7 @@
 .guideListing {
   margin-top: 2rem;
 }
+
+.subtitle {
+  margin-top: 2rem;
+}