From e4fa3825e2f95ff21ae5ec16b7582e3344ae8fac Mon Sep 17 00:00:00 2001 From: Bob Wise Date: Sun, 3 Jan 2021 16:50:50 -0500 Subject: [PATCH 01/25] include headers in nav landmark --- src/components/InstallingSparkDocsMenu.js | 6 +- src/components/PrinciplesDocsMenu.js | 10 ++-- src/components/UsingSparkDocsMenu.js | 68 +++++++++++------------ 3 files changed, 41 insertions(+), 43 deletions(-) diff --git a/src/components/InstallingSparkDocsMenu.js b/src/components/InstallingSparkDocsMenu.js index 86da0b464d..ee09c50e67 100644 --- a/src/components/InstallingSparkDocsMenu.js +++ b/src/components/InstallingSparkDocsMenu.js @@ -7,9 +7,9 @@ const InstallingSparkDocsMenu = () => { const pages = useInstallingSparkData(); return ( - <> -

Installing Spark

+
- +
); }; diff --git a/src/components/PrinciplesDocsMenu.js b/src/components/PrinciplesDocsMenu.js index 81817a52ca..05071cbd58 100644 --- a/src/components/PrinciplesDocsMenu.js +++ b/src/components/PrinciplesDocsMenu.js @@ -6,11 +6,11 @@ import { usePrincipleSparkData } from '../hooks/use-principle-spark'; const PrinciplesSparkDocsMenu = () => { const pages = usePrincipleSparkData(); return ( - <> -

Principles

+
- +
); }; diff --git a/src/components/UsingSparkDocsMenu.js b/src/components/UsingSparkDocsMenu.js index 52702f6e1f..55b09e9900 100644 --- a/src/components/UsingSparkDocsMenu.js +++ b/src/components/UsingSparkDocsMenu.js @@ -24,41 +24,39 @@ const UsingSparkDocsMenu = () => { const generatedFoundationPages = firstColorPages.concat(allOtherPages); return ( - <> -

Using Spark

-
- -
- +
+ +
); }; From e4d982bf14dc58cab655db8ba08a67be98d67277 Mon Sep 17 00:00:00 2001 From: Bob Wise Date: Sun, 3 Jan 2021 17:11:40 -0500 Subject: [PATCH 02/25] include upgrade banner in an aside --- src/components/layouts/Layout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layouts/Layout.js b/src/components/layouts/Layout.js index 4f5551aa92..84a7ce5242 100644 --- a/src/components/layouts/Layout.js +++ b/src/components/layouts/Layout.js @@ -76,7 +76,7 @@ const Layout = ({ children, initialContext, hasSideBar, location }) => { Skip to Main Content -
+
+
Date: Sun, 3 Jan 2021 18:24:47 -0500 Subject: [PATCH 03/25] replace cards and buttons with HTML version --- src/pages/index.js | 425 +++++++++++++++++++++++++-------------------- 1 file changed, 239 insertions(+), 186 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index c1eab285c2..6b7a869ab2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,10 +1,5 @@ import React from 'react'; -import { - SprkStack, - SprkStackItem, - SprkCard, - SprkButton, -} from '@sparkdesignsystem/spark-react'; +import { SprkStack, SprkStackItem } from '@sparkdesignsystem/spark-react'; import Layout from '../components/layouts/Layout'; import componentsMedia from '../images/components.svg'; import developersMedia from '../images/developers.svg'; @@ -13,148 +8,6 @@ import foundationsMedia from '../images/foundations.svg'; import newsMedia from '../images/news-and-updates.svg'; import utilitiesMedia from '../images/utilities.svg'; -const teaserDesigners = { - bodyText: ` - Get started with Design by reading the principles - that we use in Spark Design System. - `, - cta: { - text: 'Go To Designer Basics', - ctaVariant: 'button', - buttonVariant: 'tertiary', - href: '/principles/design-principles', - }, - media: { - href: '/principles/design-principles', - mediaLinkElement: 'a', - imgAlt: 'An illustration of someone hands drawing on a tablet.', - imgSrc: designersMedia, - mediaVariant: 'img', - }, - title: 'Designer Basics', - titleFirst: false, -}; - -const teaserDevelopers = { - bodyText: ` - Learn how to install Spark’s - npm packages into the build - of your application. You’ll - also find support for setting - up Sass, React, Angular, and more. - `, - cta: { - text: 'Go To Developer Basics', - ctaVariant: 'button', - buttonVariant: 'tertiary', - href: '/installing-spark', - }, - media: { - href: '/installing-spark', - mediaLinkElement: 'a', - imgAlt: 'An illustration of a computer with code displayed.', - imgSrc: developersMedia, - mediaVariant: 'img', - }, - title: 'Developer Basics', - titleFirst: false, -}; - -const teaserComponents = { - bodyText: ` - Explore the library of Spark - components and supporting - documentation, including - design guidelines, code - samples, and configuration - options. - `, - cta: { - text: 'Go To Components', - ctaVariant: 'button', - buttonVariant: 'tertiary', - href: '/using-spark/components/button', - }, - media: { - href: '/using-spark/components/button', - mediaLinkElement: 'a', - imgAlt: 'An illustration of a graph paper and a magnifying glass.', - imgSrc: componentsMedia, - mediaVariant: 'img', - }, - title: 'Components', - titleFirst: false, -}; - -const teaserFoundations = { - bodyText: ` - Looking for our brand color palette, - typography guidelines, element spacing, - and other foundational style elements? - Start here. - `, - cta: { - text: 'Go To Foundations', - ctaVariant: 'button', - buttonVariant: 'tertiary', - href: '/using-spark/foundations/color', - }, - media: { - href: '/using-spark/foundations/color', - mediaLinkElement: 'a', - imgAlt: 'Decorative illustrations of type and color.', - imgSrc: foundationsMedia, - mediaVariant: 'img', - }, - title: 'Foundations', - titleFirst: false, -}; - -const teaserUtils = { - bodyText: ` - CSS class utilities for overriding - values, enhancing accessibility, - theming, and more. - `, - cta: { - text: 'Go To Utilities', - ctaVariant: 'button', - buttonVariant: 'tertiary', - href: '/using-spark/foundations/css-utilities', - }, - media: { - href: '/using-spark/foundations/css-utilities', - mediaLinkElement: 'a', - imgAlt: 'Decorative illustrations of pages.', - imgSrc: utilitiesMedia, - mediaVariant: 'img', - }, - title: 'Utilities', - titleFirst: false, -}; - -const teaserNews = { - bodyText: ` - Get the latest release notes - and updates, as well as previous news and notes - `, - cta: { - text: 'Go To News', - ctaVariant: 'button', - buttonVariant: 'tertiary', - href: 'https://github.com/sparkdesignsystem/spark-design-system/releases', - }, - media: { - href: 'https://github.com/sparkdesignsystem/spark-design-system/releases', - mediaLinkElement: 'a', - imgAlt: 'Decorative illustrations of mail and notifications.', - imgSrc: newsMedia, - mediaVariant: 'img', - }, - title: 'News And Updates', - titleFirst: false, -}; - const spacingBtwSections = 'huge'; const spacingBtwHeadingAndContent = 'large'; @@ -181,41 +34,241 @@ const IndexPage = () => (
- - - - - - - - - - - +
+ + Go to Designer Basics + + +
+

+ Designer Basics +

+ +

+ Get started with Design by reading the principles that we use in + Spark Design System. +

+ + +
+
+ +
+ + Go to Developer Basics + + +
+

+ Developer Basics +

+ +

+ Learn how to install Spark’s npm packages into the build of your + application. You’ll also find support for setting up Sass, + React, Angular, and more. +

+ + +
+
+ +
+ + Go to Components + + +
+

+ Components +

+ +

+ Explore the library of Spark components and supporting + documentation, including design guidelines, code samples, and + configuration options. +

+ + +
+
+ +
+ + Go to Foundations + + +
+

+ Foundations +

+ +

+ Looking for our brand color palette, typography guidelines, + element spacing, and other foundational style elements? Start + here. +

+ + +
+
+ +
+ + Go to Utilities + + +
+

+ Utilities +

+ +

+ CSS class utilities for overriding values, enhancing + accessibility, theming, and more. +

+ + +
+
+ +
+ + Go to News + + +
+

+ News and Updates +

+ +

+ Get the latest release notes and updates, as well as previous + news and notes. +

+ + +
+
@@ -226,12 +279,12 @@ const IndexPage = () => ( - Learn More - + From 548553ff23c96737ed39946fea5407e1c81d5191 Mon Sep 17 00:00:00 2001 From: Bob Wise Date: Sun, 3 Jan 2021 19:02:42 -0500 Subject: [PATCH 04/25] add title to youtube frame --- src/pages/installing-spark/html-environment-setup.mdx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/installing-spark/html-environment-setup.mdx b/src/pages/installing-spark/html-environment-setup.mdx index 18c97359a5..51a4fc32cd 100644 --- a/src/pages/installing-spark/html-environment-setup.mdx +++ b/src/pages/installing-spark/html-environment-setup.mdx @@ -22,7 +22,15 @@ Before you begin, make sure you + ## Create the Folder Structure From 2238508fbcdce95f10ac14dfb33121b3fa30cf88 Mon Sep 17 00:00:00 2001 From: Bob Wise Date: Sun, 3 Jan 2021 19:06:24 -0500 Subject: [PATCH 05/25] high contrast code theme --- src/components/markdown-render/inlineCode.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/markdown-render/inlineCode.js b/src/components/markdown-render/inlineCode.js index 7a7e55fba1..0694c40684 100644 --- a/src/components/markdown-render/inlineCode.js +++ b/src/components/markdown-render/inlineCode.js @@ -1,6 +1,6 @@ import React from 'react'; import Highlight, { defaultProps } from 'prism-react-renderer'; -import customTheme from 'prism-react-renderer/themes/github'; +import customTheme from 'prism-react-renderer/themes/vsDark'; const InlineCode = ({ children, className, additionalPreClasses, theme }) => { className = className ? className : ''; @@ -16,6 +16,8 @@ const InlineCode = ({ children, className, additionalPreClasses, theme }) => { 
           {tokens.map((line, i) => (
             


From d74ff42624858db21e2351afe736efe9e0f0f653 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 19:12:15 -0500
Subject: [PATCH 06/25] youtube titles

---
 src/pages/installing-spark/html-add-components.mdx | 10 +++++++++-
 src/pages/installing-spark/html-installation.mdx   | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/installing-spark/html-add-components.mdx b/src/pages/installing-spark/html-add-components.mdx
index 2f8acd8f52..77a67740fc 100644
--- a/src/pages/installing-spark/html-add-components.mdx
+++ b/src/pages/installing-spark/html-add-components.mdx
@@ -21,7 +21,15 @@ This guide is Part 3 in a 3-Part series. You can also check out
 For instructions on setting up Spark in other environments, check out the
 guides for [Angular](/installing-spark/angular) and [React](/installing-spark/react) development environments.
 
-
+
 
 ## Navigating to Component HTML
 
diff --git a/src/pages/installing-spark/html-installation.mdx b/src/pages/installing-spark/html-installation.mdx
index 0df8724c45..0bd38e6315 100644
--- a/src/pages/installing-spark/html-installation.mdx
+++ b/src/pages/installing-spark/html-installation.mdx
@@ -20,7 +20,15 @@ This guide is Part 2 in a 3-Part series. You can also check out
 For instructions on setting up Spark in other environments, check out the
 guides for [Angular](/installing-spark/angular) and [React](/installing-spark/react) development environments.
 
-
+
 
 ## Install the Spark Package
 

From 67e34ff51a003787053e9afd67e6142fdd673859 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 19:15:25 -0500
Subject: [PATCH 07/25] more youtube titles

---
 src/pages/installing-spark/angular.mdx | 10 +++++++++-
 src/pages/installing-spark/react.mdx   | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/installing-spark/angular.mdx b/src/pages/installing-spark/angular.mdx
index 92b4a1ed13..ec4acfdef6 100644
--- a/src/pages/installing-spark/angular.mdx
+++ b/src/pages/installing-spark/angular.mdx
@@ -41,7 +41,15 @@ run the following commands from your application's root directory.
 
 ## Installing Spark Packages
 
-
+
 
 1. Start by going to your project
 directory and installing `spark-angular`
diff --git a/src/pages/installing-spark/react.mdx b/src/pages/installing-spark/react.mdx
index 0b7f5a5ce5..fd80de94e9 100644
--- a/src/pages/installing-spark/react.mdx
+++ b/src/pages/installing-spark/react.mdx
@@ -16,7 +16,15 @@ see the [React App Getting Started Guide](https://create-react-app.dev/docs/gett
 By the end of this, you’ll have all the Spark React components available
 in your site.
 
-
+
 
 ## Installing Sass
 Sass is a tool that processes and compiles CSS. You’ll need to use Sass

From e45a3ea670c218e03e38b8ed453b94b24ff7e075 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 19:28:07 -0500
Subject: [PATCH 08/25] fix semantic level

---
 src/pages/installing-spark/angular.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/installing-spark/angular.mdx b/src/pages/installing-spark/angular.mdx
index ec4acfdef6..3a1b3f63aa 100644
--- a/src/pages/installing-spark/angular.mdx
+++ b/src/pages/installing-spark/angular.mdx
@@ -30,7 +30,7 @@ to the one in the [Angular CLI Overview](https://angular.io/cli)
 - Angular Routing is installed
 (not required by Angular CLI, but it is required for Spark)
 
-### Schematics
+## Schematics
 Spark Angular now supports schematics. If you'd like to install Spark in this way,
 run the following commands from your application's root directory.
 ``` bash

From 8a18879f58f6425c1eb7bb277a9398513840f410 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 19:30:32 -0500
Subject: [PATCH 09/25] rewrite headers to avoid duplicates

---
 src/pages/installing-spark/installing-icons.mdx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/installing-spark/installing-icons.mdx b/src/pages/installing-spark/installing-icons.mdx
index a4e6c291b1..d1a5643664 100644
--- a/src/pages/installing-spark/installing-icons.mdx
+++ b/src/pages/installing-spark/installing-icons.mdx
@@ -7,7 +7,7 @@
 
 Spark makes it possible for you to include SVG
 icons right into your project using two basic
-methods, **Compile Time** and **Run Time**. 
+methods, **Compile Time** and **Run Time**.
 
 For more information on working with SVG icons, check out
 [this guide](https://css-tricks.com/svg-sprites-use-better-icon-fonts/).
@@ -20,7 +20,7 @@ downloading the latest SVG, from the correct CDN URL,
 as part of your build process. That way, you’ll be
 able to embed the SVG directly into your compiled site.
 
-### Pros:
+### Advantages to Compile Time
 - The main advantages of this method are performance
 and reliability. The user avoids waiting for the CDN
 to serve the SVG, making this method ideal for production
@@ -30,12 +30,12 @@ are included in the site. Since the SVG file is downloaded
 during development, developers can review the SVG file
 before publishing and include only the versions they’ve tested.
 
-### Cons:
+### Disadvantages to Compile Time
 - However, this method does require more development work
 at the beginning for building and maintaining the connection
 to the CDN over the long term.
 
-You can find additional examples by using these helpful 
+You can find additional examples by using these helpful
 [Gulp](https://github.com/sparkdesignsystem/spark-starter-html/blob/master/gulpfile.js#L11)
 and
 [Gatsby](https://github.com/sparkdesignsystem/spark-design-system/blob/staging/plugins/gatsby-symbol-set-fetch/gatsby-node.js)
@@ -56,12 +56,12 @@ That way, the full SVG and
 icons are automatically embedded at the top of your page making
 them available to use within the body.
 
-### Pros:
+### Advantages to Run Time
 - The primary advantage of this method is that the least amount of
 setup and additional tooling needed. It’s ideal for quick,
 non-production projects.
 
-### Cons:
+### Disadvantages to Run Time
 - This method mainly lacks performance. You can easily end up
 downloading the icons more than once on subsequent page loads
 and having to wait for multiple downloads to complete.
@@ -72,7 +72,7 @@ update immediately without a chance for review.
 
 You can find additional examples by using these environment
 [Angular](https://github.com/sparkdesignsystem/spark-starter-angular/blob/kitchen-sink/src/app/spark-docs/icon-set/icon-set.component.ts)
-and [React](https://github.com/sparkdesignsystem/spark-starter-react/blob/kitchen-sink/src/components/IconSet/IconSet.js) 
+and [React](https://github.com/sparkdesignsystem/spark-starter-react/blob/kitchen-sink/src/components/IconSet/IconSet.js)
 component files.
 
 ## Troubleshooting

From 4121464647e8a007961f91d714ecfe14a7a4c90c Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 20:22:23 -0500
Subject: [PATCH 10/25] fix id

---
 src/pages/using-spark/foundations/color-usage.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/using-spark/foundations/color-usage.mdx b/src/pages/using-spark/foundations/color-usage.mdx
index d4bcf7d42a..65e72628b9 100644
--- a/src/pages/using-spark/foundations/color-usage.mdx
+++ b/src/pages/using-spark/foundations/color-usage.mdx
@@ -268,9 +268,9 @@ import {
       Input
     
     
   
 

From 7866390c9f70f55176e3b0095dc556c31674a837 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 20:24:43 -0500
Subject: [PATCH 11/25] allow ComponentPreview title to be overridden

---
 src/components/ComponentPreview.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ComponentPreview.js b/src/components/ComponentPreview.js
index ae36ecc16e..1f4c1b7f5d 100644
--- a/src/components/ComponentPreview.js
+++ b/src/components/ComponentPreview.js
@@ -13,6 +13,7 @@ const ComponentPreview = ({
   maxHeight,
   maxWidth,
   allowScrolling,
+  title,
 }) => {
   const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`;
 
@@ -26,7 +27,7 @@ const ComponentPreview = ({
             maxWidth,
           }}
           scrolling={allowScrolling}
-          title="Component Preview"
+          title={title}
           className="docs-c-ComponentPreview sprk-o-Box"
           src={iframeURL}
           loading="lazy"
@@ -56,11 +57,13 @@ ComponentPreview.propTypes = {
   maxWidth: PropTypes.string,
   minHeight: PropTypes.string,
   allowScrolling: PropTypes.bool,
+  title: PropTypes.string,
 };
 
 ComponentPreview.defaultProps = {
   componentType: 'components',
   allowScrolling: false,
+  title: 'Component Preview',
 };
 
 export default ComponentPreview;

From f7933abd9a6d47d7906a5e9560b7a4699d998f22 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Sun, 3 Jan 2021 20:39:19 -0500
Subject: [PATCH 12/25] frame titles

---
 src/pages/using-spark/foundations/space.mdx      |  8 +++++++-
 src/pages/using-spark/foundations/typography.mdx | 12 ++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/pages/using-spark/foundations/space.mdx b/src/pages/using-spark/foundations/space.mdx
index 5e110b8c14..b1e4bbd81d 100644
--- a/src/pages/using-spark/foundations/space.mdx
+++ b/src/pages/using-spark/foundations/space.mdx
@@ -8,7 +8,7 @@ import { SprkDivider } from '@sparkdesignsystem/spark-react';
 
 The distance between elements and how these proportions interact in the design.
 
-### Usage
+## Usage
 ** Padding and margin are relative to the base size of `16px` or `1em`.**
 
 Establish visual cohesion by applying consistent spacing in layouts and components.
@@ -90,6 +90,7 @@ Adds equal padding to all four sides of an element.
 
 
@@ -107,6 +108,7 @@ on the top and bottom.
 
 

@@ -128,6 +130,7 @@ top and bottom.
 
 

@@ -145,6 +148,7 @@ Adds margin to the bottom of elements.
 
 

@@ -162,6 +166,7 @@ Adds right margin to inline elements.
 
 

@@ -184,6 +189,7 @@ Additional sizing proportions to supplement existing XS-XL sizes:
 
 

diff --git a/src/pages/using-spark/foundations/typography.mdx b/src/pages/using-spark/foundations/typography.mdx
index bd474e4cd9..ccd0bc5865 100644
--- a/src/pages/using-spark/foundations/typography.mdx
+++ b/src/pages/using-spark/foundations/typography.mdx
@@ -108,6 +108,7 @@ Use either [Display One](#display-one) or [Display Two](display-two) to style th
 
Date: Sun, 3 Jan 2021 21:33:50 -0500
Subject: [PATCH 13/25] Reorder narrow nav to match wide nav

---
 src/components/Header.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index a1634aca63..891d97b3c2 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -67,22 +67,13 @@ const Header = ({ setContext }) => {
     element: Link,
   }));
 
-  const usingSparkExamples = useUsingSparkData().examples.map((page) => ({
-    text: page.node.frontmatter.title,
-    to: `/using-spark/examples/${page.node.parent.name}`,
-    element: Link,
-  }));
-
   const usingSparkFoundations = useUsingSparkData().foundations.map((page) => ({
     text: page.node.frontmatter.title,
     to: `/using-spark/foundations/${page.node.parent.name}`,
     element: Link,
   }));
 
-  const usingSparkPages = usingSparkComponents.concat(
-    usingSparkExamples,
-    usingSparkFoundations,
-  );
+  const usingSparkPages = usingSparkFoundations.concat(usingSparkComponents);
 
   const principlePages = usePrincipleSparkData().map((page) => ({
     text: page.node.frontmatter.title,

From d82f9b7301afc7f471e529443146ca7ed8697d2b Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Mon, 4 Jan 2021 15:36:40 -0500
Subject: [PATCH 14/25] minor package bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d71ce2333a..81315a088e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spark-design-system-gatsby",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A documentation and guide site for Spark Design System",
   "homepage": "https://github.com/sparkdesignsystem/spark-design-system",
   "license": "MIT",

From ed7ae7a2a8f8aebebccc8b494cf7d8110b472be9 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Mon, 4 Jan 2021 16:05:43 -0500
Subject: [PATCH 15/25] update ComponentPreview prop

---
 src/components/ComponentPreview.js            |  8 +++----
 src/pages/using-spark/foundations/space.mdx   | 12 +++++-----
 .../using-spark/foundations/typography.mdx    | 24 +++++++++----------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/ComponentPreview.js b/src/components/ComponentPreview.js
index 1f4c1b7f5d..62c94ce831 100644
--- a/src/components/ComponentPreview.js
+++ b/src/components/ComponentPreview.js
@@ -13,7 +13,7 @@ const ComponentPreview = ({
   maxHeight,
   maxWidth,
   allowScrolling,
-  title,
+  titleAttr,
 }) => {
   const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`;
 
@@ -27,7 +27,7 @@ const ComponentPreview = ({
             maxWidth,
           }}
           scrolling={allowScrolling}
-          title={title}
+          title={titleAttr}
           className="docs-c-ComponentPreview sprk-o-Box"
           src={iframeURL}
           loading="lazy"
@@ -57,13 +57,13 @@ ComponentPreview.propTypes = {
   maxWidth: PropTypes.string,
   minHeight: PropTypes.string,
   allowScrolling: PropTypes.bool,
-  title: PropTypes.string,
+  titleAttr: PropTypes.string,
 };
 
 ComponentPreview.defaultProps = {
   componentType: 'components',
   allowScrolling: false,
-  title: 'Component Preview',
+  titleAttr: 'Component Preview',
 };
 
 export default ComponentPreview;
diff --git a/src/pages/using-spark/foundations/space.mdx b/src/pages/using-spark/foundations/space.mdx
index b1e4bbd81d..a7942000af 100644
--- a/src/pages/using-spark/foundations/space.mdx
+++ b/src/pages/using-spark/foundations/space.mdx
@@ -90,7 +90,7 @@ Adds equal padding to all four sides of an element.
 
 
@@ -108,7 +108,7 @@ on the top and bottom.
 
 

@@ -130,7 +130,7 @@ top and bottom.
 
 

@@ -148,7 +148,7 @@ Adds margin to the bottom of elements.
 
 

@@ -166,7 +166,7 @@ Adds right margin to inline elements.
 
 

@@ -189,7 +189,7 @@ Additional sizing proportions to supplement existing XS-XL sizes:
 
 

diff --git a/src/pages/using-spark/foundations/typography.mdx b/src/pages/using-spark/foundations/typography.mdx
index ccd0bc5865..b704ce5d02 100644
--- a/src/pages/using-spark/foundations/typography.mdx
+++ b/src/pages/using-spark/foundations/typography.mdx
@@ -108,7 +108,7 @@ Use either [Display One](#display-one) or [Display Two](display-two) to style th
 
Date: Mon, 4 Jan 2021 16:37:34 -0500
Subject: [PATCH 16/25] componentpreview titles

---
 .../using-spark/components/accordion.mdx      |  1 +
 src/pages/using-spark/components/alert.mdx    |  4 ++
 src/pages/using-spark/components/award.mdx    |  1 +
 src/pages/using-spark/components/box.mdx      |  1 +
 src/pages/using-spark/components/button.mdx   | 12 +++++
 src/pages/using-spark/components/card.mdx     |  5 +++
 .../components/centered-column.mdx            |  1 +
 .../using-spark/components/dictionary.mdx     | 17 ++++---
 src/pages/using-spark/components/divider.mdx  |  1 +
 src/pages/using-spark/components/dropdown.mdx |  3 ++
 src/pages/using-spark/components/flag.mdx     |  3 ++
 src/pages/using-spark/components/footer.mdx   |  1 +
 .../components/highlight-board.mdx            |  4 ++
 src/pages/using-spark/components/icon.mdx     |  1 +
 src/pages/using-spark/components/input.mdx    | 21 +++++++++
 src/pages/using-spark/components/link.mdx     |  6 +++
 src/pages/using-spark/components/list.mdx     | 21 +++++----
 src/pages/using-spark/components/masthead.mdx |  3 ++
 src/pages/using-spark/components/modal.mdx    | 44 ++++++++++---------
 .../using-spark/components/pagination.mdx     | 25 ++++++-----
 src/pages/using-spark/components/promo.mdx    | 25 ++++++-----
 src/pages/using-spark/components/stack.mdx    | 12 +++++
 src/pages/using-spark/components/stepper.mdx  |  5 +++
 src/pages/using-spark/components/table.mdx    | 18 +++++---
 src/pages/using-spark/components/tabs.mdx     |  7 +--
 src/pages/using-spark/components/toggle.mdx   | 11 ++---
 src/pages/using-spark/components/tooltip.mdx  |  1 +
 27 files changed, 184 insertions(+), 70 deletions(-)

diff --git a/src/pages/using-spark/components/accordion.mdx b/src/pages/using-spark/components/accordion.mdx
index 8941515bb4..12bf317edb 100644
--- a/src/pages/using-spark/components/accordion.mdx
+++ b/src/pages/using-spark/components/accordion.mdx
@@ -13,6 +13,7 @@ Accordion holds sections that hide or reveal related information.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Accordion Example"
 />
 
 ### Usage
diff --git a/src/pages/using-spark/components/alert.mdx b/src/pages/using-spark/components/alert.mdx
index 8dd78a3b50..1780d3728e 100644
--- a/src/pages/using-spark/components/alert.mdx
+++ b/src/pages/using-spark/components/alert.mdx
@@ -15,6 +15,7 @@ provide feedback to user action.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Alert Example"
 />
 
 ### Usage
@@ -51,6 +52,7 @@ This alert has a Bell Icon with critical information. These alerts are typically
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Information Alert Example"
 />
 
 ### Success Alert
@@ -62,6 +64,7 @@ This Alert has a Checkmark Icon and provides positive feedback to user action.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Success Alert Example"
 />
 
 ### Fail Alert
@@ -73,6 +76,7 @@ This Alert has an Exclamation Icon with negative feedback to user action.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Fail Alert Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/award.mdx b/src/pages/using-spark/components/award.mdx
index d5042e30d0..5adc42d602 100644
--- a/src/pages/using-spark/components/award.mdx
+++ b/src/pages/using-spark/components/award.mdx
@@ -15,6 +15,7 @@ A layout for showcasing awards and disclaimers.
   hasHTML
   minHeight="26rem"
   maxWidth="100%"
+  titleAttr="Award Example"
 />
 
 ### Usage
diff --git a/src/pages/using-spark/components/box.mdx b/src/pages/using-spark/components/box.mdx
index 5a6ef8febe..5e917da71d 100644
--- a/src/pages/using-spark/components/box.mdx
+++ b/src/pages/using-spark/components/box.mdx
@@ -13,6 +13,7 @@ Box is an empty container with padding.
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Box Example"
 />
 
 ### Usage
diff --git a/src/pages/using-spark/components/button.mdx b/src/pages/using-spark/components/button.mdx
index 1be3fbac41..34df9e8be9 100644
--- a/src/pages/using-spark/components/button.mdx
+++ b/src/pages/using-spark/components/button.mdx
@@ -13,6 +13,7 @@ An interactive element that represents an action or choice.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Button Example"
 />
 
 ### Usage
@@ -57,6 +58,7 @@ Reserve for the most important action on the page. Use no more than two per page
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Primary Button Example"
 />
 
 ### Secondary Button
@@ -68,6 +70,7 @@ Represents the second-highest priority, following the Primary Button. There can
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Secondary Button Example"
 />
 
 ### Tertiary Button
@@ -79,6 +82,7 @@ Represents the third-highest priority on the page. Pair with [Primary](#primary-
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Tertiary Button Example"
 />
 
 ### Quaternary Button
@@ -90,6 +94,7 @@ Represents the least important action on a page. Also used for the Sign In butto
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Quaternary Button Example"
 />
 
 ## States
@@ -106,6 +111,7 @@ Since a user can’t interact with this Button, consider if it’s necessary to
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Disabled Button Example"
 />
 
 #### Disabled - Secondary
@@ -114,6 +120,7 @@ Since a user can’t interact with this Button, consider if it’s necessary to
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Disabled Secondary Button Example"
 />
 
 #### Disabled - Tertiary
@@ -122,6 +129,7 @@ Since a user can’t interact with this Button, consider if it’s necessary to
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Disabled Tertiary Button Example"
 />
 
 ### Spinning
@@ -134,6 +142,7 @@ Use when data is being saved or submitted. The spinning indicator will replace t
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Spinning Primary Button Example"
 />
 
 #### Spinning - Secondary
@@ -142,6 +151,7 @@ Use when data is being saved or submitted. The spinning indicator will replace t
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Spinning Secondary Button Example"
 />
 
 #### Spinning - Tertiary
@@ -150,6 +160,7 @@ Use when data is being saved or submitted. The spinning indicator will replace t
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Spinning Tertiary Button Example"
 />
 
 
@@ -162,6 +173,7 @@ At small viewport sizes, a Button may be used at full width.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Full Width at Smaller Viewports Button Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/card.mdx b/src/pages/using-spark/components/card.mdx
index 93563a4c6a..1dd34bf44e 100644
--- a/src/pages/using-spark/components/card.mdx
+++ b/src/pages/using-spark/components/card.mdx
@@ -14,6 +14,7 @@ for grouping small chunks of related content.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Card Example"
 />
 
 ### Usage
@@ -52,6 +53,7 @@ call to action are encouraged.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Base Card Example"
 />
 
 ### Standout
@@ -67,6 +69,7 @@ time on the same page.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Standout Card Example"
 />
 
 ### Highlighted Header
@@ -80,6 +83,7 @@ draws focus to its header.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Highlighted Header Card Example"
 />
 
 ### Teaser
@@ -100,6 +104,7 @@ like the heading to appear above the image.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Teaser Card Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/centered-column.mdx b/src/pages/using-spark/components/centered-column.mdx
index 45c2d429dd..83c0ec32ae 100644
--- a/src/pages/using-spark/components/centered-column.mdx
+++ b/src/pages/using-spark/components/centered-column.mdx
@@ -16,6 +16,7 @@ page content with a maximum width.
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Centered Column Example"
 />
 
 ### Usage
diff --git a/src/pages/using-spark/components/dictionary.mdx b/src/pages/using-spark/components/dictionary.mdx
index c0f384a6f7..714ce8e7ee 100644
--- a/src/pages/using-spark/components/dictionary.mdx
+++ b/src/pages/using-spark/components/dictionary.mdx
@@ -14,6 +14,7 @@ The Dictionary component displays a list of key-value pairs.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Dictionary Example"
 />
 
 ### Usage
@@ -22,14 +23,14 @@ Use the Dictionary component when you have a small
 set of data that you want to display using key-value
 pairs. If you have a large set of data or more than
 one value per key, consider using the Table component
-instead. 
+instead.
 
 ### Guidelines
 
-- There should be at least two key-value pairs. 
+- There should be at least two key-value pairs.
 - The length of the text in a key should not
-exceed two lines of wrapped text. 
-- A Dictionary cannot be nested within another Dictionary. 
+exceed two lines of wrapped text.
+- A Dictionary cannot be nested within another Dictionary.
 
 
 
 ### Striped Dictionary
 
 Use the Striped Dictionary when the number of rows is
 greater than ten or when the Dictionary is wide enough
-to need an additional visual cue. 
+to need an additional visual cue.
 
 
 
 ## Anatomy
 
 - Each row of a Dictionary contains a key on
-the left and a value on the right. 
+the left and a value on the right.
 - On small viewports, the value is displayed
-below the key. 
\ No newline at end of file
+below the key.
\ No newline at end of file
diff --git a/src/pages/using-spark/components/divider.mdx b/src/pages/using-spark/components/divider.mdx
index 85a6ae38b0..754d2e51f0 100644
--- a/src/pages/using-spark/components/divider.mdx
+++ b/src/pages/using-spark/components/divider.mdx
@@ -12,6 +12,7 @@ Divider is a visual break between content.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Divider Example"
 />
 
 ### Usage
diff --git a/src/pages/using-spark/components/dropdown.mdx b/src/pages/using-spark/components/dropdown.mdx
index 883d492cdc..6e62dbff4a 100644
--- a/src/pages/using-spark/components/dropdown.mdx
+++ b/src/pages/using-spark/components/dropdown.mdx
@@ -15,6 +15,7 @@ that cause an action when selected.
   hasAngular
   hasHTML
   minHeight="15rem"
+  titleAttr="Dropdown Example"
 />
 
 ### Usage
@@ -49,6 +50,7 @@ with links to account settings.
   hasAngular
   hasHTML
   minHeight="15rem"
+  titleAttr="Base Dropdown Example"
 />
 
 ### Informational
@@ -64,6 +66,7 @@ has an optional secondary action.
   hasAngular
   hasHTML
   minHeight="27rem"
+  titleAttr="Informational Dropdown Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/flag.mdx b/src/pages/using-spark/components/flag.mdx
index dbed859980..cba44cc8dd 100644
--- a/src/pages/using-spark/components/flag.mdx
+++ b/src/pages/using-spark/components/flag.mdx
@@ -19,6 +19,7 @@ alignment and renamed the
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Flag Example"
 />
 
 ### Usage
@@ -49,6 +50,7 @@ Tabbing and screen readers are based on DOM order. Keep in mind that this revers
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Reversed Flag Example"
 />
 
 ### Stacked Modifier
@@ -59,6 +61,7 @@ This can be used in conjunction with reverse, but the stacking will always have
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Stacked Flag Example"
 />
 
 
 
 ### Usage
diff --git a/src/pages/using-spark/components/highlight-board.mdx b/src/pages/using-spark/components/highlight-board.mdx
index 335c9ba286..e9af131b55 100644
--- a/src/pages/using-spark/components/highlight-board.mdx
+++ b/src/pages/using-spark/components/highlight-board.mdx
@@ -16,6 +16,7 @@ the user with a clear call to action.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Highlight Board Example"
 />
 
 ### Usage
@@ -55,6 +56,7 @@ with strong imagery or a solid background color.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Default Highlight Board Example"
 />
 
 ### No Image
@@ -68,6 +70,7 @@ image and centers the content.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="No Image Highlight Board Example"
 />
 
 ### Stacked
@@ -82,6 +85,7 @@ This places greater emphasis on the image.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Stacked Highlight Board Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/icon.mdx b/src/pages/using-spark/components/icon.mdx
index 97a83030bd..53b3f6b626 100644
--- a/src/pages/using-spark/components/icon.mdx
+++ b/src/pages/using-spark/components/icon.mdx
@@ -17,6 +17,7 @@ meaning, status, and available actions.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Icon Example"
 />
 
 ### Usage
diff --git a/src/pages/using-spark/components/input.mdx b/src/pages/using-spark/components/input.mdx
index 2a6999ecc9..b8450168cf 100644
--- a/src/pages/using-spark/components/input.mdx
+++ b/src/pages/using-spark/components/input.mdx
@@ -13,6 +13,7 @@ Input allows a user to enter and submit data.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Default Text Input Example"
 />
 
 ### Usage
@@ -45,6 +46,7 @@ Each input has an error and disabled state.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Invalid Text Input Example"
 />
 
 ### Disabled
@@ -53,6 +55,7 @@ Each input has an error and disabled state.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Disabled Text Input Example"
 />
 
 
@@ -92,6 +95,7 @@ than one option from a list.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Checkbox Example"
 />
 
 ### Huge Checkbox
@@ -121,6 +125,7 @@ used for stand-alone question flows.
   hasHTML
   hasAngular
   hasReact
+  titleAttr="Huge Checkbox Example"
 />
 
 
@@ -146,6 +151,7 @@ functionality.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Date Input Example"
 />
 
 
@@ -173,6 +179,7 @@ validation functionality.
   minHeight="30rem"
   hasAngular
   hasHTML
+  titleAttr="Date Picker Example"
 />
 
 
@@ -188,6 +195,7 @@ the user understand what information the input requires.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Helper Text Example"
 />
 
 
@@ -203,6 +211,7 @@ text. It is the most common Input type.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Text Input Example"
 />
 
 
@@ -240,6 +249,7 @@ the Huge Text Input style:
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Huge Text Input Example"
 />
 
 
@@ -262,6 +272,7 @@ input into a monetary pattern (##.##)
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Monetary Input Example"
 />
 
 
@@ -282,6 +293,7 @@ For full functionality, see guidelines in the
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Password Input Example"
 />
 
 
@@ -296,6 +308,7 @@ Percentage Input is used to collect a percent value.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Percentage Input Example"
 />
 
 
@@ -319,6 +332,7 @@ functionality, see guidelines in the Text Huge Inputs section.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Phone Input Example"
 />
 
 
@@ -342,6 +356,7 @@ consider using a Select Box instead.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Radio Button Example"
 />
 
 
@@ -373,6 +388,7 @@ used for stand-alone question flows.
   hasHTML
   hasReact
   hasAngular
+  titleAttr="Huge Radio Button Example"
 />
 
 
@@ -387,6 +403,7 @@ Search Input allows a user to make a search query.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Search Input Example"
 />
 
 
@@ -408,6 +425,7 @@ component.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Select Box Input Example"
 />
 
 
@@ -435,6 +453,7 @@ Input and cannot wrap to a second line.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Huge Select Example"
 />
 
 
@@ -467,6 +486,7 @@ validation functionality.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Social Security Number Input Example"
 />
 
 
@@ -482,4 +502,5 @@ lines of freeform text.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Textarea Example"
 />
diff --git a/src/pages/using-spark/components/link.mdx b/src/pages/using-spark/components/link.mdx
index 22f9a60d7e..67f8d37cd9 100644
--- a/src/pages/using-spark/components/link.mdx
+++ b/src/pages/using-spark/components/link.mdx
@@ -14,6 +14,7 @@ or to a specific location on a page.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Link Example"
 />
 
 ### Usage
@@ -53,6 +54,7 @@ should be used for most hyperlinks.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Default Link Example"
 />
 
 ### Simple Link
@@ -66,6 +68,7 @@ where context implies an ability to interact with the text.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Simple Link Example"
 />
 
 ### Light Link
@@ -78,6 +81,7 @@ Light links are mainly used in [Footer](/using-spark/components/footer).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Light Link Example"
 />
 
 ### Icon with Text Link
@@ -91,6 +95,7 @@ text and shouldn’t be used in a sentence.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Icon with Text Link Example"
 />
 
 ### Disabled
@@ -103,6 +108,7 @@ Using this variation helps screen readers and other assistive technologies under
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Disabled Link Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/list.mdx b/src/pages/using-spark/components/list.mdx
index 6e7101cdec..3bb6424f4c 100644
--- a/src/pages/using-spark/components/list.mdx
+++ b/src/pages/using-spark/components/list.mdx
@@ -14,23 +14,24 @@ organized vertically.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="List Example"
 />
 
 ### Usage
 
 - Use ordered lists when the order of
 the list items is meaningful, i.e.
-they are sequential. 
+they are sequential.
 - Use unordered lists when the order
-of the list items does not matter. 
+of the list items does not matter.
 
 ### Guidelines
 
 - A List must use the default list style
 type (e.g. a bullet or number). Do not
 substitute the default with alternative
-symbols like Emoji. 
-- A list should have at least 2 List Items. 
+symbols like Emoji.
+- A list should have at least 2 List Items.
 
 
 
 
 
 ### Bare
 
 Bare List can be ordered or unordered,
 but the leading symbol will not be visible
-and will not be read by screen readers. 
+and will not be read by screen readers.
 
 
 
 ### Indented
 
 Indented List should be used when the
-list is between blocks of text. 
+list is between blocks of text.
 
 
 
 ## Accessibility
@@ -88,4 +93,4 @@ list is between blocks of text.
 - Unless you are using the Bare variant,
 screen readers will read “bullet” before
 each List Item in an unordered list or
-the number for an ordered list.  
\ No newline at end of file
+the number for an ordered list.
\ No newline at end of file
diff --git a/src/pages/using-spark/components/masthead.mdx b/src/pages/using-spark/components/masthead.mdx
index 751dbed8b2..118890c996 100644
--- a/src/pages/using-spark/components/masthead.mdx
+++ b/src/pages/using-spark/components/masthead.mdx
@@ -17,6 +17,7 @@ logo and navigation elements for the application.
   hasHTML
   maxWidth="100%"
   minHeight="20rem"
+  titleAttr="Masthead Example"
 />
 
 ### Usage
@@ -70,6 +71,7 @@ Masthead must be used instead.
   hasHTML
   maxWidth="100%"
   minHeight="20rem"
+  titleAttr="Default Masthead Example"
 />
 
 ### Extended Masthead
@@ -88,6 +90,7 @@ Masthead should be a minimum of 3 and maximum of 6.
   hasHTML
   maxWidth="100%"
   minHeight="20rem"
+  titleAttr="Extended Masthead Example"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/modal.mdx b/src/pages/using-spark/components/modal.mdx
index 75941d911a..150b2b0cbd 100644
--- a/src/pages/using-spark/components/modal.mdx
+++ b/src/pages/using-spark/components/modal.mdx
@@ -9,7 +9,7 @@ import { SprkDivider } from '@sparkdesignsystem/spark-react';
 The Modal component interrupts the
 user without leaving the current page.
 It forces the user to interact with
-critical information. 
+critical information.
 
 
 
 ### Usage
@@ -26,14 +27,14 @@ is critical information to show the user,
 a choice that the user must make immediately,
 a small amount of user information is needed,
 or when an action will result in a longer
-than normal wait.  
+than normal wait.
 
 The Modal component is inherently disruptive.
 It disables everything on the page below it
 until it is dismissed. The Modal component
 should be used sparingly, thoughtfully, and
 only when interruption is necessary to
-continuing a task. 
+continuing a task.
 
 ### Guidelines
 
@@ -41,7 +42,7 @@ continuing a task.
 a clear path of action for the user.
 - The content inside of a Modal should be short
 and concise. If much more information is needed,
-consider sending the user to a new page. 
+consider sending the user to a new page.
 - A Modal should not be launched from within another Modal.
 
 
 
 ### Info
@@ -74,12 +76,13 @@ A Modal that shows critical information to the user.
   hasAngular
   hasHTML
   minHeight="20rem"
+  titleAttr="Info Modal Example"
 />
 
 ### Wait
 
 A Modal that acts as a loading screen.
-Once loading is finished, it will dismiss itself. 
+Once loading is finished, it will dismiss itself.
 
 
 
 ## Anatomy
 
 - A Modal (excluding the Wait Modal)
-must have a [Button](/using-spark/components/button) to trigger it. 
+must have a [Button](/using-spark/components/button) to trigger it.
 - A Modal (excluding the Wait Modal)
-must have a Close Icon to dismiss it. 
+must have a Close Icon to dismiss it.
 - A Modal has a background mask that
-covers up the page below. 
-- A Modal must have a title. 
-- A Modal must have informational text. 
-- A Choice Modal must include a [Button](/using-spark/components/button). 
+covers up the page below.
+- A Modal must have a title.
+- A Modal must have informational text.
+- A Choice Modal must include a [Button](/using-spark/components/button).
 
 ## Accessibility
 
 - The Modal component can be fully
 controlled using a mouse, keyboard,
-and/or screen reader. 
+and/or screen reader.
 - When a Modal is opened:
     - The first focusable element
-    inside it will receive focus. 
+    inside it will receive focus.
     - The focus is "trapped" inside
     the Modal. Pressing the Tab or Shift+Tab
     keys to move focus will only shift
-    focus between the elements in the Modal. 
-- Modals can be closed several ways: 
+    focus between the elements in the Modal.
+- Modals can be closed several ways:
     - Pressing the "Escape" key on the
-    keyboard (excluding Wait Modal) 
+    keyboard (excluding Wait Modal)
     - Pressing the Cancel button
-    (in the Choice Modal). 
+    (in the Choice Modal).
     - Pressing the Close Icon
-    (in the Choice Modal or Info Modal). 
+    (in the Choice Modal or Info Modal).
     - Pressing the background mask overlay
-    (in the Choice Modal or Info Modal). 
-    - Wait Modal will close on its own. 
+    (in the Choice Modal or Info Modal).
+    - Wait Modal will close on its own.
diff --git a/src/pages/using-spark/components/pagination.mdx b/src/pages/using-spark/components/pagination.mdx
index 81269c791a..9e7561c85a 100644
--- a/src/pages/using-spark/components/pagination.mdx
+++ b/src/pages/using-spark/components/pagination.mdx
@@ -7,27 +7,28 @@ import { SprkDivider } from '@sparkdesignsystem/spark-react';
 # Pagination
 
 Pagination breaks related content or data into
-multiple pages and allows a client to navigate through them. 
+multiple pages and allows a client to navigate through them.
 
 
 
 ### Usage
 
 Use Pagination when splitting related content or a
 large set of data into smaller chunks across several
-pages will make the content easier to consume. 
+pages will make the content easier to consume.
 
 ### Guidelines
 
 - Pagination only includes navigation elements for paging
 and does not manipulate data or control the display of a
 data grid; this control is used only to provide navigation
-and to indicate the current page and number of pages. 
+and to indicate the current page and number of pages.
 
 
 
 ### Pager
@@ -56,13 +58,14 @@ while still showing the first, last, and current pages.
 The Pager variant does not include page numbers and only
 includes Icon chevrons for navigating forwards and backwards
 between pages. Pager should be used when you want the client
-to only navigate in sequential order. 
+to only navigate in sequential order.
 
 
 
 ## Anatomy
@@ -70,20 +73,20 @@ to only navigate in sequential order.
 - Pagination must have Icon chevrons for incrementally
 navigating forward or backward between pages.
 - Default Pagination must have page numbers for
-navigating to specific pages 
+navigating to specific pages
 - Pagination must include an ellipsis (…) indicating
-hidden pages when there are more than 3 pages. 
+hidden pages when there are more than 3 pages.
 
 ## Accessibility
 
 - Users can navigate to the control using the keyboard
 and are able to activate the Icon chevrons and page
-numbers using the ENTER or SPACE keys. 
+numbers using the ENTER or SPACE keys.
 - The component is correctly identified and interpreted
-by screen reader technology. 
+by screen reader technology.
 - Each page number is correctly identified and interpreted
-by screen reader technology. 
+by screen reader technology.
 - The current page number includes the `aria-current`
-attribute. 
+attribute.
 - The Icon chevrons are correctly identified by screen
 reader technology.
\ No newline at end of file
diff --git a/src/pages/using-spark/components/promo.mdx b/src/pages/using-spark/components/promo.mdx
index 36cebe6c2a..6ee39dac2c 100644
--- a/src/pages/using-spark/components/promo.mdx
+++ b/src/pages/using-spark/components/promo.mdx
@@ -15,6 +15,7 @@ related content.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Promo Example"
 />
 
 ### Usage
@@ -35,7 +36,7 @@ calculator in an article on the refinance process.
 
 ## Variants
 
-### Default 
+### Default
 
 The default Promo contains text and a call to action.
 
@@ -44,13 +45,14 @@ The default Promo contains text and a call to action.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Default Promo Example"
 />
 
 ### Flag
 
 The Flag variant displays text near a small image.
 This variant is useful when you want to incorporate
-an image while keeping the greatest emphasis on the text. 
+an image while keeping the greatest emphasis on the text.
 
 
 
 ### With Image
 
 The Image variant includes an image that takes up
 half the width of the Promo. This is useful when
-you want to include an image with equal prominence to the text.  
+you want to include an image with equal prominence to the text.
 
 To preserve the aspect ratio of Promo, the image height
 will stay consistent with the height of the text content area.
 If there isn’t room for the full width of the image it will be
-cut off on the sides without distorting the image. 
+cut off on the sides without distorting the image.
 
 
 
 ### With Image (Reversed)
 
 Identical to the With Image variant with the image
-on the opposite side. 
+on the opposite side.
 
 
 
 ## Anatomy
 
 - Promo should have a heading.
-- Promo may have a sub-heading. 
-- Promo must have text body content. 
-- Promo should have a [Button](/using-spark/components/button). 
-- Promo may have an image. 
+- Promo may have a sub-heading.
+- Promo must have text body content.
+- Promo should have a [Button](/using-spark/components/button).
+- Promo may have an image.
 
 ## Accessibility
 
 - If the Promo has an image, you must add
-a descriptive `alt` attribute for screen readers. 
\ No newline at end of file
+a descriptive `alt` attribute for screen readers.
\ No newline at end of file
diff --git a/src/pages/using-spark/components/stack.mdx b/src/pages/using-spark/components/stack.mdx
index 65a0752291..2054f57676 100644
--- a/src/pages/using-spark/components/stack.mdx
+++ b/src/pages/using-spark/components/stack.mdx
@@ -17,6 +17,7 @@ at wider viewports.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Stack Example"
 />
 
 ### Usage
@@ -84,6 +85,7 @@ By default, Stack Items will form a single vertical column.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Default Stack Example"
 />
 
 ### Stack with Space Between Items
@@ -101,6 +103,7 @@ splits at the small breakpoint (“s”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Split Stack Example"
 />
 
 ### Split Stack with Two Columns
@@ -116,6 +119,7 @@ small breakpoint (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Two Column Split Stack Example"
 />
 
 ### Split Stack with Three Columns
@@ -130,6 +134,7 @@ extra small breakpoint (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Three Column Split Stack Example"
 />
 
 ### Split Stack with Four Columns
@@ -144,6 +149,7 @@ small breakpoint (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Four Column Split Stack Example"
 />
 
 ### Split Stack with Five Columns
@@ -158,6 +164,7 @@ extra small breakpoint (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Five Column Split Stack Example"
 />
 
 ### Split Stack with Six Columns
@@ -172,6 +179,7 @@ small breakpoint (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Six Column Split Stack Example"
 />
 
 ### Split Stack with 75/25 Columns
@@ -187,6 +195,7 @@ The example shows the split at extra small (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="75/25 Split Stack Example"
 />
 
 ### Split Stack with 60/40 Columns
@@ -203,6 +212,7 @@ shows the split at extra small (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="60/40 Split Stack Example"
 />
 
 ### Split Stack with 70/30 Columns
@@ -219,6 +229,7 @@ at extra small (“xs”).
   hasReact
   hasAngular
   hasHTML
+  titleAttr="70/30 Split Stack Example"
 />
 
 ### Split Stack with Mixed and Nested Columns
@@ -236,6 +247,7 @@ in the remaining space.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Split Stack Example with Mixed and Nested Columns"
 />
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/stepper.mdx b/src/pages/using-spark/components/stepper.mdx
index 3f40bf1250..79c940fbed 100644
--- a/src/pages/using-spark/components/stepper.mdx
+++ b/src/pages/using-spark/components/stepper.mdx
@@ -13,6 +13,7 @@ with optional descriptions and images.
   componentName="stepper--default-story"
   hasReact
   hasHTML
+  titleAttr="Stepper Example"
 />
 
 ### Usage
@@ -44,6 +45,7 @@ The Default Stepper is a series of steps with titles.
   componentName="stepper--default-story"
   hasReact
   hasHTML
+  titleAttr="Default Stepper Example"
 />
 
 ### With Step Descriptions
@@ -55,6 +57,7 @@ that is visible when the step is selected.
   componentName="stepper--with-step-descriptions"
   hasReact
   hasHTML
+  titleAttr="Stepper with Step Descriptions Example"
 />
 
 ### With Dark Background
@@ -66,6 +69,7 @@ font colors will be inverted for better legibility.
   componentName="stepper--with-dark-background"
   hasHTML
   hasReact
+  titleAttr="Stepper with Dark Background Example"
 />
 
 ### With Carousel
@@ -82,6 +86,7 @@ and description.
 
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/table.mdx b/src/pages/using-spark/components/table.mdx
index 1b34a21847..af2a24b621 100644
--- a/src/pages/using-spark/components/table.mdx
+++ b/src/pages/using-spark/components/table.mdx
@@ -7,7 +7,7 @@ import { SprkDivider } from '@sparkdesignsystem/spark-react';
 # Table
 
 Tables organize and display information
-from a data set into rows and columns. 
+from a data set into rows and columns.
 
 
 
 ### Usage
@@ -45,7 +46,7 @@ the column heading.
 ### Column Comparison
 
 Column Comparison is the default Table.
-It is useful for comparing columns of data. 
+It is useful for comparing columns of data.
 
 
 
 ### Secondary Table
 
 Secondary Table reduces the visual weight of
-the headers, making the Table stand out less. 
+the headers, making the Table stand out less.
 
 
 
 ### Grouped Columns
 
 Grouped Column Table should be used when multiple columns
 have a similar theme and need to be grouped with a higher
-level header. 
+level header.
 
 
 
 ### Row Comparison
 
 Row Comparison adds a header to each row,
-allowing data to be grouped across rows and columns. 
+allowing data to be grouped across rows and columns.
 
 
 
 ### Secondary Row Comparison
 
 Secondary Row Comparison removes the column
-headers and adds a dedicated column for an action. 
+headers and adds a dedicated column for an action.
 
 
 
 ## Anatomy
diff --git a/src/pages/using-spark/components/tabs.mdx b/src/pages/using-spark/components/tabs.mdx
index c5ec5e5b7b..20c0f36e5b 100644
--- a/src/pages/using-spark/components/tabs.mdx
+++ b/src/pages/using-spark/components/tabs.mdx
@@ -7,7 +7,7 @@ import { SprkDivider } from '@sparkdesignsystem/spark-react';
 # Tabs
 
 The Tabs component organizes multiple sections of
-related content so a client can view one section at a time. 
+related content so a client can view one section at a time.
 
 
 
 ### Usage
 
 Tabs are used to navigate between multiple sections
-of related content without leaving the context of the page. 
+of related content without leaving the context of the page.
 
 ### Guidelines
 
@@ -47,4 +48,4 @@ with HOME and to the last Tabs button with END.
 when a client navigates to a new Tabs button.
 - The TAB key moves the client into the content
 associated with the Tabs button and SHIFT+TAB
-moves focus back to the button. 
\ No newline at end of file
+moves focus back to the button.
\ No newline at end of file
diff --git a/src/pages/using-spark/components/toggle.mdx b/src/pages/using-spark/components/toggle.mdx
index 7908c3d89f..9c055ee239 100644
--- a/src/pages/using-spark/components/toggle.mdx
+++ b/src/pages/using-spark/components/toggle.mdx
@@ -13,24 +13,25 @@ Toggle shows and hides a block of content.
   hasReact
   hasAngular
   hasHTML
+  titleAttr="Toggle Example"
 />
 
 ### Usage
 
 Use Toggle when you need to toggle the
 visibility of a block of content. For
-example, a disclaimer. 
+example, a disclaimer.
 
 ### Guidelines
 
 - By default, Toggle content is hidden,
-so high-priority content should be avoided. 
+so high-priority content should be avoided.
 - If you are using several Toggle components
 in succession, consider the
-[Accordion](/using-spark/components/accordion) component. 
+[Accordion](/using-spark/components/accordion) component.
 - The content within a Toggle should be kept
-short and relevant to its context for maximum usability. 
-- Keep the text of the Toggle trigger short. 
+short and relevant to its context for maximum usability.
+- Keep the text of the Toggle trigger short.
 
 
 
 ### Usage

From 9039d7d898c3394dc069886684e3c0f5921de779 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Mon, 4 Jan 2021 18:04:06 -0500
Subject: [PATCH 17/25] add examples and guides to mobile nav

---
 src/components/Header.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 891d97b3c2..2ef3a5f44f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -67,13 +67,29 @@ const Header = ({ setContext }) => {
     element: Link,
   }));
 
+  const usingSparkExamples = useUsingSparkData().examples.map((page) => ({
+    text: page.node.frontmatter.title,
+    to: `/using-spark/examples/${page.node.parent.name}`,
+    element: Link,
+  }));
+
   const usingSparkFoundations = useUsingSparkData().foundations.map((page) => ({
     text: page.node.frontmatter.title,
     to: `/using-spark/foundations/${page.node.parent.name}`,
     element: Link,
   }));
 
-  const usingSparkPages = usingSparkFoundations.concat(usingSparkComponents);
+  const usingSparkGuides = useUsingSparkData().guides.map((page) => ({
+    text: page.node.frontmatter.title,
+    to: `/using-spark/guides/${page.node.parent.name}`,
+    element: Link,
+  }));
+
+  const usingSparkPages = usingSparkFoundations.concat(
+    usingSparkGuides,
+    usingSparkComponents,
+    usingSparkExamples,
+  );
 
   const principlePages = usePrincipleSparkData().map((page) => ({
     text: page.node.frontmatter.title,

From 2533ad02a883693d3369b2e39cff652a79cf7a64 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Mon, 4 Jan 2021 21:50:49 -0500
Subject: [PATCH 18/25] rollback SprkCard change

---
 src/pages/index.js | 426 ++++++++++++++++++++-------------------------
 1 file changed, 187 insertions(+), 239 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 6b7a869ab2..61147c5448 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,10 @@
 import React from 'react';
-import { SprkStack, SprkStackItem } from '@sparkdesignsystem/spark-react';
+import {
+  SprkStack,
+  SprkStackItem,
+  SprkCard,
+  SprkLink,
+} from '@sparkdesignsystem/spark-react';
 import Layout from '../components/layouts/Layout';
 import componentsMedia from '../images/components.svg';
 import developersMedia from '../images/developers.svg';
@@ -8,6 +13,148 @@ import foundationsMedia from '../images/foundations.svg';
 import newsMedia from '../images/news-and-updates.svg';
 import utilitiesMedia from '../images/utilities.svg';
 
+const teaserDesigners = {
+  bodyText: `
+    Get started with Design by reading the principles
+    that we use in Spark Design System.
+  `,
+  cta: {
+    text: 'Go To Designer Basics',
+    ctaVariant: 'button',
+    buttonVariant: 'tertiary',
+    href: '/principles/design-principles',
+  },
+  media: {
+    href: '/principles/design-principles',
+    mediaLinkElement: 'a',
+    imgAlt: 'An illustration of someone hands drawing on a tablet.',
+    imgSrc: designersMedia,
+    mediaVariant: 'img',
+  },
+  title: 'Designer Basics',
+  titleFirst: false,
+};
+
+const teaserDevelopers = {
+  bodyText: `
+    Learn how to install Spark’s
+    npm packages into the build
+    of your application. You’ll
+    also find support for setting
+    up Sass, React, Angular, and more.
+  `,
+  cta: {
+    text: 'Go To Developer Basics',
+    ctaVariant: 'button',
+    buttonVariant: 'tertiary',
+    href: '/installing-spark',
+  },
+  media: {
+    href: '/installing-spark',
+    mediaLinkElement: 'a',
+    imgAlt: 'An illustration of a computer with code displayed.',
+    imgSrc: developersMedia,
+    mediaVariant: 'img',
+  },
+  title: 'Developer Basics',
+  titleFirst: false,
+};
+
+const teaserComponents = {
+  bodyText: `
+    Explore the library of Spark
+    components and supporting
+    documentation, including
+    design guidelines, code
+    samples, and configuration
+    options.
+  `,
+  cta: {
+    text: 'Go To Components',
+    ctaVariant: 'button',
+    buttonVariant: 'tertiary',
+    href: '/using-spark/components/button',
+  },
+  media: {
+    href: '/using-spark/components/button',
+    mediaLinkElement: 'a',
+    imgAlt: 'An illustration of a graph paper and a magnifying glass.',
+    imgSrc: componentsMedia,
+    mediaVariant: 'img',
+  },
+  title: 'Components',
+  titleFirst: false,
+};
+
+const teaserFoundations = {
+  bodyText: `
+   Looking for our brand color palette,
+   typography guidelines, element spacing,
+    and other foundational style elements?
+    Start here.
+  `,
+  cta: {
+    text: 'Go To Foundations',
+    ctaVariant: 'button',
+    buttonVariant: 'tertiary',
+    href: '/using-spark/foundations/color',
+  },
+  media: {
+    href: '/using-spark/foundations/color',
+    mediaLinkElement: 'a',
+    imgAlt: 'Decorative illustrations of type and color.',
+    imgSrc: foundationsMedia,
+    mediaVariant: 'img',
+  },
+  title: 'Foundations',
+  titleFirst: false,
+};
+
+const teaserUtils = {
+  bodyText: `
+    CSS class utilities for overriding
+    values, enhancing accessibility,
+    theming, and more.
+  `,
+  cta: {
+    text: 'Go To Utilities',
+    ctaVariant: 'button',
+    buttonVariant: 'tertiary',
+    href: '/using-spark/foundations/css-utilities',
+  },
+  media: {
+    href: '/using-spark/foundations/css-utilities',
+    mediaLinkElement: 'a',
+    imgAlt: 'Decorative illustrations of pages.',
+    imgSrc: utilitiesMedia,
+    mediaVariant: 'img',
+  },
+  title: 'Utilities',
+  titleFirst: false,
+};
+
+const teaserNews = {
+  bodyText: `
+    Get the latest release notes
+    and updates, as well as previous news and notes
+  `,
+  cta: {
+    text: 'Go To News',
+    ctaVariant: 'button',
+    buttonVariant: 'tertiary',
+    href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
+  },
+  media: {
+    href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
+    mediaLinkElement: 'a',
+    imgAlt: 'Decorative illustrations of mail and notifications.',
+    imgSrc: newsMedia,
+    mediaVariant: 'img',
+  },
+  title: 'News And Updates',
+  titleFirst: false,
+};
+
 const spacingBtwSections = 'huge';
 const spacingBtwHeadingAndContent = 'large';
 
@@ -34,241 +181,41 @@ const IndexPage = () => (
 
       
         

-          

-            
-              Go to Designer Basics
-            
-
-            

-              

-                Designer Basics
-              

-
-              

-                Get started with Design by reading the principles that we use in
-                Spark Design System.
-              

-
-              
-            

-          

-
-          

-            
-              Go to Developer Basics
-            
-
-            

-              

-                Developer Basics
-              

-
-              

-                Learn how to install Spark’s npm packages into the build of your
-                application. You’ll also find support for setting up Sass,
-                React, Angular, and more.
-              

-
-              
-            

-          

-
-          

-            
-              Go to Components
-            
-
-            

-              

-                Components
-              

-
-              

-                Explore the library of Spark components and supporting
-                documentation, including design guidelines, code samples, and
-                configuration options.
-              

-
-              
-            

-          

-
-          

-            
-              Go to Foundations
-            
-
-            

-              

-                Foundations
-              

-
-              

-                Looking for our brand color palette, typography guidelines,
-                element spacing, and other foundational style elements? Start
-                here.
-              

-
-              
-            

-          

-
-          

-            
-              Go to Utilities
-            
-
-            

-              

-                Utilities
-              

-
-              

-                CSS class utilities for overriding values, enhancing
-                accessibility, theming, and more.
-              

-
-              
-            

-          

-
-          

-            
-              Go to News
-            
-
-            

-              

-                News and Updates
-              

-
-              

-                Get the latest release notes and updates, as well as previous
-                news and notes.
-              

-
-              
-            

-          

+          
+
+          
+
+          
+
+          
+
+          
+
+          
         

       
 
@@ -279,12 +226,13 @@ const IndexPage = () => (
           
 
           
-            
               Learn More
-            
+            
           
         
       

From 14f53f1db8f40334da9236eb0db54e0e10b4706f Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Mon, 4 Jan 2021 22:14:22 -0500
Subject: [PATCH 19/25] homepage alt text

---
 src/pages/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 61147c5448..26772690d0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -27,7 +27,7 @@ const teaserDesigners = {
   media: {
     href: '/principles/design-principles',
     mediaLinkElement: 'a',
-    imgAlt: 'An illustration of someone hands drawing on a tablet.',
+    imgAlt: 'Go to Designer Basics',
     imgSrc: designersMedia,
     mediaVariant: 'img',
   },
@@ -52,7 +52,7 @@ const teaserDevelopers = {
   media: {
     href: '/installing-spark',
     mediaLinkElement: 'a',
-    imgAlt: 'An illustration of a computer with code displayed.',
+    imgAlt: 'Go to Developer Basics',
     imgSrc: developersMedia,
     mediaVariant: 'img',
   },
@@ -78,7 +78,7 @@ const teaserComponents = {
   media: {
     href: '/using-spark/components/button',
     mediaLinkElement: 'a',
-    imgAlt: 'An illustration of a graph paper and a magnifying glass.',
+    imgAlt: 'Go to Components',
     imgSrc: componentsMedia,
     mediaVariant: 'img',
   },
@@ -102,7 +102,7 @@ const teaserFoundations = {
   media: {
     href: '/using-spark/foundations/color',
     mediaLinkElement: 'a',
-    imgAlt: 'Decorative illustrations of type and color.',
+    imgAlt: 'Go to Foundations',
     imgSrc: foundationsMedia,
     mediaVariant: 'img',
   },
@@ -125,7 +125,7 @@ const teaserUtils = {
   media: {
     href: '/using-spark/foundations/css-utilities',
     mediaLinkElement: 'a',
-    imgAlt: 'Decorative illustrations of pages.',
+    imgAlt: 'Go to Utilities',
     imgSrc: utilitiesMedia,
     mediaVariant: 'img',
   },
@@ -147,7 +147,7 @@ const teaserNews = {
   media: {
     href: 'https://github.com/sparkdesignsystem/spark-design-system/releases',
     mediaLinkElement: 'a',
-    imgAlt: 'Decorative illustrations of mail and notifications.',
+    imgAlt: 'Go to News',
     imgSrc: newsMedia,
     mediaVariant: 'img',
   },

From a422082461522e101c920e7df0a8ba699287a00a Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Mon, 4 Jan 2021 23:08:12 -0500
Subject: [PATCH 20/25] code samples narrow layout

---
 src/components/markdown-render/inlineCode.js | 2 --
 src/scss/components/_code.scss               | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/markdown-render/inlineCode.js b/src/components/markdown-render/inlineCode.js
index 0694c40684..6e3d7273ab 100644
--- a/src/components/markdown-render/inlineCode.js
+++ b/src/components/markdown-render/inlineCode.js
@@ -16,8 +16,6 @@ const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
         
           {tokens.map((line, i) => (
             

diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss
index 3398444d76..3c98bea9a2 100644
--- a/src/scss/components/_code.scss
+++ b/src/scss/components/_code.scss
@@ -5,4 +5,6 @@
   margin: 2rem 0;
   max-width: 100%;
   padding: 2.75rem 2.75rem 1rem 2.75rem;
+  white-space: pre-wrap;
+  word-break: break-word;
 }

From 2be2ae4a722515a85067e567f5535c4d36ca83e3 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Tue, 5 Jan 2021 14:57:52 -0500
Subject: [PATCH 21/25] prism theme

---
 src/components/markdown-render/inlineCode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/markdown-render/inlineCode.js b/src/components/markdown-render/inlineCode.js
index 6e3d7273ab..048eac662c 100644
--- a/src/components/markdown-render/inlineCode.js
+++ b/src/components/markdown-render/inlineCode.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import customTheme from 'prism-react-renderer/themes/vsDark';
+import customTheme from 'prism-react-renderer/themes/duotoneDark';
 
 const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
   className = className ? className : '';

From c1ffab1507b4a97884195052df2567d6c7e7c882 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Tue, 5 Jan 2021 21:16:08 -0500
Subject: [PATCH 22/25] typo

---
 src/pages/installing-spark/react.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/installing-spark/react.mdx b/src/pages/installing-spark/react.mdx
index fd80de94e9..20249f5457 100644
--- a/src/pages/installing-spark/react.mdx
+++ b/src/pages/installing-spark/react.mdx
@@ -23,7 +23,7 @@ in your site.
   frameborder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
-  title="Youtube Player: Installing Spark in React Project"
+  title="Youtube Player: Installing Spark in a React Project"
 >
 
 ## Installing Sass

From 5f465603cc2346e0409d13a04bb615fce2d81011 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Tue, 5 Jan 2021 21:25:50 -0500
Subject: [PATCH 23/25] custom prism theme

---
 src/components/markdown-render/inlineCode.js |   3 +-
 src/scss/_spark-theme.scss                   |   6 +-
 src/scss/main.scss                           |   1 +
 src/scss/vendor/_prism.scss                  | 143 +++++++++++++++++++
 4 files changed, 148 insertions(+), 5 deletions(-)
 create mode 100644 src/scss/vendor/_prism.scss

diff --git a/src/components/markdown-render/inlineCode.js b/src/components/markdown-render/inlineCode.js
index 048eac662c..089e292a58 100644
--- a/src/components/markdown-render/inlineCode.js
+++ b/src/components/markdown-render/inlineCode.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import customTheme from 'prism-react-renderer/themes/duotoneDark';
 
 const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
   className = className ? className : '';
@@ -10,7 +9,7 @@ const InlineCode = ({ children, className, additionalPreClasses, theme }) => {
       {...defaultProps}
       code={children}
       language={language}
-      theme={theme || customTheme}
+      theme={undefined}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         
 code[class*="language-"] {
+  padding: .1em .3em;
+  border-radius: .3em;
+  color: #c8102e;
+  background: #e8e8e8;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+  opacity: .7;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #93a1a1;
+}
+.token.punctuation {
+  color: #2e1166;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #603aa1;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #298540;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9d2235;
+  background: #ffffff;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #1c6ef2;
+}
+.token.function {
+  color: #e50158;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #603aa1;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[data-line] {
+  position: relative;
+}
+pre[class*="language-"] > code[class*="language-"] {
+  position: relative;
+  z-index: 1;
+}
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: #f7ebc6;
+  box-shadow: inset 5px 0 0 #f7d87c;
+  z-index: 0;
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}
\ No newline at end of file

From 4fbb08b6a1ff8b5b2fe9f53656d2688bac6f7e1c Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Wed, 6 Jan 2021 11:16:34 -0500
Subject: [PATCH 24/25] fix link

---
 src/scss/vendor/_prism.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/vendor/_prism.scss b/src/scss/vendor/_prism.scss
index 16d2f98155..b99a674a31 100644
--- a/src/scss/vendor/_prism.scss
+++ b/src/scss/vendor/_prism.scss
@@ -1,5 +1,5 @@
 /* Generated with http://k88hudson.github.io/syntax-highlighting-theme-generator/www */
-/* http://k88hudson.github.io/react-markdocs */
+/* https://github.com/k88hudson/syntax-highlighting-theme-generator */
 /**
  * @author k88hudson
  *

From bbf81d2c01edc9f0652b7fa5358fa97322cf3700 Mon Sep 17 00:00:00 2001
From: Bob Wise 
Date: Fri, 8 Jan 2021 13:32:33 -0500
Subject: [PATCH 25/25] code formatting

---
 src/scss/components/_code.scss | 2 ++
 src/scss/vendor/_prism.scss    | 3 ---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss
index 3c98bea9a2..31c9b51dea 100644
--- a/src/scss/components/_code.scss
+++ b/src/scss/components/_code.scss
@@ -7,4 +7,6 @@
   padding: 2.75rem 2.75rem 1rem 2.75rem;
   white-space: pre-wrap;
   word-break: break-word;
+  border: 2px solid $sprk-black;
+  border-left: 5px solid $sprk-black;
 }
diff --git a/src/scss/vendor/_prism.scss b/src/scss/vendor/_prism.scss
index b99a674a31..63baaf2152 100644
--- a/src/scss/vendor/_prism.scss
+++ b/src/scss/vendor/_prism.scss
@@ -18,9 +18,7 @@ code[class*="language-"] {
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   direction: ltr;
   text-align: left;
-  white-space: pre;
   word-spacing: normal;
-  word-break: normal;
   line-height: 1.5;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -139,5 +137,4 @@ pre[class*="language-"] > code[class*="language-"] {
   z-index: 0;
   pointer-events: none;
   line-height: inherit;
-  white-space: pre;
 }
\ No newline at end of file