diff --git a/docs/api/select.md b/docs/api/select.md
index b632d936751..d3792bfe52a 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -54,9 +54,9 @@ By adding the `multiple` attribute to select, users are able to select multiple
 
 Note: the `action-sheet` and `popover` interfaces will not work with multiple selection.
 
-import MulipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
+import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md';
 
-<MulipleSelectionExample />
+<MultipleSelectionExample />
 
 ## Responding to Interaction
 
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index d4a6c27afdb..781b65e0bdb 100644
--- a/src/components/global/Playground/index.tsx
+++ b/src/components/global/Playground/index.tsx
@@ -96,11 +96,6 @@ interface UsageTargetOptions {
      */
     declarations?: string[];
   };
-  /**
-   * The major version of Ionic to use in the generated Stackblitz examples.
-   * This will also load assets for Stackblitz from the specified version directory.
-   */
-  version?: number;
 }
 
 /**
@@ -120,7 +115,7 @@ export default function Playground({
   mode,
   devicePreview,
   includeIonContent = true,
-  version = 6,
+  version,
 }: {
   code: { [key in UsageTarget]?: MdxContent | UsageTargetOptions };
   title?: string;
@@ -135,6 +130,10 @@ export default function Playground({
   description?: string;
   devicePreview?: boolean;
   includeIonContent: boolean;
+  /**
+   * The major version of Ionic to use in the generated Stackblitz examples.
+   * This will also load assets for Stackblitz from the specified version directory.
+   */
   version: number;
 }) {
   if (!code || Object.keys(code).length === 0) {
@@ -145,6 +144,10 @@ export default function Playground({
     console.warn(`Invalid mode provided: ${mode}. Accepted values are: "ios" or "md".`);
     return;
   }
+  if (typeof version === 'undefined') {
+    console.warn('You must specify a `version` for the Playground example. For example: <Playground version="7" />');
+    return;
+  }
 
   const { isDarkTheme } = useThemeContext();
 
diff --git a/static/usage/v6/accordion/accessibility/animations/index.md b/static/usage/v6/accordion/accessibility/animations/index.md
index ea858fcddee..37f6bcddd93 100644
--- a/static/usage/v6/accordion/accessibility/animations/index.md
+++ b/static/usage/v6/accordion/accessibility/animations/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/basic/index.md b/static/usage/v6/accordion/basic/index.md
index 1ade912b468..ec5c7e61e3b 100644
--- a/static/usage/v6/accordion/basic/index.md
+++ b/static/usage/v6/accordion/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
index f1f583205bf..32e5cc12ce2 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md
@@ -12,6 +12,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/accordion/customization/expansion-styles/index.md b/static/usage/v6/accordion/customization/expansion-styles/index.md
index c80478a0d42..1b08eaa20c5 100644
--- a/static/usage/v6/accordion/customization/expansion-styles/index.md
+++ b/static/usage/v6/accordion/customization/expansion-styles/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md
index bad8bdf71b9..691d4b933b1 100644
--- a/static/usage/v6/accordion/customization/icons/index.md
+++ b/static/usage/v6/accordion/customization/icons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/customization/theming/index.md b/static/usage/v6/accordion/customization/theming/index.md
index c87341a846a..eba76679a03 100644
--- a/static/usage/v6/accordion/customization/theming/index.md
+++ b/static/usage/v6/accordion/customization/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/accordion/disable-group/index.md b/static/usage/v6/accordion/disable-group/index.md
index 79366ce5f7a..aaad754781f 100644
--- a/static/usage/v6/accordion/disable-group/index.md
+++ b/static/usage/v6/accordion/disable-group/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/disable/group/index.md b/static/usage/v6/accordion/disable/group/index.md
index ccff0c07398..beb29908e79 100644
--- a/static/usage/v6/accordion/disable/group/index.md
+++ b/static/usage/v6/accordion/disable/group/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/disable/individual/index.md b/static/usage/v6/accordion/disable/individual/index.md
index 547959c608a..2323a1b3b15 100644
--- a/static/usage/v6/accordion/disable/individual/index.md
+++ b/static/usage/v6/accordion/disable/individual/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/listen-changes/index.md b/static/usage/v6/accordion/listen-changes/index.md
index 4084b33fed0..481f9f47795 100644
--- a/static/usage/v6/accordion/listen-changes/index.md
+++ b/static/usage/v6/accordion/listen-changes/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/multiple/index.md b/static/usage/v6/accordion/multiple/index.md
index f34ed0e3808..6a56c3fe4fa 100644
--- a/static/usage/v6/accordion/multiple/index.md
+++ b/static/usage/v6/accordion/multiple/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/readonly/group/index.md b/static/usage/v6/accordion/readonly/group/index.md
index 921c640de03..263e18eb79d 100644
--- a/static/usage/v6/accordion/readonly/group/index.md
+++ b/static/usage/v6/accordion/readonly/group/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/readonly/individual/index.md b/static/usage/v6/accordion/readonly/individual/index.md
index ad6bb9e64a1..6a5f0d991f8 100644
--- a/static/usage/v6/accordion/readonly/individual/index.md
+++ b/static/usage/v6/accordion/readonly/individual/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/accordion/toggle/index.md b/static/usage/v6/accordion/toggle/index.md
index ad7487404fc..fb5331bf14b 100644
--- a/static/usage/v6/accordion/toggle/index.md
+++ b/static/usage/v6/accordion/toggle/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/action-sheet/basic/index.md b/static/usage/v6/action-sheet/basic/index.md
index c96980b1b83..25da44bf4c6 100644
--- a/static/usage/v6/action-sheet/basic/index.md
+++ b/static/usage/v6/action-sheet/basic/index.md
@@ -12,6 +12,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/action-sheet/theming/css-properties/index.md b/static/usage/v6/action-sheet/theming/css-properties/index.md
index 9c53afca208..7d9eebab14a 100644
--- a/static/usage/v6/action-sheet/theming/css-properties/index.md
+++ b/static/usage/v6/action-sheet/theming/css-properties/index.md
@@ -12,6 +12,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/action-sheet/theming/styling/index.md b/static/usage/v6/action-sheet/theming/styling/index.md
index c2c3d7c42c6..ef07b833a7c 100644
--- a/static/usage/v6/action-sheet/theming/styling/index.md
+++ b/static/usage/v6/action-sheet/theming/styling/index.md
@@ -12,6 +12,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/alert/buttons/index.md b/static/usage/v6/alert/buttons/index.md
index 18c070e5d1c..d0c16fbccaa 100644
--- a/static/usage/v6/alert/buttons/index.md
+++ b/static/usage/v6/alert/buttons/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/customization/index.md b/static/usage/v6/alert/customization/index.md
index bcb94e81898..4da97de4af4 100644
--- a/static/usage/v6/alert/customization/index.md
+++ b/static/usage/v6/alert/customization/index.md
@@ -11,6 +11,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/inputs/radios/index.md b/static/usage/v6/alert/inputs/radios/index.md
index f76eebd547b..d92d2862601 100644
--- a/static/usage/v6/alert/inputs/radios/index.md
+++ b/static/usage/v6/alert/inputs/radios/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/inputs/text-inputs/index.md b/static/usage/v6/alert/inputs/text-inputs/index.md
index ab42a98fe97..1e70ed5db98 100644
--- a/static/usage/v6/alert/inputs/text-inputs/index.md
+++ b/static/usage/v6/alert/inputs/text-inputs/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="450px"
   code={{
     javascript,
diff --git a/static/usage/v6/alert/presenting/controller/index.md b/static/usage/v6/alert/presenting/controller/index.md
index 5f84fadb3d8..de4bf3866ef 100644
--- a/static/usage/v6/alert/presenting/controller/index.md
+++ b/static/usage/v6/alert/presenting/controller/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/avatar/basic/index.md b/static/usage/v6/avatar/basic/index.md
index cfb4d046b72..fbaaeecd149 100644
--- a/static/usage/v6/avatar/basic/index.md
+++ b/static/usage/v6/avatar/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/avatar/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/avatar/basic/demo.html" />
diff --git a/static/usage/v6/avatar/chip/index.md b/static/usage/v6/avatar/chip/index.md
index 25c8aeff123..b87c62d255b 100644
--- a/static/usage/v6/avatar/chip/index.md
+++ b/static/usage/v6/avatar/chip/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/avatar/chip/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/avatar/chip/demo.html" />
diff --git a/static/usage/v6/avatar/item/index.md b/static/usage/v6/avatar/item/index.md
index 67f97708b02..d592bf249c3 100644
--- a/static/usage/v6/avatar/item/index.md
+++ b/static/usage/v6/avatar/item/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/avatar/item/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/avatar/item/demo.html" />
diff --git a/static/usage/v6/avatar/theming/css-properties/index.md b/static/usage/v6/avatar/theming/css-properties/index.md
index 51f2c0650ce..4ff0ecd1679 100644
--- a/static/usage/v6/avatar/theming/css-properties/index.md
+++ b/static/usage/v6/avatar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md
index 499a6dbad81..6c29748fe6f 100644
--- a/static/usage/v6/back-button/basic/index.md
+++ b/static/usage/v6/back-button/basic/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md
index 437c5d5a6a3..30f58541ecb 100644
--- a/static/usage/v6/back-button/custom/index.md
+++ b/static/usage/v6/back-button/custom/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/backdrop/basic/index.md b/static/usage/v6/backdrop/basic/index.md
index be1bca17132..63ff609c996 100644
--- a/static/usage/v6/backdrop/basic/index.md
+++ b/static/usage/v6/backdrop/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/backdrop/basic/demo.html" devicePreview={true} />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/backdrop/basic/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v6/backdrop/styling/index.md b/static/usage/v6/backdrop/styling/index.md
index 8d16c744a02..7d3aad9224c 100644
--- a/static/usage/v6/backdrop/styling/index.md
+++ b/static/usage/v6/backdrop/styling/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/badge/basic/index.md b/static/usage/v6/badge/basic/index.md
index 7395983f861..7b2955c229d 100644
--- a/static/usage/v6/badge/basic/index.md
+++ b/static/usage/v6/badge/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/badge/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/badge/basic/demo.html" />
diff --git a/static/usage/v6/badge/theming/colors/index.md b/static/usage/v6/badge/theming/colors/index.md
index da0a5d660aa..47aa8b9e1b4 100644
--- a/static/usage/v6/badge/theming/colors/index.md
+++ b/static/usage/v6/badge/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/badge/theming/colors/demo.html" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/badge/theming/colors/demo.html"
+/>
diff --git a/static/usage/v6/badge/theming/css-properties/index.md b/static/usage/v6/badge/theming/css-properties/index.md
index 48ac100bf66..711d4f0a38d 100644
--- a/static/usage/v6/badge/theming/css-properties/index.md
+++ b/static/usage/v6/badge/theming/css-properties/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/breadcrumbs/basic/index.md b/static/usage/v6/breadcrumbs/basic/index.md
index f05247a2f80..0493778d17f 100644
--- a/static/usage/v6/breadcrumbs/basic/index.md
+++ b/static/usage/v6/breadcrumbs/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/basic/demo.html" />
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
index fd50385529a..fc5c8a29061 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
index 26448ff6079..eccdbd8d512 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html"
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
index 3f7616b8358..284c2a429a4 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/breadcrumbs/collapsing-items/max-items/demo.html"
 />
diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
index a5e3fe3aeec..a0b924e8127 100644
--- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
+++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{
     javascript,
diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
index 1656c92b639..a9305b79feb 100644
--- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
+++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md
@@ -5,4 +5,8 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/icons/custom-separators/demo.html" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/icons/custom-separators/demo.html"
+/>
diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
index d46f6c6ba52..0f2e9ac47cc 100644
--- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
+++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/breadcrumbs/icons/icons-on-items/demo.html"
diff --git a/static/usage/v6/breadcrumbs/theming/colors/index.md b/static/usage/v6/breadcrumbs/theming/colors/index.md
index 22df9ce3cb4..632b91c2cbb 100644
--- a/static/usage/v6/breadcrumbs/theming/colors/index.md
+++ b/static/usage/v6/breadcrumbs/theming/colors/index.md
@@ -5,4 +5,8 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/breadcrumbs/theming/colors/demo.html" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/breadcrumbs/theming/colors/demo.html"
+/>
diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/index.md b/static/usage/v6/breadcrumbs/theming/css-properties/index.md
index de65ba9677f..013c1e19024 100644
--- a/static/usage/v6/breadcrumbs/theming/css-properties/index.md
+++ b/static/usage/v6/breadcrumbs/theming/css-properties/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/button/basic/index.md b/static/usage/v6/button/basic/index.md
index a18c429e9d3..c24928dc654 100644
--- a/static/usage/v6/button/basic/index.md
+++ b/static/usage/v6/button/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/basic/demo.html" />
diff --git a/static/usage/v6/button/expand/index.md b/static/usage/v6/button/expand/index.md
index 9f6db466051..13e7cabce8d 100644
--- a/static/usage/v6/button/expand/index.md
+++ b/static/usage/v6/button/expand/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/expand/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/expand/demo.html" />
diff --git a/static/usage/v6/button/fill/index.md b/static/usage/v6/button/fill/index.md
index b042cc0c615..00419cc7e00 100644
--- a/static/usage/v6/button/fill/index.md
+++ b/static/usage/v6/button/fill/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/fill/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/fill/demo.html" />
diff --git a/static/usage/v6/button/icons/index.md b/static/usage/v6/button/icons/index.md
index 518188e64e0..591563be9a0 100644
--- a/static/usage/v6/button/icons/index.md
+++ b/static/usage/v6/button/icons/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/icons/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/icons/demo.html" />
diff --git a/static/usage/v6/button/shape/index.md b/static/usage/v6/button/shape/index.md
index 76562ba231e..8f2fd028d0c 100644
--- a/static/usage/v6/button/shape/index.md
+++ b/static/usage/v6/button/shape/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/shape/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/shape/demo.html" />
diff --git a/static/usage/v6/button/size/index.md b/static/usage/v6/button/size/index.md
index a606debb051..7a17c6f7464 100644
--- a/static/usage/v6/button/size/index.md
+++ b/static/usage/v6/button/size/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/size/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/size/demo.html" />
diff --git a/static/usage/v6/button/theming/colors/index.md b/static/usage/v6/button/theming/colors/index.md
index 3c5760b1e32..af3ba6d2ea5 100644
--- a/static/usage/v6/button/theming/colors/index.md
+++ b/static/usage/v6/button/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/button/theming/colors/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/button/theming/colors/demo.html" />
diff --git a/static/usage/v6/button/theming/css-properties/index.md b/static/usage/v6/button/theming/css-properties/index.md
index 9e0fcb66c2b..06905de166a 100644
--- a/static/usage/v6/button/theming/css-properties/index.md
+++ b/static/usage/v6/button/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/buttons/basic/index.md b/static/usage/v6/buttons/basic/index.md
index 59f77161471..ab43ddf246d 100644
--- a/static/usage/v6/buttons/basic/index.md
+++ b/static/usage/v6/buttons/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/buttons/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/buttons/basic/demo.html" />
diff --git a/static/usage/v6/buttons/placement/index.md b/static/usage/v6/buttons/placement/index.md
index ed4a5d80d7e..a73fed1921b 100644
--- a/static/usage/v6/buttons/placement/index.md
+++ b/static/usage/v6/buttons/placement/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/buttons/placement/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/buttons/placement/demo.html" />
diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md
index 910b6526fc7..f0bee55af1c 100644
--- a/static/usage/v6/buttons/types/index.md
+++ b/static/usage/v6/buttons/types/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/buttons/types/demo.html" size="medium" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/buttons/types/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/card/basic/index.md b/static/usage/v6/card/basic/index.md
index 2b73d2d8788..37aa8c0cd1a 100644
--- a/static/usage/v6/card/basic/index.md
+++ b/static/usage/v6/card/basic/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/buttons/index.md b/static/usage/v6/card/buttons/index.md
index 36626c8371f..fd6b3b2e745 100644
--- a/static/usage/v6/card/buttons/index.md
+++ b/static/usage/v6/card/buttons/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/list/index.md b/static/usage/v6/card/list/index.md
index 7ca1159169c..d65a355826c 100644
--- a/static/usage/v6/card/list/index.md
+++ b/static/usage/v6/card/list/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/media/index.md b/static/usage/v6/card/media/index.md
index 2a6ba671517..04c0a8a05ad 100644
--- a/static/usage/v6/card/media/index.md
+++ b/static/usage/v6/card/media/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/theming/colors/index.md b/static/usage/v6/card/theming/colors/index.md
index 07b04db71bc..d89e8b65362 100644
--- a/static/usage/v6/card/theming/colors/index.md
+++ b/static/usage/v6/card/theming/colors/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/card/theming/css-properties/index.md b/static/usage/v6/card/theming/css-properties/index.md
index fe3114dbdef..85d28e10e0c 100644
--- a/static/usage/v6/card/theming/css-properties/index.md
+++ b/static/usage/v6/card/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/checkbox/basic/index.md b/static/usage/v6/checkbox/basic/index.md
index f7ce86204f3..98776d2e36c 100644
--- a/static/usage/v6/checkbox/basic/index.md
+++ b/static/usage/v6/checkbox/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/checkbox/indeterminate/index.md b/static/usage/v6/checkbox/indeterminate/index.md
index 48cd83db7f2..a70a99b7543 100644
--- a/static/usage/v6/checkbox/indeterminate/index.md
+++ b/static/usage/v6/checkbox/indeterminate/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/checkbox/theming/css-properties/index.md b/static/usage/v6/checkbox/theming/css-properties/index.md
index df00b8a7342..8d442940849 100644
--- a/static/usage/v6/checkbox/theming/css-properties/index.md
+++ b/static/usage/v6/checkbox/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/chip/basic/index.md b/static/usage/v6/chip/basic/index.md
index 1d79e0856a0..f9c31c8e5ac 100644
--- a/static/usage/v6/chip/basic/index.md
+++ b/static/usage/v6/chip/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/chip/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/chip/basic/demo.html" />
diff --git a/static/usage/v6/chip/slots/index.md b/static/usage/v6/chip/slots/index.md
index 7b6ef1233ee..71be95fe594 100644
--- a/static/usage/v6/chip/slots/index.md
+++ b/static/usage/v6/chip/slots/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/chip/slots/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/chip/slots/demo.html" />
diff --git a/static/usage/v6/chip/theming/colors/index.md b/static/usage/v6/chip/theming/colors/index.md
index d5561ca8b75..096cfc43691 100644
--- a/static/usage/v6/chip/theming/colors/index.md
+++ b/static/usage/v6/chip/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/chip/theming/colors/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/chip/theming/colors/demo.html" />
diff --git a/static/usage/v6/chip/theming/css-properties/index.md b/static/usage/v6/chip/theming/css-properties/index.md
index 5851a62f350..0ee9a98de33 100644
--- a/static/usage/v6/chip/theming/css-properties/index.md
+++ b/static/usage/v6/chip/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/basic/index.md b/static/usage/v6/content/basic/index.md
index eb5222bb206..57d00ac1a61 100644
--- a/static/usage/v6/content/basic/index.md
+++ b/static/usage/v6/content/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/content/basic/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/content/fixed/index.md b/static/usage/v6/content/fixed/index.md
index 5088699b439..f43bcffead6 100644
--- a/static/usage/v6/content/fixed/index.md
+++ b/static/usage/v6/content/fixed/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/fullscreen/index.md b/static/usage/v6/content/fullscreen/index.md
index 108bab52b60..33339463732 100644
--- a/static/usage/v6/content/fullscreen/index.md
+++ b/static/usage/v6/content/fullscreen/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/header-footer/index.md b/static/usage/v6/content/header-footer/index.md
index 991dbe74d83..a64430448eb 100644
--- a/static/usage/v6/content/header-footer/index.md
+++ b/static/usage/v6/content/header-footer/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/content/header-footer/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/content/scroll-events/index.md b/static/usage/v6/content/scroll-events/index.md
index 732a6ab9032..0f3adcd2f76 100644
--- a/static/usage/v6/content/scroll-events/index.md
+++ b/static/usage/v6/content/scroll-events/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/content/scroll-methods/index.md b/static/usage/v6/content/scroll-methods/index.md
index b1aa61e2bf7..6814aac5c57 100644
--- a/static/usage/v6/content/scroll-methods/index.md
+++ b/static/usage/v6/content/scroll-methods/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/content/theming/colors/index.md b/static/usage/v6/content/theming/colors/index.md
index b233f63b61d..c1226c11f2d 100644
--- a/static/usage/v6/content/theming/colors/index.md
+++ b/static/usage/v6/content/theming/colors/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/content/theming/colors/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/content/theming/css-properties/index.md b/static/usage/v6/content/theming/css-properties/index.md
index 3a95fce44eb..e30e48ba4c2 100644
--- a/static/usage/v6/content/theming/css-properties/index.md
+++ b/static/usage/v6/content/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/content/theming/css-shadow-parts/index.md b/static/usage/v6/content/theming/css-shadow-parts/index.md
index 72303692b02..0c80aec61dd 100644
--- a/static/usage/v6/content/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/content/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/datetime-button/basic/index.md b/static/usage/v6/datetime-button/basic/index.md
index c835c072c58..a362732431b 100644
--- a/static/usage/v6/datetime-button/basic/index.md
+++ b/static/usage/v6/datetime-button/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/datetime-button/basic/demo.html" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime-button/basic/demo.html"
+/>
diff --git a/static/usage/v6/datetime/basic/index.md b/static/usage/v6/datetime/basic/index.md
index d63897a88e0..e7a042f3159 100644
--- a/static/usage/v6/datetime/basic/index.md
+++ b/static/usage/v6/datetime/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/datetime/basic/demo.html" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/basic/demo.html"
+/>
diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/index.md b/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
index 01c27026f13..a7bd0d9395d 100644
--- a/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
+++ b/static/usage/v6/datetime/buttons/customizing-button-texts/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/buttons/customizing-button-texts/demo.html"
diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/index.md b/static/usage/v6/datetime/buttons/customizing-buttons/index.md
index 8ae133878d9..325b683dfca 100644
--- a/static/usage/v6/datetime/buttons/customizing-buttons/index.md
+++ b/static/usage/v6/datetime/buttons/customizing-buttons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/buttons/customizing-buttons/demo.html"
diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
index eac02cfaf31..ccb24b7303e 100644
--- a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
+++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="500px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html"
diff --git a/static/usage/v6/datetime/date-constraints/advanced/index.md b/static/usage/v6/datetime/date-constraints/advanced/index.md
index 559f102f49c..85abd71ab06 100644
--- a/static/usage/v6/datetime/date-constraints/advanced/index.md
+++ b/static/usage/v6/datetime/date-constraints/advanced/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{
     javascript,
diff --git a/static/usage/v6/datetime/date-constraints/max-min/index.md b/static/usage/v6/datetime/date-constraints/max-min/index.md
index efebb40972c..cdc01de7a05 100644
--- a/static/usage/v6/datetime/date-constraints/max-min/index.md
+++ b/static/usage/v6/datetime/date-constraints/max-min/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/date-constraints/max-min/demo.html"
diff --git a/static/usage/v6/datetime/date-constraints/values/index.md b/static/usage/v6/datetime/date-constraints/values/index.md
index e1bc1900d1f..0f4ddb066e3 100644
--- a/static/usage/v6/datetime/date-constraints/values/index.md
+++ b/static/usage/v6/datetime/date-constraints/values/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/date-constraints/values/demo.html"
diff --git a/static/usage/v6/datetime/localization/custom-locale/index.md b/static/usage/v6/datetime/localization/custom-locale/index.md
index 4b099f67d75..920c0ac7c50 100644
--- a/static/usage/v6/datetime/localization/custom-locale/index.md
+++ b/static/usage/v6/datetime/localization/custom-locale/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/custom-locale/demo.html"
diff --git a/static/usage/v6/datetime/localization/first-day-of-week/index.md b/static/usage/v6/datetime/localization/first-day-of-week/index.md
index d837e73176f..9b3e02d1788 100644
--- a/static/usage/v6/datetime/localization/first-day-of-week/index.md
+++ b/static/usage/v6/datetime/localization/first-day-of-week/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/first-day-of-week/demo.html"
diff --git a/static/usage/v6/datetime/localization/hour-cycle/index.md b/static/usage/v6/datetime/localization/hour-cycle/index.md
index 528447c273c..e713c87c8c2 100644
--- a/static/usage/v6/datetime/localization/hour-cycle/index.md
+++ b/static/usage/v6/datetime/localization/hour-cycle/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/hour-cycle/demo.html"
diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/index.md b/static/usage/v6/datetime/localization/locale-extension-tags/index.md
index ed3ef3875f9..b6cd9010013 100644
--- a/static/usage/v6/datetime/localization/locale-extension-tags/index.md
+++ b/static/usage/v6/datetime/localization/locale-extension-tags/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/locale-extension-tags/demo.html"
diff --git a/static/usage/v6/datetime/localization/time-label/index.md b/static/usage/v6/datetime/localization/time-label/index.md
index 8f879d68807..2120a29270e 100644
--- a/static/usage/v6/datetime/localization/time-label/index.md
+++ b/static/usage/v6/datetime/localization/time-label/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/localization/time-label/demo.html"
diff --git a/static/usage/v6/datetime/multiple/index.md b/static/usage/v6/datetime/multiple/index.md
index 89d02155e38..7ea0ef4feff 100644
--- a/static/usage/v6/datetime/multiple/index.md
+++ b/static/usage/v6/datetime/multiple/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/datetime/multiple/demo.html" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/multiple/demo.html"
+/>
diff --git a/static/usage/v6/datetime/presentation/date/index.md b/static/usage/v6/datetime/presentation/date/index.md
index da12ceaaf60..200134a198d 100644
--- a/static/usage/v6/datetime/presentation/date/index.md
+++ b/static/usage/v6/datetime/presentation/date/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/presentation/date/demo.html"
diff --git a/static/usage/v6/datetime/presentation/month-and-year/index.md b/static/usage/v6/datetime/presentation/month-and-year/index.md
index 949de3ccdba..166e1a49eca 100644
--- a/static/usage/v6/datetime/presentation/month-and-year/index.md
+++ b/static/usage/v6/datetime/presentation/month-and-year/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="240px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/presentation/month-and-year/demo.html"
diff --git a/static/usage/v6/datetime/presentation/time/index.md b/static/usage/v6/datetime/presentation/time/index.md
index 9b556ffda89..7e3437f4100 100644
--- a/static/usage/v6/datetime/presentation/time/index.md
+++ b/static/usage/v6/datetime/presentation/time/index.md
@@ -5,4 +5,8 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/datetime/presentation/time/demo.html" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/datetime/presentation/time/demo.html"
+/>
diff --git a/static/usage/v6/datetime/presentation/wheel/index.md b/static/usage/v6/datetime/presentation/wheel/index.md
index e187340b607..781bc20a7d8 100644
--- a/static/usage/v6/datetime/presentation/wheel/index.md
+++ b/static/usage/v6/datetime/presentation/wheel/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/presentation/wheel/demo.html"
diff --git a/static/usage/v6/datetime/theming/index.md b/static/usage/v6/datetime/theming/index.md
index 280d490b5c3..8f8bed3d091 100644
--- a/static/usage/v6/datetime/theming/index.md
+++ b/static/usage/v6/datetime/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   size="450px"
   code={{
     javascript,
diff --git a/static/usage/v6/datetime/title/customizing-title/index.md b/static/usage/v6/datetime/title/customizing-title/index.md
index a9aa5d8b67e..61eec1b44bd 100644
--- a/static/usage/v6/datetime/title/customizing-title/index.md
+++ b/static/usage/v6/datetime/title/customizing-title/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="large"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/title/customizing-title/demo.html"
diff --git a/static/usage/v6/datetime/title/showing-default-title/index.md b/static/usage/v6/datetime/title/showing-default-title/index.md
index f4ad4c455cd..7574a75b845 100644
--- a/static/usage/v6/datetime/title/showing-default-title/index.md
+++ b/static/usage/v6/datetime/title/showing-default-title/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="large"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/datetime/title/showing-default-title/demo.html"
diff --git a/static/usage/v6/fab/basic/index.md b/static/usage/v6/fab/basic/index.md
index 37811091d30..289afe07917 100644
--- a/static/usage/v6/fab/basic/index.md
+++ b/static/usage/v6/fab/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/basic/demo.html" />
diff --git a/static/usage/v6/fab/button-sizing/index.md b/static/usage/v6/fab/button-sizing/index.md
index 4ce8f551be2..8827cbf550e 100644
--- a/static/usage/v6/fab/button-sizing/index.md
+++ b/static/usage/v6/fab/button-sizing/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/button-sizing/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/button-sizing/demo.html" />
diff --git a/static/usage/v6/fab/list-side/index.md b/static/usage/v6/fab/list-side/index.md
index cf72e0722be..4d5152c90f7 100644
--- a/static/usage/v6/fab/list-side/index.md
+++ b/static/usage/v6/fab/list-side/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/list-side/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/list-side/demo.html" />
diff --git a/static/usage/v6/fab/positioning/index.md b/static/usage/v6/fab/positioning/index.md
index e3270c0b23d..4fe63f013b7 100644
--- a/static/usage/v6/fab/positioning/index.md
+++ b/static/usage/v6/fab/positioning/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/fab/positioning/demo.html"
   includeIonContent={false}
diff --git a/static/usage/v6/fab/theming/colors/index.md b/static/usage/v6/fab/theming/colors/index.md
index abeac1f6ffa..cefc7f7dc8e 100644
--- a/static/usage/v6/fab/theming/colors/index.md
+++ b/static/usage/v6/fab/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/fab/theming/colors/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/fab/theming/colors/demo.html" />
diff --git a/static/usage/v6/fab/theming/css-custom-properties/index.md b/static/usage/v6/fab/theming/css-custom-properties/index.md
index 6ef760440ae..71f8958cef6 100644
--- a/static/usage/v6/fab/theming/css-custom-properties/index.md
+++ b/static/usage/v6/fab/theming/css-custom-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/fab/theming/css-shadow-parts/index.md b/static/usage/v6/fab/theming/css-shadow-parts/index.md
index 0353c1eec7f..78bc7981b34 100644
--- a/static/usage/v6/fab/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/fab/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/footer/basic/index.md b/static/usage/v6/footer/basic/index.md
index 4f91c2bd6ab..401c9171919 100644
--- a/static/usage/v6/footer/basic/index.md
+++ b/static/usage/v6/footer/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/basic/demo.html"
   devicePreview
diff --git a/static/usage/v6/footer/custom-scroll-target/index.md b/static/usage/v6/footer/custom-scroll-target/index.md
index 03d078fe05c..7ffe8324089 100644
--- a/static/usage/v6/footer/custom-scroll-target/index.md
+++ b/static/usage/v6/footer/custom-scroll-target/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/footer/fade/index.md b/static/usage/v6/footer/fade/index.md
index c5e53f9bcab..3b2bf18a87c 100644
--- a/static/usage/v6/footer/fade/index.md
+++ b/static/usage/v6/footer/fade/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/fade/demo.html"
   devicePreview
diff --git a/static/usage/v6/footer/no-border/index.md b/static/usage/v6/footer/no-border/index.md
index 5230bfac7e8..e929bfc5f5c 100644
--- a/static/usage/v6/footer/no-border/index.md
+++ b/static/usage/v6/footer/no-border/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/no-border/demo.html"
   devicePreview
diff --git a/static/usage/v6/footer/translucent/index.md b/static/usage/v6/footer/translucent/index.md
index b15d0ab997b..13282edb815 100644
--- a/static/usage/v6/footer/translucent/index.md
+++ b/static/usage/v6/footer/translucent/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/footer/translucent/demo.html"
   devicePreview
diff --git a/static/usage/v6/grid/basic/index.md b/static/usage/v6/grid/basic/index.md
index 8b8773e605b..20f2d5b879a 100644
--- a/static/usage/v6/grid/basic/index.md
+++ b/static/usage/v6/grid/basic/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/customizing/column-number/index.md b/static/usage/v6/grid/customizing/column-number/index.md
index 65bea72c7bf..62f7b0e71dc 100644
--- a/static/usage/v6/grid/customizing/column-number/index.md
+++ b/static/usage/v6/grid/customizing/column-number/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/customizing/padding/index.md b/static/usage/v6/grid/customizing/padding/index.md
index 4ff00c1135c..97fff788e70 100644
--- a/static/usage/v6/grid/customizing/padding/index.md
+++ b/static/usage/v6/grid/customizing/padding/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/customizing/width/index.md b/static/usage/v6/grid/customizing/width/index.md
index 9a5c4a4ddd3..69e4ff8c84e 100644
--- a/static/usage/v6/grid/customizing/width/index.md
+++ b/static/usage/v6/grid/customizing/width/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/fixed/index.md b/static/usage/v6/grid/fixed/index.md
index 5c671422a22..9a1d0eed6d8 100644
--- a/static/usage/v6/grid/fixed/index.md
+++ b/static/usage/v6/grid/fixed/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/horizontal-alignment/index.md b/static/usage/v6/grid/horizontal-alignment/index.md
index 1a8e23ad7c6..5953e3c8f07 100644
--- a/static/usage/v6/grid/horizontal-alignment/index.md
+++ b/static/usage/v6/grid/horizontal-alignment/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/offset-responsive/index.md b/static/usage/v6/grid/offset-responsive/index.md
index c1fd31f0254..7fd32b3fbb6 100644
--- a/static/usage/v6/grid/offset-responsive/index.md
+++ b/static/usage/v6/grid/offset-responsive/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/offset/index.md b/static/usage/v6/grid/offset/index.md
index d7229800569..cd618e8e008 100644
--- a/static/usage/v6/grid/offset/index.md
+++ b/static/usage/v6/grid/offset/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/push-pull-responsive/index.md b/static/usage/v6/grid/push-pull-responsive/index.md
index 87192579f8c..eaafef7ebda 100644
--- a/static/usage/v6/grid/push-pull-responsive/index.md
+++ b/static/usage/v6/grid/push-pull-responsive/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/push-pull/index.md b/static/usage/v6/grid/push-pull/index.md
index a2749ef09a3..596adfa6bb5 100644
--- a/static/usage/v6/grid/push-pull/index.md
+++ b/static/usage/v6/grid/push-pull/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/size-auto/index.md b/static/usage/v6/grid/size-auto/index.md
index 92a37d7f116..29feee97342 100644
--- a/static/usage/v6/grid/size-auto/index.md
+++ b/static/usage/v6/grid/size-auto/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/size-responsive/index.md b/static/usage/v6/grid/size-responsive/index.md
index 2d8c019868d..e83caa0d71b 100644
--- a/static/usage/v6/grid/size-responsive/index.md
+++ b/static/usage/v6/grid/size-responsive/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/size/index.md b/static/usage/v6/grid/size/index.md
index 58594977f92..0016c253e13 100644
--- a/static/usage/v6/grid/size/index.md
+++ b/static/usage/v6/grid/size/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/grid/vertical-alignment/index.md b/static/usage/v6/grid/vertical-alignment/index.md
index 954af27bfea..b0c35e1bde0 100644
--- a/static/usage/v6/grid/vertical-alignment/index.md
+++ b/static/usage/v6/grid/vertical-alignment/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/header/basic/index.md b/static/usage/v6/header/basic/index.md
index 67bc5d4fd6c..00e86ef4b6c 100644
--- a/static/usage/v6/header/basic/index.md
+++ b/static/usage/v6/header/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/basic/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/condense/index.md b/static/usage/v6/header/condense/index.md
index f094566695e..5ecb94e0fb4 100644
--- a/static/usage/v6/header/condense/index.md
+++ b/static/usage/v6/header/condense/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/condense/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/custom-scroll-target/index.md b/static/usage/v6/header/custom-scroll-target/index.md
index 888eb83b0db..ec1dcc23991 100644
--- a/static/usage/v6/header/custom-scroll-target/index.md
+++ b/static/usage/v6/header/custom-scroll-target/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md
index 2898965ec85..eb5ba017071 100644
--- a/static/usage/v6/header/fade/index.md
+++ b/static/usage/v6/header/fade/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/fade/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.md
index d81316d4c33..3cce680ca39 100644
--- a/static/usage/v6/header/no-border/index.md
+++ b/static/usage/v6/header/no-border/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/no-border/demo.html"
   devicePreview
diff --git a/static/usage/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md
index 28a84431c50..5a0054584ca 100644
--- a/static/usage/v6/header/translucent/index.md
+++ b/static/usage/v6/header/translucent/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/header/translucent/demo.html"
   devicePreview
diff --git a/static/usage/v6/img/basic/index.md b/static/usage/v6/img/basic/index.md
index 2988f9ce3b8..563aaf951f0 100644
--- a/static/usage/v6/img/basic/index.md
+++ b/static/usage/v6/img/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/img/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/img/basic/demo.html" />
diff --git a/static/usage/v6/infinite-scroll/basic/index.md b/static/usage/v6/infinite-scroll/basic/index.md
index 9082f9eed87..43a3abf2881 100644
--- a/static/usage/v6/infinite-scroll/basic/index.md
+++ b/static/usage/v6/infinite-scroll/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
index 12ee6e7d975..ade9cc84531 100644
--- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -12,6 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
index 4a391e1ec3a..506aa28f20d 100644
--- a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/input/basic/index.md b/static/usage/v6/input/basic/index.md
index aec74aa5fe6..48508afa6d4 100644
--- a/static/usage/v6/input/basic/index.md
+++ b/static/usage/v6/input/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/basic/demo.html" size="300px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/basic/demo.html" size="300px" />
diff --git a/static/usage/v6/input/clear/index.md b/static/usage/v6/input/clear/index.md
index 1bd98995375..f6bac9b0fbb 100644
--- a/static/usage/v6/input/clear/index.md
+++ b/static/usage/v6/input/clear/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/clear/demo.html" size="250px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/clear/demo.html" size="250px" />
diff --git a/static/usage/v6/input/fill/index.md b/static/usage/v6/input/fill/index.md
index 3b838e6d74d..68c94cd6714 100644
--- a/static/usage/v6/input/fill/index.md
+++ b/static/usage/v6/input/fill/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/input/fill/demo.html"
   size="250px"
diff --git a/static/usage/v6/input/labels/index.md b/static/usage/v6/input/labels/index.md
index 95cb588ac19..1da820e911e 100644
--- a/static/usage/v6/input/labels/index.md
+++ b/static/usage/v6/input/labels/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/labels/demo.html" size="300px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/labels/demo.html" size="300px" />
diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.md
index c20a64153fe..9f3861e073b 100644
--- a/static/usage/v6/input/theming/colors/index.md
+++ b/static/usage/v6/input/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/theming/colors/demo.html" size="200px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/input/theming/colors/demo.html"
+  size="200px"
+/>
diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.md
index a2e6ef2484b..c67d8ddf1bc 100644
--- a/static/usage/v6/input/theming/css-properties/index.md
+++ b/static/usage/v6/input/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/input/types/index.md b/static/usage/v6/input/types/index.md
index a5cddfe6f48..678dc4d9737 100644
--- a/static/usage/v6/input/types/index.md
+++ b/static/usage/v6/input/types/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/input/types/demo.html" size="300px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/input/types/demo.html" size="300px" />
diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.md
index 0e88dd9accf..c50ecfe1199 100644
--- a/static/usage/v6/item-divider/basic/index.md
+++ b/static/usage/v6/item-divider/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-divider/basic/demo.html" size="medium" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-divider/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.md
index d883aabbdf7..912ef18df03 100644
--- a/static/usage/v6/item-divider/theming/colors/index.md
+++ b/static/usage/v6/item-divider/theming/colors/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/item-divider/theming/colors/demo.html"
   size="medium"
diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.md
index 0b3763560e2..499d29749cc 100644
--- a/static/usage/v6/item-divider/theming/css-properties/index.md
+++ b/static/usage/v6/item-divider/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.md
index 456e85a4064..d8486d97536 100644
--- a/static/usage/v6/item-group/basic/index.md
+++ b/static/usage/v6/item-group/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-group/basic/demo.html" size="medium" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-group/basic/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.md
index b63a864a248..c5d90b9bc8a 100644
--- a/static/usage/v6/item-group/sliding-items/index.md
+++ b/static/usage/v6/item-group/sliding-items/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/item-group/sliding-items/demo.html"
   size="medium"
diff --git a/static/usage/v6/item-sliding/basic/index.md b/static/usage/v6/item-sliding/basic/index.md
index 4735020120d..0b03726eb1b 100644
--- a/static/usage/v6/item-sliding/basic/index.md
+++ b/static/usage/v6/item-sliding/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/basic/demo.html" />
diff --git a/static/usage/v6/item-sliding/expandable/index.md b/static/usage/v6/item-sliding/expandable/index.md
index fe0929ce8b2..d5025c568ac 100644
--- a/static/usage/v6/item-sliding/expandable/index.md
+++ b/static/usage/v6/item-sliding/expandable/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/expandable/demo.html" size="100px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-sliding/expandable/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/item-sliding/icons/index.md b/static/usage/v6/item-sliding/icons/index.md
index 208b70bb14f..6345bb374fb 100644
--- a/static/usage/v6/item-sliding/icons/index.md
+++ b/static/usage/v6/item-sliding/icons/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item-sliding/icons/demo.html" size="300px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item-sliding/icons/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v6/item/basic/index.md b/static/usage/v6/item/basic/index.md
index 11fec7eecf2..7faf05b21e5 100644
--- a/static/usage/v6/item/basic/index.md
+++ b/static/usage/v6/item/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/basic/demo.html" size="medium" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/basic/demo.html" size="medium" />
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
index b079b352558..d46337926bc 100644
--- a/static/usage/v6/item/buttons/index.md
+++ b/static/usage/v6/item/buttons/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/buttons/demo.html" size="250px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/buttons/demo.html" size="250px" />
diff --git a/static/usage/v6/item/clickable/index.md b/static/usage/v6/item/clickable/index.md
index 909f021eb38..91e3cc80ba6 100644
--- a/static/usage/v6/item/clickable/index.md
+++ b/static/usage/v6/item/clickable/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/clickable/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/clickable/demo.html" />
diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.md
index 2dae9aa08ff..b06fb2ecf1a 100644
--- a/static/usage/v6/item/counter/index.md
+++ b/static/usage/v6/item/counter/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/item/detail-arrows/index.md b/static/usage/v6/item/detail-arrows/index.md
index b1404bf636b..7ef7323e95e 100644
--- a/static/usage/v6/item/detail-arrows/index.md
+++ b/static/usage/v6/item/detail-arrows/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/detail-arrows/demo.html" size="350px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item/detail-arrows/demo.html"
+  size="350px"
+/>
diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.md
index 69cbae09c2a..021ea8858cf 100644
--- a/static/usage/v6/item/helper-error/index.md
+++ b/static/usage/v6/item/helper-error/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
index ecccb7f12e3..97b18d73650 100644
--- a/static/usage/v6/item/icons/index.md
+++ b/static/usage/v6/item/icons/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/icons/demo.html" size="250px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/icons/demo.html" size="250px" />
diff --git a/static/usage/v6/item/inputs/index.md b/static/usage/v6/item/inputs/index.md
index 1468e3c5bc1..069052abc58 100644
--- a/static/usage/v6/item/inputs/index.md
+++ b/static/usage/v6/item/inputs/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/inputs/demo.html" size="large" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/inputs/demo.html" size="large" />
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
index 79afa46163e..f1ccef30f7e 100644
--- a/static/usage/v6/item/lines/index.md
+++ b/static/usage/v6/item/lines/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/lines/demo.html" size="medium" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/lines/demo.html" size="medium" />
diff --git a/static/usage/v6/item/media/index.md b/static/usage/v6/item/media/index.md
index 7f6f5bcf2f5..25b0bbf0ebd 100644
--- a/static/usage/v6/item/media/index.md
+++ b/static/usage/v6/item/media/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/media/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/item/media/demo.html" />
diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.md
index 88b26e3a529..c646ae03dbe 100644
--- a/static/usage/v6/item/theming/colors/index.md
+++ b/static/usage/v6/item/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/item/theming/colors/demo.html" size="500px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/item/theming/colors/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.md
index 0a0793092c4..5db040f5834 100644
--- a/static/usage/v6/item/theming/css-properties/index.md
+++ b/static/usage/v6/item/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.md
index bc82df768ea..a0f2c064b09 100644
--- a/static/usage/v6/item/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/item/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.md
index 3932ef07433..e74a8267a28 100644
--- a/static/usage/v6/item/theming/input-highlight/index.md
+++ b/static/usage/v6/item/theming/input-highlight/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/label/basic/index.md b/static/usage/v6/label/basic/index.md
index 0841cbe71ee..d6c1819f1b6 100644
--- a/static/usage/v6/label/basic/index.md
+++ b/static/usage/v6/label/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/basic/demo.html" />
diff --git a/static/usage/v6/label/input/index.md b/static/usage/v6/label/input/index.md
index 714a8b2d253..7f825e38e93 100644
--- a/static/usage/v6/label/input/index.md
+++ b/static/usage/v6/label/input/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/input/demo.html" size="medium" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/input/demo.html" size="medium" />
diff --git a/static/usage/v6/label/item/index.md b/static/usage/v6/label/item/index.md
index 41a5421ab0b..25b333ac424 100644
--- a/static/usage/v6/label/item/index.md
+++ b/static/usage/v6/label/item/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/item/demo.html" size="medium" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/item/demo.html" size="medium" />
diff --git a/static/usage/v6/label/theming/colors/index.md b/static/usage/v6/label/theming/colors/index.md
index 79b5ebbc946..2e055eab680 100644
--- a/static/usage/v6/label/theming/colors/index.md
+++ b/static/usage/v6/label/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/label/theming/colors/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/label/theming/colors/demo.html" />
diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.md
index d3abe151a87..78b84e21387 100644
--- a/static/usage/v6/list-header/basic/index.md
+++ b/static/usage/v6/list-header/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list-header/basic/demo.html" size="325px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/basic/demo.html"
+  size="325px"
+/>
diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.md
index f3eef534dd0..368b68089d1 100644
--- a/static/usage/v6/list-header/buttons/index.md
+++ b/static/usage/v6/list-header/buttons/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list-header/buttons/demo.html" size="325px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/buttons/demo.html"
+  size="325px"
+/>
diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.md
index 54598147a4f..53f77fb4ff3 100644
--- a/static/usage/v6/list-header/lines/index.md
+++ b/static/usage/v6/list-header/lines/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list-header/lines/demo.html" size="500px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/list-header/lines/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.md
index 10be0e14877..828041239f3 100644
--- a/static/usage/v6/list-header/theming/colors/index.md
+++ b/static/usage/v6/list-header/theming/colors/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/list-header/theming/colors/demo.html"
   size="650px"
diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.md
index f9a497142e7..0a63f448d35 100644
--- a/static/usage/v6/list-header/theming/css-properties/index.md
+++ b/static/usage/v6/list-header/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/list/basic/index.md b/static/usage/v6/list/basic/index.md
index 04da67f403d..906f3f91880 100644
--- a/static/usage/v6/list/basic/index.md
+++ b/static/usage/v6/list/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list/basic/demo.html" size="300px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/list/basic/demo.html" size="300px" />
diff --git a/static/usage/v6/list/inset/index.md b/static/usage/v6/list/inset/index.md
index a98a9f03e82..cbab47db1ea 100644
--- a/static/usage/v6/list/inset/index.md
+++ b/static/usage/v6/list/inset/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list/inset/demo.html" size="350px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/list/inset/demo.html" size="350px" />
diff --git a/static/usage/v6/list/lines/index.md b/static/usage/v6/list/lines/index.md
index bc8750c13c8..2f622d7723a 100644
--- a/static/usage/v6/list/lines/index.md
+++ b/static/usage/v6/list/lines/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/list/lines/demo.html" size="500px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/list/lines/demo.html" size="500px" />
diff --git a/static/usage/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.md
index 7d62fd4f345..43c62e88258 100644
--- a/static/usage/v6/loading/controller/index.md
+++ b/static/usage/v6/loading/controller/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.md
index 2fded40331d..e29eca69331 100644
--- a/static/usage/v6/loading/spinners/index.md
+++ b/static/usage/v6/loading/spinners/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.md
index 8f96b3a28e0..61dc8c20be3 100644
--- a/static/usage/v6/loading/theming/index.md
+++ b/static/usage/v6/loading/theming/index.md
@@ -12,6 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/menu/basic/index.md b/static/usage/v6/menu/basic/index.md
index ebfb7a81a3a..b54e840574d 100644
--- a/static/usage/v6/menu/basic/index.md
+++ b/static/usage/v6/menu/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/menu/theming/index.md b/static/usage/v6/menu/theming/index.md
index be01c7e08a8..5ff9842fe38 100644
--- a/static/usage/v6/menu/theming/index.md
+++ b/static/usage/v6/menu/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/menu/toggle/index.md b/static/usage/v6/menu/toggle/index.md
index b56daf9751f..417ec9471e7 100644
--- a/static/usage/v6/menu/toggle/index.md
+++ b/static/usage/v6/menu/toggle/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/menu/type/index.md b/static/usage/v6/menu/type/index.md
index b05232459c0..1316b5662e9 100644
--- a/static/usage/v6/menu/type/index.md
+++ b/static/usage/v6/menu/type/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/can-dismiss/boolean/index.md b/static/usage/v6/modal/can-dismiss/boolean/index.md
index 29fc2404f17..c464c42ccc4 100644
--- a/static/usage/v6/modal/can-dismiss/boolean/index.md
+++ b/static/usage/v6/modal/can-dismiss/boolean/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/can-dismiss/function/index.md b/static/usage/v6/modal/can-dismiss/function/index.md
index 37de40102aa..9bd485ac4fb 100644
--- a/static/usage/v6/modal/can-dismiss/function/index.md
+++ b/static/usage/v6/modal/can-dismiss/function/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/card/basic/index.md b/static/usage/v6/modal/card/basic/index.md
index dfea885fdc7..bb314c4d574 100644
--- a/static/usage/v6/modal/card/basic/index.md
+++ b/static/usage/v6/modal/card/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.md
index 5b98f7a0a37..2f1d5c9b961 100644
--- a/static/usage/v6/modal/controller/index.md
+++ b/static/usage/v6/modal/controller/index.md
@@ -13,6 +13,7 @@ import angular_modal_example_component_ts from './angular/modal-example_componen
 import angular_modal_example_component_html from './angular/modal-example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/custom-dialogs/index.md b/static/usage/v6/modal/custom-dialogs/index.md
index f1dd66838a2..a67a23d1dd3 100644
--- a/static/usage/v6/modal/custom-dialogs/index.md
+++ b/static/usage/v6/modal/custom-dialogs/index.md
@@ -10,6 +10,7 @@ import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     vue,
diff --git a/static/usage/v6/modal/inline/basic/index.md b/static/usage/v6/modal/inline/basic/index.md
index af73ad2fc9b..e0a5c191430 100644
--- a/static/usage/v6/modal/inline/basic/index.md
+++ b/static/usage/v6/modal/inline/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/inline/is-open/index.md b/static/usage/v6/modal/inline/is-open/index.md
index 8ecbcd11c04..026b443d9a8 100644
--- a/static/usage/v6/modal/inline/is-open/index.md
+++ b/static/usage/v6/modal/inline/is-open/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/performance/mount/index.md b/static/usage/v6/modal/performance/mount/index.md
index 08401681fa3..6e850c913b1 100644
--- a/static/usage/v6/modal/performance/mount/index.md
+++ b/static/usage/v6/modal/performance/mount/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/sheet/background-content/index.md b/static/usage/v6/modal/sheet/background-content/index.md
index 28fca16d4be..ef44efa7104 100644
--- a/static/usage/v6/modal/sheet/background-content/index.md
+++ b/static/usage/v6/modal/sheet/background-content/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/sheet/basic/index.md b/static/usage/v6/modal/sheet/basic/index.md
index bdbfd4d93e9..3525336234e 100644
--- a/static/usage/v6/modal/sheet/basic/index.md
+++ b/static/usage/v6/modal/sheet/basic/index.md
@@ -6,6 +6,7 @@ import react from './react.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/sheet/handle-behavior/index.md b/static/usage/v6/modal/sheet/handle-behavior/index.md
index e6406ba35aa..319f0e86dfe 100644
--- a/static/usage/v6/modal/sheet/handle-behavior/index.md
+++ b/static/usage/v6/modal/sheet/handle-behavior/index.md
@@ -6,6 +6,7 @@ import react from './react.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/modal/styling/animations/index.md b/static/usage/v6/modal/styling/animations/index.md
index def0fe99908..9198d960c17 100644
--- a/static/usage/v6/modal/styling/animations/index.md
+++ b/static/usage/v6/modal/styling/animations/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript: {
       files: {
diff --git a/static/usage/v6/modal/styling/theming/index.md b/static/usage/v6/modal/styling/theming/index.md
index ac8d2b95877..883a0197744 100644
--- a/static/usage/v6/modal/styling/theming/index.md
+++ b/static/usage/v6/modal/styling/theming/index.md
@@ -10,6 +10,7 @@ import angular_global_css from './angular/global_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     vue,
diff --git a/static/usage/v6/nav/modal-navigation/index.md b/static/usage/v6/nav/modal-navigation/index.md
index 8ba2cf1132b..37de19ca71a 100644
--- a/static/usage/v6/nav/modal-navigation/index.md
+++ b/static/usage/v6/nav/modal-navigation/index.md
@@ -20,6 +20,7 @@ import vue_page_two from './vue/page_two_vue.md';
 import vue_page_three from './vue/page_three_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.md
index f0ff7bb0415..2fdeadbbbdd 100644
--- a/static/usage/v6/nav/nav-link/index.md
+++ b/static/usage/v6/nav/nav-link/index.md
@@ -20,6 +20,7 @@ import vue_page_two from './vue/page_two_vue.md';
 import vue_page_three from './vue/page_three_vue.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v6/note/basic/index.md b/static/usage/v6/note/basic/index.md
index be75c1214e7..893b26095d4 100644
--- a/static/usage/v6/note/basic/index.md
+++ b/static/usage/v6/note/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/note/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/note/basic/demo.html" />
diff --git a/static/usage/v6/note/item/index.md b/static/usage/v6/note/item/index.md
index d829308cdec..8327141e7d3 100644
--- a/static/usage/v6/note/item/index.md
+++ b/static/usage/v6/note/item/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/note/item/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/note/item/demo.html" />
diff --git a/static/usage/v6/note/theming/colors/index.md b/static/usage/v6/note/theming/colors/index.md
index 62d29bd2be9..ae6f093a75c 100644
--- a/static/usage/v6/note/theming/colors/index.md
+++ b/static/usage/v6/note/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/note/theming/colors/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/note/theming/colors/demo.html" />
diff --git a/static/usage/v6/note/theming/css-properties/index.md b/static/usage/v6/note/theming/css-properties/index.md
index c1e731f8d1b..7055e40a026 100644
--- a/static/usage/v6/note/theming/css-properties/index.md
+++ b/static/usage/v6/note/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/picker/multiple-column/index.md b/static/usage/v6/picker/multiple-column/index.md
index 3ec3e30f391..a8709df973c 100644
--- a/static/usage/v6/picker/multiple-column/index.md
+++ b/static/usage/v6/picker/multiple-column/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/picker/single-column/index.md b/static/usage/v6/picker/single-column/index.md
index 4f012f8e3f6..a2ee8ee48e3 100644
--- a/static/usage/v6/picker/single-column/index.md
+++ b/static/usage/v6/picker/single-column/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/popover/customization/positioning/index.md b/static/usage/v6/popover/customization/positioning/index.md
index 1162f540336..6907af6ceb8 100644
--- a/static/usage/v6/popover/customization/positioning/index.md
+++ b/static/usage/v6/popover/customization/positioning/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="400px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/customization/sizing/index.md b/static/usage/v6/popover/customization/sizing/index.md
index 7adf62d0847..45fec0f6b58 100644
--- a/static/usage/v6/popover/customization/sizing/index.md
+++ b/static/usage/v6/popover/customization/sizing/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/popover/customization/sizing/demo.html"
diff --git a/static/usage/v6/popover/customization/styling/index.md b/static/usage/v6/popover/customization/styling/index.md
index f4615883312..47d131c44c3 100644
--- a/static/usage/v6/popover/customization/styling/index.md
+++ b/static/usage/v6/popover/customization/styling/index.md
@@ -10,6 +10,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/nested/index.md b/static/usage/v6/popover/nested/index.md
index 5a987c633a5..24fb460b14a 100644
--- a/static/usage/v6/popover/nested/index.md
+++ b/static/usage/v6/popover/nested/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/v6/popover/nested/demo.html" />
+<Playground
+  version="6"
+  size="medium"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/popover/nested/demo.html"
+/>
diff --git a/static/usage/v6/popover/performance/mount/index.md b/static/usage/v6/popover/performance/mount/index.md
index c201dea3154..cfa394abec0 100644
--- a/static/usage/v6/popover/performance/mount/index.md
+++ b/static/usage/v6/popover/performance/mount/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.md
index 868abdc93b9..4906017d235 100644
--- a/static/usage/v6/popover/presenting/controller/index.md
+++ b/static/usage/v6/popover/presenting/controller/index.md
@@ -13,6 +13,7 @@ import angular_popover_component_ts from './angular/popover_component_ts.md';
 import angular_app_module from './angular/app_module_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/presenting/inline-isopen/index.md b/static/usage/v6/popover/presenting/inline-isopen/index.md
index 3a57a188e15..b5aaac58ac1 100644
--- a/static/usage/v6/popover/presenting/inline-isopen/index.md
+++ b/static/usage/v6/popover/presenting/inline-isopen/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/popover/presenting/inline-trigger/index.md b/static/usage/v6/popover/presenting/inline-trigger/index.md
index d481ddbde3f..973dea6fa41 100644
--- a/static/usage/v6/popover/presenting/inline-trigger/index.md
+++ b/static/usage/v6/popover/presenting/inline-trigger/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/popover/presenting/inline-trigger/demo.html"
diff --git a/static/usage/v6/progress-bar/buffer/index.md b/static/usage/v6/progress-bar/buffer/index.md
index 29d9991adcc..dda56114b78 100644
--- a/static/usage/v6/progress-bar/buffer/index.md
+++ b/static/usage/v6/progress-bar/buffer/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/progress-bar/determinate/index.md b/static/usage/v6/progress-bar/determinate/index.md
index d94f1595579..43fdf15b741 100644
--- a/static/usage/v6/progress-bar/determinate/index.md
+++ b/static/usage/v6/progress-bar/determinate/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/progress-bar/indeterminate/index.md b/static/usage/v6/progress-bar/indeterminate/index.md
index 098def69854..4596d5a54b9 100644
--- a/static/usage/v6/progress-bar/indeterminate/index.md
+++ b/static/usage/v6/progress-bar/indeterminate/index.md
@@ -5,4 +5,8 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/progress-bar/indeterminate/demo.html" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/progress-bar/indeterminate/demo.html"
+/>
diff --git a/static/usage/v6/progress-bar/theming/colors/index.md b/static/usage/v6/progress-bar/theming/colors/index.md
index 5f0d2092c55..e4defcbfc84 100644
--- a/static/usage/v6/progress-bar/theming/colors/index.md
+++ b/static/usage/v6/progress-bar/theming/colors/index.md
@@ -5,4 +5,8 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/progress-bar/theming/colors/demo.html" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/progress-bar/theming/colors/demo.html"
+/>
diff --git a/static/usage/v6/progress-bar/theming/css-properties/index.md b/static/usage/v6/progress-bar/theming/css-properties/index.md
index 1c4a9cf15da..cb943ed9e51 100644
--- a/static/usage/v6/progress-bar/theming/css-properties/index.md
+++ b/static/usage/v6/progress-bar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
index 50fcfab3159..35baa022fa2 100644
--- a/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/radio/basic/index.md b/static/usage/v6/radio/basic/index.md
index ef39cf54ae1..2abde833f2e 100644
--- a/static/usage/v6/radio/basic/index.md
+++ b/static/usage/v6/radio/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/radio/basic/demo.html" size="250px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/radio/basic/demo.html" size="250px" />
diff --git a/static/usage/v6/radio/empty-selection/index.md b/static/usage/v6/radio/empty-selection/index.md
index 2f789c60bee..fd6d995816d 100644
--- a/static/usage/v6/radio/empty-selection/index.md
+++ b/static/usage/v6/radio/empty-selection/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/radio/empty-selection/demo.html" size="250px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/radio/empty-selection/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/radio/theming/colors/index.md b/static/usage/v6/radio/theming/colors/index.md
index a8b20257d2e..fe4ef66c18e 100644
--- a/static/usage/v6/radio/theming/colors/index.md
+++ b/static/usage/v6/radio/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/radio/theming/colors/demo.html" size="100px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/radio/theming/colors/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/radio/theming/css-properties/index.md b/static/usage/v6/radio/theming/css-properties/index.md
index 78ce4589761..844b06a04f2 100644
--- a/static/usage/v6/radio/theming/css-properties/index.md
+++ b/static/usage/v6/radio/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/index.md b/static/usage/v6/radio/theming/css-shadow-parts/index.md
index f9d30b28015..84c388f35f3 100644
--- a/static/usage/v6/radio/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/radio/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/range/basic/index.md b/static/usage/v6/range/basic/index.md
index 3c8a5863952..46bb7648339 100644
--- a/static/usage/v6/range/basic/index.md
+++ b/static/usage/v6/range/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/basic/demo.html" />
diff --git a/static/usage/v6/range/dual-knobs/index.md b/static/usage/v6/range/dual-knobs/index.md
index ab7b43f4d48..70792168ada 100644
--- a/static/usage/v6/range/dual-knobs/index.md
+++ b/static/usage/v6/range/dual-knobs/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/dual-knobs/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/dual-knobs/demo.html" />
diff --git a/static/usage/v6/range/ion-change-event/index.md b/static/usage/v6/range/ion-change-event/index.md
index d14edf576b4..f4376e63985 100644
--- a/static/usage/v6/range/ion-change-event/index.md
+++ b/static/usage/v6/range/ion-change-event/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/range/ion-knob-move-event/index.md b/static/usage/v6/range/ion-knob-move-event/index.md
index 4f615970535..5e0475a5781 100644
--- a/static/usage/v6/range/ion-knob-move-event/index.md
+++ b/static/usage/v6/range/ion-knob-move-event/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/range/pins/index.md b/static/usage/v6/range/pins/index.md
index a453df0297e..6cd4afa65c3 100644
--- a/static/usage/v6/range/pins/index.md
+++ b/static/usage/v6/range/pins/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/range/slots/index.md b/static/usage/v6/range/slots/index.md
index 786745fcf35..b5c41e0f8dc 100644
--- a/static/usage/v6/range/slots/index.md
+++ b/static/usage/v6/range/slots/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/slots/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/slots/demo.html" />
diff --git a/static/usage/v6/range/snapping-ticks/index.md b/static/usage/v6/range/snapping-ticks/index.md
index 9c701956179..aab3bbecead 100644
--- a/static/usage/v6/range/snapping-ticks/index.md
+++ b/static/usage/v6/range/snapping-ticks/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/range/snapping-ticks/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/range/snapping-ticks/demo.html" />
diff --git a/static/usage/v6/range/theming/css-properties/index.md b/static/usage/v6/range/theming/css-properties/index.md
index b85f6df20a1..1f5aa7529f7 100644
--- a/static/usage/v6/range/theming/css-properties/index.md
+++ b/static/usage/v6/range/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/range/theming/css-shadow-parts/index.md b/static/usage/v6/range/theming/css-shadow-parts/index.md
index 9ed3c33a790..a319fbcfaaa 100644
--- a/static/usage/v6/range/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/range/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/refresher/advanced/index.md b/static/usage/v6/refresher/advanced/index.md
index 748023fd227..287a2d7dc66 100644
--- a/static/usage/v6/refresher/advanced/index.md
+++ b/static/usage/v6/refresher/advanced/index.md
@@ -12,6 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/refresher/basic/index.md b/static/usage/v6/refresher/basic/index.md
index 551f36d11ff..7d5881fdc1c 100644
--- a/static/usage/v6/refresher/basic/index.md
+++ b/static/usage/v6/refresher/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/refresher/custom-content/index.md b/static/usage/v6/refresher/custom-content/index.md
index 9f9f011336c..535914c3215 100644
--- a/static/usage/v6/refresher/custom-content/index.md
+++ b/static/usage/v6/refresher/custom-content/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/refresher/custom-scroll-target/index.md b/static/usage/v6/refresher/custom-scroll-target/index.md
index 77b21184550..6f10357cca7 100644
--- a/static/usage/v6/refresher/custom-scroll-target/index.md
+++ b/static/usage/v6/refresher/custom-scroll-target/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/refresher/pull-properties/index.md b/static/usage/v6/refresher/pull-properties/index.md
index de1272a96d3..0d7f17cc547 100644
--- a/static/usage/v6/refresher/pull-properties/index.md
+++ b/static/usage/v6/refresher/pull-properties/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/basic/index.md b/static/usage/v6/reorder/basic/index.md
index 76f7d2c783a..7e5b9512ad7 100644
--- a/static/usage/v6/reorder/basic/index.md
+++ b/static/usage/v6/reorder/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.md
index d946399ba25..4a5490803bf 100644
--- a/static/usage/v6/reorder/custom-icon/index.md
+++ b/static/usage/v6/reorder/custom-icon/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/custom-scroll-target/index.md b/static/usage/v6/reorder/custom-scroll-target/index.md
index 46fb210234b..7e0c4c1e05f 100644
--- a/static/usage/v6/reorder/custom-scroll-target/index.md
+++ b/static/usage/v6/reorder/custom-scroll-target/index.md
@@ -12,6 +12,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/reorder/toggling-disabled/index.md b/static/usage/v6/reorder/toggling-disabled/index.md
index 461db158d64..c4f5dac0112 100644
--- a/static/usage/v6/reorder/toggling-disabled/index.md
+++ b/static/usage/v6/reorder/toggling-disabled/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/updating-data/index.md b/static/usage/v6/reorder/updating-data/index.md
index 7311c655001..6ff98a45bf2 100644
--- a/static/usage/v6/reorder/updating-data/index.md
+++ b/static/usage/v6/reorder/updating-data/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/reorder/wrapper/index.md b/static/usage/v6/reorder/wrapper/index.md
index 12b42e73c48..e598b393527 100644
--- a/static/usage/v6/reorder/wrapper/index.md
+++ b/static/usage/v6/reorder/wrapper/index.md
@@ -8,6 +8,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/ripple-effect/basic/index.md b/static/usage/v6/ripple-effect/basic/index.md
index 3958e27a96f..037e23e5936 100644
--- a/static/usage/v6/ripple-effect/basic/index.md
+++ b/static/usage/v6/ripple-effect/basic/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/ripple-effect/customizing/index.md b/static/usage/v6/ripple-effect/customizing/index.md
index 8a5b6b3ac15..61cf6350323 100644
--- a/static/usage/v6/ripple-effect/customizing/index.md
+++ b/static/usage/v6/ripple-effect/customizing/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/ripple-effect/type/index.md b/static/usage/v6/ripple-effect/type/index.md
index cf2d9f32720..f1af22ddf2b 100644
--- a/static/usage/v6/ripple-effect/type/index.md
+++ b/static/usage/v6/ripple-effect/type/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/router/basic/index.md b/static/usage/v6/router/basic/index.md
index 1addc30f5ab..a0b89f7644e 100644
--- a/static/usage/v6/router/basic/index.md
+++ b/static/usage/v6/router/basic/index.md
@@ -3,6 +3,7 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 
 <Playground
+  version="6"
   code={{ javascript }}
   src="usage/v6/router/basic/demo.html"
   devicePreview={true}
diff --git a/static/usage/v6/searchbar/basic/index.md b/static/usage/v6/searchbar/basic/index.md
index ae771b76c6e..b61097ef839 100644
--- a/static/usage/v6/searchbar/basic/index.md
+++ b/static/usage/v6/searchbar/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/basic/demo.html" size="300px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/basic/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
index c00d5e7b908..4ad2c30b731 100644
--- a/static/usage/v6/searchbar/cancel-button/index.md
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/cancel-button/demo.html" size="250px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/cancel-button/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
index 1341421c264..aa821ec048b 100644
--- a/static/usage/v6/searchbar/clear-button/index.md
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/clear-button/demo.html" size="250px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/clear-button/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/v6/searchbar/debounce/index.md b/static/usage/v6/searchbar/debounce/index.md
index c674ac98016..d161cc8b140 100644
--- a/static/usage/v6/searchbar/debounce/index.md
+++ b/static/usage/v6/searchbar/debounce/index.md
@@ -9,6 +9,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
index 3dccfc29464..c3611623923 100644
--- a/static/usage/v6/searchbar/search-icon/index.md
+++ b/static/usage/v6/searchbar/search-icon/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/search-icon/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/search-icon/demo.html" />
diff --git a/static/usage/v6/searchbar/theming/colors/index.md b/static/usage/v6/searchbar/theming/colors/index.md
index 99500b6e111..c13f364ca20 100644
--- a/static/usage/v6/searchbar/theming/colors/index.md
+++ b/static/usage/v6/searchbar/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/searchbar/theming/colors/demo.html" size="large" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/searchbar/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v6/searchbar/theming/css-properties/index.md b/static/usage/v6/searchbar/theming/css-properties/index.md
index 0f86b4f2c2b..c6c51b8f352 100644
--- a/static/usage/v6/searchbar/theming/css-properties/index.md
+++ b/static/usage/v6/searchbar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/segment-button/basic/index.md b/static/usage/v6/segment-button/basic/index.md
index ecc96441dbc..7f655ea0adc 100644
--- a/static/usage/v6/segment-button/basic/index.md
+++ b/static/usage/v6/segment-button/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment-button/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/segment-button/basic/demo.html" />
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
index 2764e5f39bd..5ddcc6a17b8 100644
--- a/static/usage/v6/segment-button/layout/index.md
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment-button/layout/demo.html" size="medium" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/segment-button/layout/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.md
index e5d344492c4..3bfdd96bb1d 100644
--- a/static/usage/v6/segment-button/theming/css-properties/index.md
+++ b/static/usage/v6/segment-button/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
index 1bdbf9bbe01..7008dbc3c4c 100644
--- a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/segment/basic/index.md b/static/usage/v6/segment/basic/index.md
index 7e333956461..6486c6e66f6 100644
--- a/static/usage/v6/segment/basic/index.md
+++ b/static/usage/v6/segment/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/segment/basic/demo.html" />
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
index 7f7e45f94a7..de206ca652a 100644
--- a/static/usage/v6/segment/scrollable/index.md
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment/scrollable/demo.html" size="100px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/segment/scrollable/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.md
index 268e4516c4c..1896c85f8f3 100644
--- a/static/usage/v6/segment/theming/colors/index.md
+++ b/static/usage/v6/segment/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/segment/theming/colors/demo.html" size="large" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/segment/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.md
index 2e18d975045..f8dfa374ba9 100644
--- a/static/usage/v6/segment/theming/css-properties/index.md
+++ b/static/usage/v6/segment/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.md
index 17ce6401317..57f3380c18f 100644
--- a/static/usage/v6/select/basic/multiple-selection/index.md
+++ b/static/usage/v6/select/basic/multiple-selection/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/basic/multiple-selection/demo.html"
diff --git a/static/usage/v6/select/basic/responding-to-interaction/index.md b/static/usage/v6/select/basic/responding-to-interaction/index.md
index bb8790eb2a1..1e43625767a 100644
--- a/static/usage/v6/select/basic/responding-to-interaction/index.md
+++ b/static/usage/v6/select/basic/responding-to-interaction/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.md
index 6f72ef51461..b697188b540 100644
--- a/static/usage/v6/select/basic/single-selection/index.md
+++ b/static/usage/v6/select/basic/single-selection/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/basic/single-selection/demo.html"
diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.md
index 55f07c1545f..06e014afb5c 100644
--- a/static/usage/v6/select/customization/button-text/index.md
+++ b/static/usage/v6/select/customization/button-text/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="350px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/customization/button-text/demo.html"
diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.md
index 9649137159c..ac291deb492 100644
--- a/static/usage/v6/select/customization/interface-options/index.md
+++ b/static/usage/v6/select/customization/interface-options/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="large"
   code={{
     javascript,
diff --git a/static/usage/v6/select/customization/styling-select/index.md b/static/usage/v6/select/customization/styling-select/index.md
index 9ee413b42b3..188a777bf0b 100644
--- a/static/usage/v6/select/customization/styling-select/index.md
+++ b/static/usage/v6/select/customization/styling-select/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/interfaces/action-sheet/index.md b/static/usage/v6/select/interfaces/action-sheet/index.md
index 96274b7068e..86bfc5a6723 100644
--- a/static/usage/v6/select/interfaces/action-sheet/index.md
+++ b/static/usage/v6/select/interfaces/action-sheet/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="medium"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/interfaces/action-sheet/demo.html"
diff --git a/static/usage/v6/select/interfaces/popover/index.md b/static/usage/v6/select/interfaces/popover/index.md
index 57d63aa5633..3aef2c12272 100644
--- a/static/usage/v6/select/interfaces/popover/index.md
+++ b/static/usage/v6/select/interfaces/popover/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   size="400px"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/select/interfaces/popover/demo.html"
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/index.md b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
index 88e711472a3..6868120f239 100644
--- a/static/usage/v6/select/objects-as-values/multiple-selection/index.md
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/index.md b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
index 20f14d19051..cbe6f0fe783 100644
--- a/static/usage/v6/select/objects-as-values/using-comparewith/index.md
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   size="300px"
   code={{
     javascript,
diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.md
index 3eb44196348..8919f00671f 100644
--- a/static/usage/v6/select/typeahead/index.md
+++ b/static/usage/v6/select/typeahead/index.md
@@ -18,6 +18,7 @@ import angular_modal_example_component_html from './angular/modal-example_compon
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
+  version="6"
   code={{ 
     javascript, 
     react: {
diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.md
index a018bee692b..2e3371fb890 100644
--- a/static/usage/v6/skeleton-text/basic/index.md
+++ b/static/usage/v6/skeleton-text/basic/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/index.md b/static/usage/v6/skeleton-text/theming/css-properties/index.md
index 699559e1649..4ff16bd3470 100644
--- a/static/usage/v6/skeleton-text/theming/css-properties/index.md
+++ b/static/usage/v6/skeleton-text/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/spinner/basic/index.md b/static/usage/v6/spinner/basic/index.md
index 123fc60c553..db7b7e0e8e2 100644
--- a/static/usage/v6/spinner/basic/index.md
+++ b/static/usage/v6/spinner/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/spinner/basic/demo.html" size="500px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/spinner/basic/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/spinner/theming/colors/index.md b/static/usage/v6/spinner/theming/colors/index.md
index c8c2337257b..243c7ead7bf 100644
--- a/static/usage/v6/spinner/theming/colors/index.md
+++ b/static/usage/v6/spinner/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/spinner/theming/colors/demo.html" size="100px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/spinner/theming/colors/demo.html"
+  size="100px"
+/>
diff --git a/static/usage/v6/spinner/theming/css-properties/index.md b/static/usage/v6/spinner/theming/css-properties/index.md
index 647bccd452a..bdc0e36afd4 100644
--- a/static/usage/v6/spinner/theming/css-properties/index.md
+++ b/static/usage/v6/spinner/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/split-pane/basic/index.md b/static/usage/v6/split-pane/basic/index.md
index 3b389f6f910..5f07ca49a5d 100644
--- a/static/usage/v6/split-pane/basic/index.md
+++ b/static/usage/v6/split-pane/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/split-pane/basic/demo.html" size="500px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/split-pane/basic/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.md
index 606294ff0f1..d92888173f0 100644
--- a/static/usage/v6/split-pane/theming/css-properties/index.md
+++ b/static/usage/v6/split-pane/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/text/basic/index.md b/static/usage/v6/text/basic/index.md
index e54442bcb2d..06efaf44145 100644
--- a/static/usage/v6/text/basic/index.md
+++ b/static/usage/v6/text/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/text/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/text/basic/demo.html" />
diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.md
index c4f40666a42..9d0efc4679e 100644
--- a/static/usage/v6/textarea/autogrow/index.md
+++ b/static/usage/v6/textarea/autogrow/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="small" code={{ javascript, react, vue, angular }} src="usage/v6/textarea/autogrow/demo.html" />
+<Playground
+  version="6"
+  size="small"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/textarea/autogrow/demo.html"
+/>
diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.md
index 102465599b8..3325f10b870 100644
--- a/static/usage/v6/textarea/basic/index.md
+++ b/static/usage/v6/textarea/basic/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="250px" code={{ javascript, react, vue, angular }} src="usage/v6/textarea/basic/demo.html" />
+<Playground
+  version="6"
+  size="250px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/textarea/basic/demo.html"
+/>
diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.md
index a6f9da7f7df..4bb42164650 100644
--- a/static/usage/v6/textarea/clear-on-edit/index.md
+++ b/static/usage/v6/textarea/clear-on-edit/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground size="xsmall" code={{ javascript, react, vue, angular }} src="usage/v6/textarea/clear-on-edit/demo.html" />
+<Playground
+  version="6"
+  size="xsmall"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/textarea/clear-on-edit/demo.html"
+/>
diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.md
index a0a2e12b661..3570856f99e 100644
--- a/static/usage/v6/textarea/theming/index.md
+++ b/static/usage/v6/textarea/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   size="xsmall"
   code={{
     javascript,
diff --git a/static/usage/v6/thumbnail/basic/index.md b/static/usage/v6/thumbnail/basic/index.md
index 2d616020ba8..b47ec05ade4 100644
--- a/static/usage/v6/thumbnail/basic/index.md
+++ b/static/usage/v6/thumbnail/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/basic/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/basic/demo.html" />
diff --git a/static/usage/v6/thumbnail/item/index.md b/static/usage/v6/thumbnail/item/index.md
index bd9b1ced946..eeec0a10cd5 100644
--- a/static/usage/v6/thumbnail/item/index.md
+++ b/static/usage/v6/thumbnail/item/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/item/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/thumbnail/item/demo.html" />
diff --git a/static/usage/v6/thumbnail/theming/css-properties/index.md b/static/usage/v6/thumbnail/theming/css-properties/index.md
index 11823306607..af98370979e 100644
--- a/static/usage/v6/thumbnail/theming/css-properties/index.md
+++ b/static/usage/v6/thumbnail/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/title/basic/index.md b/static/usage/v6/title/basic/index.md
index e4c3b2dbdfb..8348f2ab712 100644
--- a/static/usage/v6/title/basic/index.md
+++ b/static/usage/v6/title/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/title/basic/demo.html"
   devicePreview={true}
diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md
index 4c83a3f1c8e..11869e671e5 100644
--- a/static/usage/v6/title/collapsible-large-title/basic/index.md
+++ b/static/usage/v6/title/collapsible-large-title/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   mode="ios"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/title/collapsible-large-title/basic/demo.html"
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.md
index 723de799c4c..f427df176fb 100644
--- a/static/usage/v6/title/collapsible-large-title/buttons/index.md
+++ b/static/usage/v6/title/collapsible-large-title/buttons/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   mode="ios"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/title/collapsible-large-title/buttons/demo.html"
diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.md
index 148a0bd5d9e..c08b16c85e7 100644
--- a/static/usage/v6/title/theming/css-properties/index.md
+++ b/static/usage/v6/title/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.md
index 436ac3e16b7..5bd8e1f56ce 100644
--- a/static/usage/v6/toast/buttons/index.md
+++ b/static/usage/v6/toast/buttons/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md
index 55fe84650eb..d636c54d905 100644
--- a/static/usage/v6/toast/icon/index.md
+++ b/static/usage/v6/toast/icon/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.md
index 82ba56fdde3..492699916c0 100644
--- a/static/usage/v6/toast/presenting/controller/index.md
+++ b/static/usage/v6/toast/presenting/controller/index.md
@@ -8,6 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.md
index 0d6efeba58e..0e5b1b56e72 100644
--- a/static/usage/v6/toast/theming/index.md
+++ b/static/usage/v6/toast/theming/index.md
@@ -11,6 +11,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
+  version="6"
   devicePreview
   code={{
     javascript,
diff --git a/static/usage/v6/toggle/basic/index.md b/static/usage/v6/toggle/basic/index.md
index 0d6975540e7..87505db9a20 100644
--- a/static/usage/v6/toggle/basic/index.md
+++ b/static/usage/v6/toggle/basic/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toggle/basic/demo.html" size="250px" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/toggle/basic/demo.html" size="250px" />
diff --git a/static/usage/v6/toggle/on-off/index.md b/static/usage/v6/toggle/on-off/index.md
index a3a005e883f..3e716535563 100644
--- a/static/usage/v6/toggle/on-off/index.md
+++ b/static/usage/v6/toggle/on-off/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toggle/on-off/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/toggle/on-off/demo.html" />
diff --git a/static/usage/v6/toggle/theming/colors/index.md b/static/usage/v6/toggle/theming/colors/index.md
index 4229ac88a7a..e5a56aa4452 100644
--- a/static/usage/v6/toggle/theming/colors/index.md
+++ b/static/usage/v6/toggle/theming/colors/index.md
@@ -5,4 +5,4 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toggle/theming/colors/demo.html" />
+<Playground version="6" code={{ javascript, react, vue, angular }} src="usage/v6/toggle/theming/colors/demo.html" />
diff --git a/static/usage/v6/toggle/theming/css-properties/index.md b/static/usage/v6/toggle/theming/css-properties/index.md
index 9342c5eba77..6a78a059e49 100644
--- a/static/usage/v6/toggle/theming/css-properties/index.md
+++ b/static/usage/v6/toggle/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/index.md b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
index 2b7ab7d590f..137b6d4c1d9 100644
--- a/static/usage/v6/toggle/theming/css-shadow-parts/index.md
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
@@ -11,6 +11,7 @@ import angular_example_component_css from './angular/example_component_css.md';
 import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v6/toolbar/basic/index.md b/static/usage/v6/toolbar/basic/index.md
index 582ec8c8532..3262c3c2847 100644
--- a/static/usage/v6/toolbar/basic/index.md
+++ b/static/usage/v6/toolbar/basic/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/basic/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
index 29c741b1bc8..2ac28550f9d 100644
--- a/static/usage/v6/toolbar/buttons/index.md
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toolbar/buttons/demo.html" size="500px" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/buttons/demo.html"
+  size="500px"
+/>
diff --git a/static/usage/v6/toolbar/progress-bars/index.md b/static/usage/v6/toolbar/progress-bars/index.md
index 5af902934c1..b6e14d7faac 100644
--- a/static/usage/v6/toolbar/progress-bars/index.md
+++ b/static/usage/v6/toolbar/progress-bars/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/progress-bars/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/searchbars/index.md b/static/usage/v6/toolbar/searchbars/index.md
index 6593e3f9c07..46b45f13b54 100644
--- a/static/usage/v6/toolbar/searchbars/index.md
+++ b/static/usage/v6/toolbar/searchbars/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/searchbars/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/segments/index.md b/static/usage/v6/toolbar/segments/index.md
index 2f660e05d3f..f7eb713a371 100644
--- a/static/usage/v6/toolbar/segments/index.md
+++ b/static/usage/v6/toolbar/segments/index.md
@@ -6,6 +6,7 @@ import vue from './vue.md';
 import angular from './angular.md';
 
 <Playground
+  version="6"
   code={{ javascript, react, vue, angular }}
   src="usage/v6/toolbar/segments/demo.html"
   devicePreview
diff --git a/static/usage/v6/toolbar/theming/colors/index.md b/static/usage/v6/toolbar/theming/colors/index.md
index f9a44fe6cc5..e61569c60d4 100644
--- a/static/usage/v6/toolbar/theming/colors/index.md
+++ b/static/usage/v6/toolbar/theming/colors/index.md
@@ -5,4 +5,9 @@ import react from './react.md';
 import vue from './vue.md';
 import angular from './angular.md';
 
-<Playground code={{ javascript, react, vue, angular }} src="usage/v6/toolbar/theming/colors/demo.html" size="large" />
+<Playground
+  version="6"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v6/toolbar/theming/colors/demo.html"
+  size="large"
+/>
diff --git a/static/usage/v6/toolbar/theming/css-properties/index.md b/static/usage/v6/toolbar/theming/css-properties/index.md
index b67029ee5de..95b9a7db1ce 100644
--- a/static/usage/v6/toolbar/theming/css-properties/index.md
+++ b/static/usage/v6/toolbar/theming/css-properties/index.md
@@ -11,6 +11,7 @@ import angular_example_component_html from './angular/example_component_html.md'
 import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
+  version="6"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md
index 6a75d1be5f1..27c7d6b0c0c 100644
--- a/static/usage/v7/back-button/basic/index.md
+++ b/static/usage/v7/back-button/basic/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="7"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md
index d09cfdb97d7..d90a901513f 100644
--- a/static/usage/v7/back-button/custom/index.md
+++ b/static/usage/v7/back-button/custom/index.md
@@ -17,6 +17,7 @@ import vue_page_one from './vue/page_one_vue.md';
 import vue_page_two from './vue/page_two_vue.md';
 
 <Playground
+  version="7"
   code={{
     javascript,
     angular: {
diff --git a/static/usage/v7/router/basic/index.md b/static/usage/v7/router/basic/index.md
index 5fd52766bcb..d02afbe2a35 100644
--- a/static/usage/v7/router/basic/index.md
+++ b/static/usage/v7/router/basic/index.md
@@ -3,6 +3,7 @@ import Playground from '@site/src/components/global/Playground';
 import javascript from './javascript.md';
 
 <Playground
+  version="7"
   code={{ javascript }}
   src="usage/v7/router/basic/demo.html"
   devicePreview={true}
diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md
index ac83a5daf96..70fb4890262 100644
--- a/static/usage/v7/select/typeahead/index.md
+++ b/static/usage/v7/select/typeahead/index.md
@@ -18,6 +18,7 @@ import angular_modal_example_component_html from './angular/modal-example_compon
 import angular_types_ts from './angular/angular_types_ts.md';
 
 <Playground
+  version="7"
   code={{ 
     javascript, 
     react: {