Issue-#944: Add v4 version badge

src/components/@shared/atoms/Badge.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './Badge.module.scss'
+import PropTypes from 'prop-types'
+
+export default function Badge({ label }) {
+  return <span className={styles.badge}>{label}</span>
+}
+
+Badge.propTypes = {
+  label: PropTypes.string
+}

src/components/@shared/atoms/Badge.module.scss

@@ -0,0 +1,15 @@
+@import 'variables';
+
+.badge {
+  display: inline-block;
+  font-size: $font-size-mini;
+  font-family: $font-family-base;
+  font-weight: $font-weight-bold;
+  line-height: 1 !important;
+  text-transform: uppercase;
+  padding: 0.2rem;
+  border-radius: $border-radius;
+  color: $brand-white;
+  background: $brand-purple;
+  vertical-align: top;
+}

src/components/HeaderHome.jsx

@@ -5,6 +5,7 @@ import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'
 import SearchButton from '../components/Search/SearchButton'
 import ToggleSwitch from './ToggleSwitch'
+import Badge from './@shared/atoms/Badge'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -25,7 +26,9 @@ const HeaderHome = () => (
         <header className={styles.header}>
           <Content>
             <Logo className={styles.headerLogo} />
-            <h1 className={styles.headerTitle}>{siteTitle}</h1>
+            <h1 className={styles.headerTitle}>
+              {siteTitle} <Badge label="v4" />
+            </h1>
             <p className={styles.headerDescription}>
               {siteDescription}
               <div className={styles.container}>