diff --git a/package.json b/package.json index b02a900f48..97e224879e 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", diff --git a/src/components/ComponentPreview.js b/src/components/ComponentPreview.js index ae36ecc16e..62c94ce831 100644 --- a/src/components/ComponentPreview.js +++ b/src/components/ComponentPreview.js @@ -13,6 +13,7 @@ const ComponentPreview = ({ maxHeight, maxWidth, allowScrolling, + titleAttr, }) => { const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`; @@ -26,7 +27,7 @@ const ComponentPreview = ({ maxWidth, }} scrolling={allowScrolling} - title="Component Preview" + title={titleAttr} 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, + titleAttr: PropTypes.string, }; ComponentPreview.defaultProps = { componentType: 'components', allowScrolling: false, + titleAttr: 'Component Preview', }; export default ComponentPreview; diff --git a/src/components/Header.js b/src/components/Header.js index a1634aca63..2ef3a5f44f 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -79,9 +79,16 @@ const Header = ({ setContext }) => { element: Link, })); - const usingSparkPages = usingSparkComponents.concat( + 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, - usingSparkFoundations, ); const principlePages = usePrincipleSparkData().map((page) => ({ 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

-
- -
- +
+ +
); }; 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 -
+
+
{ 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 }) => ( 
 (
           
 
           
-            
               Learn More
-            
+            
           
         
       
diff --git a/src/pages/installing-spark/angular.mdx b/src/pages/installing-spark/angular.mdx
index 92b4a1ed13..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
@@ -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/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-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
 
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
 
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
diff --git a/src/pages/installing-spark/react.mdx b/src/pages/installing-spark/react.mdx
index 0b7f5a5ce5..20249f5457 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
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
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
     
     
   
 
diff --git a/src/pages/using-spark/foundations/space.mdx b/src/pages/using-spark/foundations/space.mdx
index 5e110b8c14..a7942000af 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..b704ce5d02 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
  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;
+}
\ No newline at end of file