diff --git a/.eslintignore b/.eslintignore
index 3c68eb7399f6..6e714f19dddd 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,6 @@
 dist
 demo/demo.js
 node_modules
+
+# TODO: Upgrade to ESLint4 so we can apply a specific rule (one for CJS code) for below files
+src/**/*.config.js
diff --git a/.travis.yml b/.travis.yml
index df1d0893fba1..d849f457d82c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -42,8 +42,8 @@ install:
   - if [[ -n "${AAT_TOKEN}" && "$TEST_SUITE" == "a11y" ]]; then npm i https://aat.mybluemix.net/dist/karma-ibma.tgz; fi
 
 script:
-  - if [[ "$TEST_SUITE" == "misc" ]]; then npm run lint; fi
   - if [[ "$TEST_SUITE" == "misc" ]]; then npm run build; fi
+  - if [[ "$TEST_SUITE" == "misc" ]]; then npm run lint; fi
   - if [[ "$TEST_SUITE" == "unit" ]]; then npm run test:unit -- -b ChromeHeadless_Travis -b Firefox; fi
   - if [[ "$TEST_SUITE" == "unit-each" ]]; then find tests/spec -name "*.js" ! -name left-nav_spec.js -print0 | xargs -0 -n 1 -P 1 npm run test:unit -- -d -f; fi
   - if [[ -n "${AAT_TOKEN}" && "$TEST_SUITE" == "a11y" ]]; then npm run test:a11y; fi
diff --git a/demo/.babelrc b/demo/.babelrc
index 0bcbdc77956a..f4f9840193db 100644
--- a/demo/.babelrc
+++ b/demo/.babelrc
@@ -11,5 +11,5 @@
     ],
     "react"
   ],
-  "plugins": ["transform-class-properties", "dev-expression"]
+  "plugins": ["transform-class-properties", "transform-object-rest-spread", "dev-expression"]
 }
diff --git a/demo/js/components/CodePage/CodePage.js b/demo/js/components/CodePage/CodePage.js
index badaeb66d0b7..b22873190c37 100644
--- a/demo/js/components/CodePage/CodePage.js
+++ b/demo/js/components/CodePage/CodePage.js
@@ -4,54 +4,26 @@ import Markdown from 'markdown-it';
 
 import ComponentExample from '../ComponentExample/ComponentExample';
 
-/**
- * @param {ComponentCollection|Component} metadata The component data.
- * @returns {string} The HTML snippet for the component.
- */
-const getContent = metadata => {
-  const { variants = {} } = metadata;
-  const { items = [] } = variants;
-  const variant = items[0];
-  return metadata.content || (variant && variant.content) || '';
-};
-
-/**
- * @param {ComponentCollection|Component} metadata The component data.
- * @returns {Component[]|Variant[]} The data of the component variants.
- */
-const getSubItems = metadata => {
-  if (metadata.isCollection) {
-    return metadata.items;
-  }
-  if (!metadata.isCollated) {
-    return metadata.variants.items;
-  }
-  return [];
-};
-
 /**
  * The page to show the component demo, its code as well as its README.
  */
 const CodePage = ({ metadata, hideViewFullRender }) => {
   const md = new Markdown({ html: true });
-  const subItems = getSubItems(metadata).filter(item => !item.isHidden);
+  const subItems = (metadata.items || []).filter(item => !item.isHidden);
+  /* eslint-disable react/no-danger */
   const componentContent =
     !metadata.isCollection && subItems.length <= 1 ? (
-      <ComponentExample hideViewFullRender={hideViewFullRender} component={metadata.name} htmlFile={getContent(metadata)} />
+      <ComponentExample hideViewFullRender={hideViewFullRender} component={metadata.name} htmlFile={metadata.renderedContent} />
     ) : (
       subItems.map(item => (
         <div key={item.id} className="component-variation">
           <h2 className="component-variation__name">{item.label}</h2>
-          <ComponentExample
-            variant={item.handle.replace(/--default$/, '')}
-            component={metadata.name}
-            htmlFile={getContent(item)}
-          />
+          {item.notes && metadata.notes !== item.notes && <p>{item.notes}</p>}
+          <ComponentExample variant={item.handle} component={metadata.name} htmlFile={item.renderedContent} />
         </div>
       ))
     );
 
-  /* eslint-disable react/no-danger */
   return (
     <div className="page code-page test">
       {componentContent}
diff --git a/demo/js/components/ComponentExample/ComponentExample.js b/demo/js/components/ComponentExample/ComponentExample.js
index 89e872fe9db7..adeeeceb4262 100644
--- a/demo/js/components/ComponentExample/ComponentExample.js
+++ b/demo/js/components/ComponentExample/ComponentExample.js
@@ -20,7 +20,7 @@ const ComponentExample = ({ htmlFile, component, variant, codepenSlug, hideViewF
   });
 
   const codepenLink = codepenSlug && `https://codepen.io/team/carbon/full/${codepenSlug}/`;
-  const componentLink = variant ? `/component/${component}/${variant}` : `/component/${component}`;
+  const componentLink = variant ? `/component/${variant}` : `/component/${component}`;
 
   const viewFullRender = hideViewFullRender ? null : (
     <Link className="component-example__view-full-render" target="_blank" href={codepenLink || componentLink}>
diff --git a/demo/js/components/RootPage.js b/demo/js/components/RootPage.js
index ce47f3d02ed1..5657e465c0fb 100644
--- a/demo/js/components/RootPage.js
+++ b/demo/js/components/RootPage.js
@@ -6,6 +6,62 @@ import SideNav from './SideNav';
 import PageHeader from './PageHeader/PageHeader';
 import SideNavToggle from './SideNavToggle/SideNavToggle';
 
+const checkStatus = response => {
+  if (response.status >= 200 && response.status < 400) {
+    return response;
+  }
+
+  const error = new Error(response.statusText);
+  error.response = response;
+  throw error;
+};
+
+const load = (componentItems, selectedNavItemId) => {
+  const metadata = componentItems && componentItems.find(item => item.id === selectedNavItemId);
+  const subItems = metadata.items || [];
+  const hasRenderedContent =
+    !metadata.isCollection && subItems.length <= 1 ? metadata.renderedContent : subItems.every(item => item.renderedContent);
+  if (!hasRenderedContent) {
+    return fetch(`/code/${metadata.name}`)
+      .then(checkStatus)
+      .then(response => {
+        const contentType = response.headers.get('content-type');
+        return contentType && contentType.includes('application/json') ? response.json() : response.text();
+      })
+      .then(responseContent => {
+        if (Object(responseContent) === responseContent) {
+          return componentItems.map(
+            item =>
+              item.id !== selectedNavItemId
+                ? item
+                : {
+                    ...item,
+                    items: item.items.map(
+                      subItem =>
+                        !responseContent[subItem.handle]
+                          ? subItem
+                          : {
+                              ...subItem,
+                              renderedContent: responseContent[subItem.handle],
+                            }
+                    ),
+                  }
+          );
+        }
+        return componentItems.map(
+          item =>
+            item.id !== selectedNavItemId
+              ? item
+              : {
+                  ...item,
+                  renderedContent: responseContent,
+                }
+        );
+      });
+  }
+  return Promise.resolve(null);
+};
+
 /**
  * The top-most React component for dev env page.
  */
@@ -22,9 +78,19 @@ class RootPage extends Component {
     docItems: PropTypes.arrayOf(PropTypes.shape()).isRequired, // eslint-disable-line react/no-unused-prop-types
   };
 
-  constructor() {
+  constructor(props) {
     super();
-    this.state = {};
+
+    const { componentItems } = props;
+
+    this.state = {
+      /**
+       * The array of component data.
+       * @type {Object[]}
+       */
+      componentItems,
+    };
+
     window.addEventListener('popstate', evt => {
       this.switchTo(evt.state.name);
     });
@@ -42,6 +108,13 @@ class RootPage extends Component {
     }
   }
 
+  componentWillReceiveProps(props) {
+    const { componentItems } = props;
+    if (this.props.componentItems !== componentItems) {
+      this.setState({ componentItems });
+    }
+  }
+
   /**
    * The handler for changing in the state of side nav's toggle button.
    */
@@ -53,7 +126,7 @@ class RootPage extends Component {
    * The handler for the `click` event on the side nav for changing selection.
    */
   onSideNavItemClick = evt => {
-    const { componentItems } = this.props;
+    const { componentItems } = this.state;
     const selectedNavItem = componentItems && componentItems.find(item => item.id === evt.target.dataset.navId);
     if (selectedNavItem) {
       this.switchTo(selectedNavItem.id);
@@ -64,7 +137,7 @@ class RootPage extends Component {
    * @returns The component data that is currently selected.
    */
   getCurrentComponentItem() {
-    const { componentItems } = this.props;
+    const { componentItems } = this.state;
     return componentItems && componentItems.find(item => item.id === this.state.selectedNavItemId);
   }
 
@@ -74,17 +147,22 @@ class RootPage extends Component {
    */
   switchTo(selectedNavItemId) {
     this.setState({ selectedNavItemId }, () => {
-      const { componentItems } = this.props;
+      const { componentItems } = this.state;
       const selectedNavItem = componentItems && componentItems.find(item => item.id === selectedNavItemId);
       const { name } = selectedNavItem || {};
       if (name) {
         history.pushState({ name }, name, `/demo/${name}`);
       }
+      load(componentItems, selectedNavItemId).then(newComponentItems => {
+        if (newComponentItems) {
+          this.setState({ componentItems: newComponentItems });
+        }
+      });
     });
   }
 
   render() {
-    const { componentItems } = this.props;
+    const { componentItems } = this.state;
     const metadata = this.getCurrentComponentItem();
     const { name, label } = metadata || {};
     const classNames = classnames({
diff --git a/demo/views/_layout.dust b/demo/views/_layout.dust
new file mode 100644
index 000000000000..ab3b7e3477a9
--- /dev/null
+++ b/demo/views/_layout.dust
@@ -0,0 +1 @@
+{>"{preview}"/}
diff --git a/demo/views/_preview-default.dust b/demo/views/_preview-default.dust
new file mode 100644
index 000000000000..4465d1d4153f
--- /dev/null
+++ b/demo/views/_preview-default.dust
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Carbon Components</title>
+    <link rel="stylesheet" href="/demo/demo.css">
+    <style>
+      .offleft {
+        position: absolute;
+        top: 0;
+        left: -10000px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body class="bx--body demo--container" data-floating-menu-container>
+    <div class="demo--container__panel" data-card-list data-demo-name="{name}">
+      {+content}
+      {/content}
+    </div>
+
+    <!-- Pseudo element to demonstrate focus-wrap behavior (focus trap) -->
+    <input aria-label="inpute-text-offleft" type="text" class="offleft" />
+
+    <!-- Scripts -->
+    <!-- <script src="/carbon-components.min.js"></script> -->
+    <script src="/demo/demo.js"></script>
+    <!-- Disable Auto Init with this flag -->
+    <!-- true = JavaScript will not initialize automatically -->
+    <!-- false = JavaScript will initialize automatically -->
+    <script>
+      CarbonComponents.settings.disableAutoInit = false;
+    </script>
+  </body>
+</html>
diff --git a/demo/views/_preview-empty.dust b/demo/views/_preview-empty.dust
new file mode 100644
index 000000000000..3641f31597bd
--- /dev/null
+++ b/demo/views/_preview-empty.dust
@@ -0,0 +1,2 @@
+{+content}
+{/content}
diff --git a/gulpfile.js b/gulpfile.js
index cd9d007d5ac9..03c1f639b5bb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,6 +1,7 @@
 'use strict';
 
 // Node
+const fs = require('fs');
 const path = require('path');
 
 // Styles
@@ -40,10 +41,16 @@ const jsdocConfig = require('gulp-jsdoc3/dist/jsdocConfig.json');
 // Generic utility
 const del = require('del');
 
+const writeFile = promisify(fs.writeFile);
+const mkdirp = promisify(require('mkdirp'));
+
 // Test environment
 const Server = require('karma').Server;
 const commander = require('commander');
 
+// Fractal templates
+const templates = require('./tools/templates');
+
 const assign = v => v;
 const cloptions = commander
   .option('-k, --keepalive', 'Keeps browser open after first run of Karma test finishes')
@@ -64,8 +71,7 @@ gulp.task('browser-sync', ['sass:dev'], cb => {
   let started;
   nodemon({
     script: './server.js',
-    ext: 'dust js',
-    watch: ['./demo/views', './server.js'],
+    watch: ['demo/**/*.dust', 'src/**/*.dust', 'src/**/*.config.js', 'server.js'],
     env: {
       PORT: cloptions.serverport,
     },
@@ -250,11 +256,17 @@ gulp.task('sass:source', () => {
   return gulp.src(srcFiles).pipe(gulp.dest('scss'));
 });
 
-gulp.task('html:source', () => {
-  const srcFiles = './src/components/**/*.html';
-
-  return gulp.src(srcFiles).pipe(gulp.dest('html'));
-});
+gulp.task('html:source', () =>
+  templates.render({ preview: '_preview-empty' }).then(renderedItems => {
+    const promises = [];
+    renderedItems.forEach((rendered, item) => {
+      const dirname = path.dirname(path.resolve(__dirname, 'html', item.relViewPath));
+      const filename = `${item.handle.replace(/--default$/, '')}.html`;
+      promises.push(mkdirp(dirname).then(() => writeFile(path.resolve(dirname, filename), rendered)));
+    });
+    return Promise.all(promises);
+  })
+);
 
 /**
  * Lint
@@ -330,7 +342,7 @@ gulp.task('jsdoc', cb => {
 
 gulp.task('test', ['test:unit', 'test:a11y']);
 
-gulp.task('test:unit', done => {
+gulp.task('test:unit', ['html:source'], done => {
   new Server(
     {
       configFile: path.resolve(__dirname, 'tests/karma.conf.js'),
diff --git a/package.json b/package.json
index a535d4bac726..676409ae0b11 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,8 @@
     "cz-conventional-changelog": "^1.2.0",
     "del": "~2.0.2",
     "diff": "^3.4.0",
+    "dustjs-helpers": "^1.7.0",
+    "dustjs-linkedin": "^2.7.0",
     "eslint": "^3.0.0",
     "eslint-config-airbnb": "^11.0.0",
     "eslint-config-airbnb-base": "^11.0.0",
@@ -109,9 +111,10 @@
     "markdown-it": "^8.4.0",
     "merge-stream": "^1.0.0",
     "minimatch": "^3.0.0",
+    "mkdirp": "^0.5.0",
     "mock-raf": "^1.0.0",
     "nodemon": "1.9.1",
-    "prettier": "^1.7.0",
+    "prettier": "^1.10.0",
     "prop-types": "^15.6.0",
     "pump": "^1.0.2",
     "react": "^16.2.0",
@@ -131,7 +134,8 @@
     "vinyl-named": "^1.1.0",
     "webpack": "^3.10.0",
     "webpack-dev-middleware": "^2.0.0",
-    "webpack-hot-middleware": "^2.21.0"
+    "webpack-hot-middleware": "^2.21.0",
+    "whatwg-fetch": "^2.0.0"
   },
   "files": [
     "css/**/*",
diff --git a/server.js b/server.js
index 15a8d1787384..50bf70b43ac9 100644
--- a/server.js
+++ b/server.js
@@ -2,7 +2,6 @@
 
 const globby = require('globby'); // eslint-disable-line
 const { promisify } = require('bluebird'); // eslint-disable-line
-const fs = require('fs');
 const path = require('path');
 const express = require('express'); // eslint-disable-line
 const Fractal = require('@frctl/fractal'); // eslint-disable-line
@@ -11,7 +10,7 @@ const webpack = require('webpack'); // eslint-disable-line
 const webpackDevMiddleware = require('webpack-dev-middleware'); // eslint-disable-line
 const webpackHotMiddleware = require('webpack-hot-middleware'); // eslint-disable-line
 
-const readFile = promisify(fs.readFile);
+const templates = require('./tools/templates');
 
 const app = express();
 const adaro = require('adaro'); // eslint-disable-line
@@ -26,7 +25,7 @@ app.use(webpackHotMiddleware(compiler));
 
 const fractal = Fractal.create();
 fractal.components.set('path', path.join(__dirname, 'src/components'));
-fractal.components.set('ext', '.html');
+fractal.components.set('ext', '.dust');
 fractal.docs.set('path', path.join(__dirname, 'docs'));
 
 app.engine('dust', adaro.dust());
@@ -38,34 +37,44 @@ app.use(express.static('scripts'));
 app.use('/docs/js', express.static('docs/js'));
 
 /**
- * @param {string} glob The glob.
- * @returns {string} The file contents of files matching the given glob, concatenated.
- */
-const getContent = glob =>
-  globby(glob).then(filePaths => {
-    if (filePaths.length === 0) {
-      return undefined;
-    }
-    return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))).then(contents =>
-      contents.reduce((a, b) => a.concat(b))
-    );
-  });
-
-/**
- * @param {ComponentCollection|Component} item The component data.
+ * @param {ComponentCollection|Component} metadata The component data.
  * @returns {Promise<ComponentCollection|Component>}
- *   The component data, with README.md content assigned to `.notes` property for component with variants (`ComponentCollection`).
+ *   The normalized component data,
+ *   esp. with README.md content assigned to `.notes` property for component with variants (`ComponentCollection`).
  *   Fractal automatically populate `.notes` for component without variants (`Component`).
  */
-const ensureComponentItemNotes = item => {
-  if (!item.isCollection || !item.config.readme) {
-    return item;
+const normalizeMetadata = metadata => {
+  const items = metadata.isCollection ? metadata : !metadata.isCollated && metadata.variants && metadata.variants();
+  const visibleItems = items && items.filter(item => !item.isHidden);
+  const metadataJSON = typeof metadata.toJSON !== 'function' ? metadata : metadata.toJSON();
+  if (!metadata.isCollection && visibleItems && visibleItems.size === 1) {
+    const firstVariant = visibleItems.first();
+    return Object.assign(metadataJSON, {
+      context: firstVariant.context,
+      notes: firstVariant.notes,
+      preview: firstVariant.preview,
+      variants: undefined,
+    });
   }
-  return item.config.readme
-    .getContent()
-    .then(notes => Object.assign(typeof item.toJSON !== 'function' ? item : item.toJSON(), { notes }));
+  return Object.assign(metadataJSON, {
+    items: !items || items.size <= 1 ? undefined : items.map(normalizeMetadata).toJSON().items,
+    variants: undefined,
+  });
 };
 
+/**
+ * The promise resolved with the list of nav items.
+ * @type {Promise<(ComponentCollection|Component)[]>}
+ */
+const promiseNavItems = templates.promiseCache
+  .then(({ componentSource, docSource }) =>
+    Promise.all([Promise.all(componentSource.items().map(normalizeMetadata)), docSource.items()])
+  )
+  .then(([componentItems, docItems]) => ({
+    componentItems,
+    docItems,
+  }));
+
 ['/', '/demo/:component'].forEach(route => {
   app.get(route, (req, res) => {
     const name = req.params.component;
@@ -73,12 +82,8 @@ const ensureComponentItemNotes = item => {
     if (name && path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
       res.status(404).end();
     } else {
-      fractal
-        .load()
-        .then(([componentSource, docSource]) =>
-          Promise.all([Promise.all(componentSource.items().map(ensureComponentItemNotes)), docSource.items()])
-        )
-        .then(([componentItems, docItems]) => {
+      promiseNavItems
+        .then(({ componentItems, docItems }) => {
           res.render('demo-nav', {
             componentItems,
             docItems,
@@ -92,29 +97,44 @@ const ensureComponentItemNotes = item => {
   });
 });
 
-['/component/:component', '/component/:component/:variant'].forEach(route => {
-  app.get(route, (req, res) => {
-    const glob = `src/components/${req.params.component}/**/${req.params.variant || '*'}.html`;
+app.get('/component/:component', (req, res) => {
+  const name = req.params.component;
+
+  if (path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+    res.status(404).end();
+  } else {
+    templates
+      .render({ defaultPreview: '_preview-default', concat: true }, name)
+      .then(rendered => {
+        res.send(rendered);
+      })
+      .catch(error => {
+        console.error(error.stack); // eslint-disable-line no-console
+        res.status(500).end();
+      });
+  }
+});
 
-    if (path.relative('src/components', glob).substr(0, 2) === '..') {
-      res.status(404).end();
-    } else {
-      getContent(glob)
-        .then(html => {
-          if (typeof html === 'undefined') {
-            res.status(404).end();
-          } else {
-            res.render('demo-live', {
-              content: html,
-            });
-          }
-        })
-        .catch(error => {
-          console.error(error.stack); // eslint-disable-line no-console
-          res.status(500).end();
+app.get('/code/:component', (req, res) => {
+  const name = req.params.component;
+
+  if (name && path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+    res.status(404).end();
+  } else {
+    templates
+      .render({ preview: '_preview-empty' }, name)
+      .then(renderedItems => {
+        const o = {};
+        renderedItems.forEach((rendered, item) => {
+          o[item.handle] = rendered.trim();
         });
-    }
-  });
+        res.json(o);
+      })
+      .catch(error => {
+        console.error(error.stack); // eslint-disable-line no-console
+        res.status(500).end();
+      });
+  }
 });
 
 app.listen(port, () => {
diff --git a/src/components/accordion/accordion--legacy.dust b/src/components/accordion/accordion--legacy.dust
new file mode 100644
index 000000000000..18bb649354e5
--- /dev/null
+++ b/src/components/accordion/accordion--legacy.dust
@@ -0,0 +1,54 @@
+{>_layout/}
+
+{<content}
+  <ul data-accordion class="bx--accordion">
+    <li tabindex="0" data-accordion-item class="bx--accordion__item">
+      <div class="bx--accordion__heading">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Label</p>
+      </div>
+      <div class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+    <li tabindex="0" data-accordion-item class="bx--accordion__item">
+      <div class="bx--accordion__heading">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Label with multiple words</p>
+      </div>
+      <div class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+    <li tabindex="0" data-accordion-item class="bx--accordion__item">
+      <div class="bx--accordion__heading">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Label</p>
+      </div>
+      <div class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+    <li tabindex="0" data-accordion-item class="bx--accordion__item">
+      <div class="bx--accordion__heading">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Label</p>
+      </div>
+      <div class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+  </ul>
+{/content}
diff --git a/src/components/accordion/accordion.dust b/src/components/accordion/accordion.dust
new file mode 100644
index 000000000000..c443aa2d7fd8
--- /dev/null
+++ b/src/components/accordion/accordion.dust
@@ -0,0 +1,54 @@
+{>_layout/}
+
+{<content}
+  <ul data-accordion class="bx--accordion">
+    <li data-accordion-item class="bx--accordion__item">
+      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Section 1 title </p>
+      </button>
+      <div id="pane1" class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+    <li data-accordion-item class="bx--accordion__item">
+      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Section 2 title</p>
+      </button>
+      <div id="pane2" class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+    <li data-accordion-item class="bx--accordion__item">
+      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Section 3 title</p>
+      </button>
+      <div id="pane3" class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+    <li data-accordion-item class="bx--accordion__item">
+      <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
+        <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+        <p class="bx--accordion__title">Section 4 title</p>
+      </button>
+      <div id="pane4" class="bx--accordion__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </li>
+  </ul>
+{/content}
diff --git a/src/components/accordion/accordion.html b/src/components/accordion/accordion.html
deleted file mode 100644
index 4539f1c06d81..000000000000
--- a/src/components/accordion/accordion.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<ul data-accordion class="bx--accordion">
-  <li data-accordion-item class="bx--accordion__item">
-    <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Section 1 title </p>
-    </button>
-    <div id="pane1" class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-  <li data-accordion-item class="bx--accordion__item">
-    <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Section 2 title</p>
-    </button>
-    <div id="pane2" class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-  <li data-accordion-item class="bx--accordion__item">
-    <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Section 3 title</p>
-    </button>
-    <div id="pane3" class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-  <li data-accordion-item class="bx--accordion__item">
-    <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Section 4 title</p>
-    </button>
-    <div id="pane4" class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-</ul>
diff --git a/src/components/accordion/legacyaccordion.html b/src/components/accordion/legacyaccordion.html
deleted file mode 100644
index 7c475b840d67..000000000000
--- a/src/components/accordion/legacyaccordion.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<ul data-accordion class="bx--accordion">
-  <li tabindex="0" data-accordion-item class="bx--accordion__item">
-    <div class="bx--accordion__heading">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Label</p>
-    </div>
-    <div class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-  <li tabindex="0" data-accordion-item class="bx--accordion__item">
-    <div class="bx--accordion__heading">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Label with multiple words</p>
-    </div>
-    <div class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-  <li tabindex="0" data-accordion-item class="bx--accordion__item">
-    <div class="bx--accordion__heading">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Label</p>
-    </div>
-    <div class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-  <li tabindex="0" data-accordion-item class="bx--accordion__item">
-    <div class="bx--accordion__heading">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-      <p class="bx--accordion__title">Label</p>
-    </div>
-    <div class="bx--accordion__content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </div>
-  </li>
-</ul>
\ No newline at end of file
diff --git a/src/components/breadcrumb/breadcrumb.dust b/src/components/breadcrumb/breadcrumb.dust
new file mode 100644
index 000000000000..e0ae611b1d0f
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.dust
@@ -0,0 +1,17 @@
+{>_layout/}
+
+{<content}
+  <nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb">
+    <div class="bx--breadcrumb-item">
+      <a href="#" class="bx--link">Breadcrumb 1</a>
+    </div>
+    <div class="bx--breadcrumb-item">
+      <a href="#" class="bx--link">Breadcrumb 2</a>
+    </div>
+    <div class="bx--breadcrumb-item">
+      <a href="#" class="bx--link">Breadcrumb 3</a>
+    </div>
+    <div class="bx--breadcrumb-item">
+    </div>
+  </nav>
+{/content}
diff --git a/src/components/breadcrumb/breadcrumb.html b/src/components/breadcrumb/breadcrumb.html
deleted file mode 100644
index d064d3c643b2..000000000000
--- a/src/components/breadcrumb/breadcrumb.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb">
-  <div class="bx--breadcrumb-item">
-    <a href="#" class="bx--link">Breadcrumb 1</a>
-  </div>
-  <div class="bx--breadcrumb-item">
-    <a href="#" class="bx--link">Breadcrumb 2</a>
-  </div>
-  <div class="bx--breadcrumb-item">
-    <a href="#" class="bx--link">Breadcrumb 3</a>
-  </div>
-  <div class="bx--breadcrumb-item">
-  </div>
-</nav>
diff --git a/src/components/button/button.config.js b/src/components/button/button.config.js
new file mode 100644
index 000000000000..7f512fc3e68a
--- /dev/null
+++ b/src/components/button/button.config.js
@@ -0,0 +1,90 @@
+'use stirct';
+
+module.exports = {
+  default: 'primary',
+  variants: [
+    {
+      name: 'primary',
+      label: 'Primary Buttons',
+      notes: 'Primary buttons should be used for the principle call to action on the page.',
+      context: {
+        variant: 'primary',
+      },
+    },
+    {
+      name: 'primary--small',
+      label: 'Primary Buttons (Small)',
+      notes: `
+        Small buttons may be used when there is not enough space for a
+        regular sized button. This issue is most found in tables. Small button should have three words
+        or less.
+      `,
+      context: {
+        variant: 'primary',
+        small: true,
+      },
+    },
+    {
+      name: 'secondary',
+      label: 'Secondary Buttons',
+      notes: 'Secondary buttons should be used for secondary actions on each page.',
+      context: {
+        variant: 'secondary',
+      },
+    },
+    {
+      name: 'secondary--small',
+      label: 'Secondary Buttons (Small)',
+      notes: `
+        Small buttons may be used when there is not enough space for a
+        regular sized button. This issue is most found in tables. Small button should have three words
+        or less.
+      `,
+      context: {
+        variant: 'secondary',
+        small: true,
+      },
+    },
+    {
+      name: 'danger',
+      label: 'Danger Buttons',
+      notes: 'Danger buttons should be used for a negative action (such as Delete) on the page.',
+      context: {
+        variant: 'danger',
+      },
+    },
+    {
+      name: 'danger--small',
+      label: 'Danger Buttons (Small)',
+      notes: `
+        Small buttons may be used when there is not enough space for a
+        regular sized button. This issue is most found in tables. Small button should have three words
+        or less.
+      `,
+      context: {
+        variant: 'danger',
+        small: true,
+      },
+    },
+    {
+      name: 'ghost',
+      label: 'Ghost Buttons',
+      context: {
+        variant: 'ghost',
+      },
+    },
+    {
+      name: 'ghost--small',
+      label: 'Ghost Buttons (Small)',
+      notes: `
+        Small buttons may be used when there is not enough space for a
+        regular sized button. This issue is most found in tables. Small button should have three words
+        or less.
+      `,
+      context: {
+        variant: 'ghost',
+        small: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/button/button.dust b/src/components/button/button.dust
new file mode 100644
index 000000000000..1cf5496409d0
--- /dev/null
+++ b/src/components/button/button.dust
@@ -0,0 +1,12 @@
+{>_layout/}
+
+{<content}
+  <button class="bx--btn bx--btn--{variant}{?small} bx--btn--sm{/small}" type="button">Button</button>
+  <button class="bx--btn bx--btn--{variant}{?small} bx--btn--sm{/small}" type="button" disabled>Button</button>
+  <button class="bx--btn bx--btn--{variant}{?small} bx--btn--sm{/small}" type="button">
+    With icon
+    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+    </svg>
+  </button>
+{/content}
diff --git a/src/components/button/danger-button.html b/src/components/button/danger-button.html
deleted file mode 100644
index ffeff0de806e..000000000000
--- a/src/components/button/danger-button.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<button class="bx--btn bx--btn--danger" type="button">Danger button</button>
-<button class="bx--btn bx--btn--danger" type="button" disabled>Danger button</button>
-<button class="bx--btn bx--btn--danger" type="button">
-  Danger with icon
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
-<button class="bx--btn bx--btn--danger bx--btn--sm" type="button">Small Danger button</button>
-<button class="bx--btn bx--btn--danger bx--btn--sm" type="button">
-  Small Danger with icon
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
diff --git a/src/components/button/ghost-button.html b/src/components/button/ghost-button.html
deleted file mode 100644
index e9ad25e85b8d..000000000000
--- a/src/components/button/ghost-button.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<button class="bx--btn bx--btn--ghost" type="button">
-  Ghost button
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
-<button disabled class="bx--btn bx--btn--ghost" type="button">
-  Ghost button
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
-<button class="bx--btn bx--btn--ghost bx--btn--sm" type="button">
-  Small Ghost button
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
diff --git a/src/components/button/primary-button.html b/src/components/button/primary-button.html
deleted file mode 100644
index db89714ea6ce..000000000000
--- a/src/components/button/primary-button.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<button class="bx--btn bx--btn--primary" type="button">Primary button</button>
-<button class="bx--btn bx--btn--primary" type="button" disabled>Primary button</button>
-<button class="bx--btn bx--btn--primary" type="button">
-  Primary with icon
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
-<button class="bx--btn bx--btn--primary bx--btn--sm" type="button">Small Primary button</button>
-<button class="bx--btn bx--btn--primary bx--btn--sm" type="button">
-  Small Primary button
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
diff --git a/src/components/button/secondary-button.html b/src/components/button/secondary-button.html
deleted file mode 100644
index 2b30cc9e91f5..000000000000
--- a/src/components/button/secondary-button.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<button class="bx--btn bx--btn--secondary" type="button">Secondary button</button>
-<button class="bx--btn bx--btn--secondary" type="button" disabled>Secondary button</button>
-<button class="bx--btn bx--btn--secondary" type="button">
-  Secondary with icon
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
-<button class="bx--btn bx--btn--secondary bx--btn--sm" type="button">Small Secondary button</button>
-<button class="bx--btn bx--btn--secondary bx--btn--sm" type="button">
-  Small Secondary with icon
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-</button>
diff --git a/src/components/card/card--with-status.html b/src/components/card/card--with-status.html
deleted file mode 100644
index 9c2a15d81043..000000000000
--- a/src/components/card/card--with-status.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<article class="bx--card" tabindex="0" aria-labelledby="card-title-1">
-  <div class="bx--card__card-overview">
-    <!-- OverflowMenu -->
-    <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-        <title>list of options</title>
-        <circle cx="2" cy="2" r="2"></circle>
-        <circle cx="2" cy="10" r="2"></circle>
-        <circle cx="2" cy="18" r="2"></circle>
-      </svg>
-      <ul class="bx--overflow-menu-options">
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Stop App</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Edit Routes and Access</button>
-        </li>
-        <li class="bx--overflow-menu-options__option bx--overflow-menu--divider">
-          <button type="button" class="bx--overflow-menu-options__btn">Delete App</button>
-        </li>
-      </ul>
-    </div>
-    <div class="bx--card-overview__about">
-      <figure class="bx--about__icon">
-        <img src="/globals/assets/images/placeholder-icon-32x32.svg" alt="" class="bx--about__icon--img" />
-      </figure>
-      <header class="bx--about__title">
-        <p id="card-title-1" class="bx--about__title--name bx--type-gamma">Card Name</p>
-        <a href="" class="bx--link bx--about__title--link">Secondary Information</a>
-      </header>
-    </div>
-  </div>
-  <div class="bx--card-footer">
-    <div class="bx--card-footer__app-status">
-      <div class="bx--card-footer__app-status--running active">
-        <div class="bx--running__text">Running</div>
-      </div>
-      <div class="bx--card-footer__app-status--not-running">
-        <div class="bx--not-running__text">Not Running</div>
-      </div>
-      <div class="bx--card-footer__app-status--stopped">
-        <div class="bx--stopped__text">Stopped</div>
-      </div>
-    </div>
-    <div class="bx--card-footer__app-actions">
-      <button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
-        <svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
-          <path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
-        </svg>
-      </button>
-      <button class="bx--app-actions__button" id="load-app" aria-label="load-app">
-        <svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
-          <path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
-          <path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-</article>
diff --git a/src/components/card/card.config.js b/src/components/card/card.config.js
new file mode 100644
index 000000000000..81145e1d2890
--- /dev/null
+++ b/src/components/card/card.config.js
@@ -0,0 +1,22 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+      notes: `
+        Cards provide an at-a glance preview of the content they link to and frequently contain
+        easily-consumable content.
+      `,
+    },
+    {
+      name: 'with-status',
+      label: 'With status',
+      notes: 'Card Status displays the current status of the application (RUNNING, NOT_RUNNING, STOPPED).',
+      context: {
+        hasStatus: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/card/card.dust b/src/components/card/card.dust
new file mode 100644
index 000000000000..0081be652cf8
--- /dev/null
+++ b/src/components/card/card.dust
@@ -0,0 +1,76 @@
+{>_layout/}
+
+{<content}
+  <article class="bx--card" tabindex="0" aria-labelledby="card-title-2">
+    <div class="bx--card__card-overview">
+      <!-- OverflowMenu -->
+      <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
+        <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+          <title>list of options</title>
+          <circle cx="2" cy="2" r="2"></circle>
+          <circle cx="2" cy="10" r="2"></circle>
+          <circle cx="2" cy="18" r="2"></circle>
+        </svg>
+        <ul class="bx--overflow-menu-options">
+          <li class="bx--overflow-menu-options__option">
+            <button type="button" class="bx--overflow-menu-options__btn">Stop App</button>
+          </li>
+          <li class="bx--overflow-menu-options__option">
+            <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
+          </li>
+          <li class="bx--overflow-menu-options__option">
+            <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
+          </li>
+          <li class="bx--overflow-menu-options__option">
+            <button type="button" class="bx--overflow-menu-options__btn">Edit Routes and Access</button>
+          </li>
+          <li class="bx--overflow-menu-options__option bx--overflow-menu--divider">
+            <button type="button" class="bx--overflow-menu-options__btn">Delete App</button>
+          </li>
+        </ul>
+      </div>
+      <section class="bx--card-overview__about">
+        <figure class="bx--about__icon">
+          <img src="/globals/assets/images/placeholder-icon-32x32.svg" alt="" class="bx--about__icon--img" />
+        </figure>
+        <header class="bx--about__title">
+          <p id="card-title-2" class="bx--about__title--name bx--type-gamma" title="Card Name">Card Name</p>
+          <p class="bx--about__title--additional-info bx--type-delta">Secondary Information</p>
+        </header>
+    </div>
+    </section>
+    {^hasStatus}
+      <footer class="bx--card-footer">
+        <button class="bx--btn bx--btn--primary bx--btn--sm" type="button">View credentials</button>
+        <a href="" class="bx--card-footer__link">Docs</a>
+      </footer>
+    {:else}
+      <div class="bx--card-footer">
+        <div class="bx--card-footer__app-status">
+          <div class="bx--card-footer__app-status--running active">
+            <div class="bx--running__text">Running</div>
+          </div>
+          <div class="bx--card-footer__app-status--not-running">
+            <div class="bx--not-running__text">Not Running</div>
+          </div>
+          <div class="bx--card-footer__app-status--stopped">
+            <div class="bx--stopped__text">Stopped</div>
+          </div>
+        </div>
+        <div class="bx--card-footer__app-actions">
+          <button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
+            <svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
+              <path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
+            </svg>
+          </button>
+          <button class="bx--app-actions__button" id="load-app" aria-label="load-app">
+            <svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
+              <path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
+              <path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    {/hasStatus}
+  </article>
+{/content}
diff --git a/src/components/card/card.html b/src/components/card/card.html
deleted file mode 100644
index 1d18f07ae86e..000000000000
--- a/src/components/card/card.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<article class="bx--card" tabindex="0" aria-labelledby="card-title-2">
-  <div class="bx--card__card-overview">
-    <!-- OverflowMenu -->
-    <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-        <title>list of options</title>
-        <circle cx="2" cy="2" r="2"></circle>
-        <circle cx="2" cy="10" r="2"></circle>
-        <circle cx="2" cy="18" r="2"></circle>
-      </svg>
-      <ul class="bx--overflow-menu-options">
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Stop App</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Restart App</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button type="button" class="bx--overflow-menu-options__btn">Edit Routes and Access</button>
-        </li>
-        <li class="bx--overflow-menu-options__option bx--overflow-menu--divider">
-          <button type="button" class="bx--overflow-menu-options__btn">Delete App</button>
-        </li>
-      </ul>
-    </div>
-    <section class="bx--card-overview__about">
-      <figure class="bx--about__icon">
-        <img src="/globals/assets/images/placeholder-icon-32x32.svg" alt="" class="bx--about__icon--img" />
-      </figure>
-      <header class="bx--about__title">
-        <p id="card-title-2" class="bx--about__title--name bx--type-gamma" title="Card Name">Card Name</p>
-        <p class="bx--about__title--additional-info bx--type-delta">Secondary Information</p>
-      </header>
-  </div>
-  </section>
-  <footer class="bx--card-footer">
-    <button class="bx--btn bx--btn--primary bx--btn--sm" type="button">View credentials</button>
-    <a href="" class="bx--card-footer__link">Docs</a>
-  </footer>
-</article>
diff --git a/src/components/carousel/carousel.dust b/src/components/carousel/carousel.dust
new file mode 100644
index 000000000000..cf856daf15af
--- /dev/null
+++ b/src/components/carousel/carousel.dust
@@ -0,0 +1,62 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--type-omega">Carousel Title</div>
+  <div class="bx--carousel" data-carousel>
+    <button class="bx--carousel__btn" data-scroll-left>
+      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+      </svg>
+    </button>
+    <div class="bx--carousel-container">
+      <div class="bx--filmstrip" tabindex="-1">
+        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="0">
+          <img src="http://via.placeholder.com/256x144?text=/0">
+        </button>
+        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="1">
+          <img src="http://via.placeholder.com/256x144?text=1">
+        </button>
+        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="2">
+          <img src="http://via.placeholder.com/256x144?text=2">
+        </button>
+        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="3">
+          <img src="http://via.placeholder.com/256x144?text=3">
+        </button>
+        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="4">
+          <img src="http://via.placeholder.com/256x144?text=4">
+        </button>
+        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="5">
+          <img src="http://via.placeholder.com/256x144?text=5">
+        </button>
+      </div>
+    </div>
+    <button class="bx--carousel__btn" data-scroll-right>
+      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div id="carousel-lightbox" class="bx--modal" data-modal>
+    <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
+      <div class="bx--lightbox__main">
+        <button class="bx--lightbox__btn" data-scroll-left>
+          <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+            <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+          </svg>
+        </button>
+        <img src="http://via.placeholder.com/1056x594?text=/0" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=1" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=2" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=3" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=4" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=5" class="bx--lightbox__item">
+        <button class="bx--lightbox__btn" data-scroll-right>
+          <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+            <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/carousel/carousel.html b/src/components/carousel/carousel.html
deleted file mode 100644
index ec553724278c..000000000000
--- a/src/components/carousel/carousel.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="bx--type-omega">Carousel Title</div>
-<div class="bx--carousel" data-carousel>
-  <button class="bx--carousel__btn" data-scroll-left>
-    <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-    </svg>
-  </button>
-  <div class="bx--carousel-container">
-    <div class="bx--filmstrip" tabindex="-1">
-      <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="0">
-        <img src="http://via.placeholder.com/256x144?text=/0">
-      </button>
-      <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="1">
-        <img src="http://via.placeholder.com/256x144?text=1">
-      </button>
-      <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="2">
-        <img src="http://via.placeholder.com/256x144?text=2">
-      </button>
-      <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="3">
-        <img src="http://via.placeholder.com/256x144?text=3">
-      </button>
-      <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="4">
-        <img src="http://via.placeholder.com/256x144?text=4">
-      </button>
-      <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="5">
-        <img src="http://via.placeholder.com/256x144?text=5">
-      </button>
-    </div>
-  </div>
-  <button class="bx--carousel__btn" data-scroll-right>
-    <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-    </svg>
-  </button>
-</div>
-
-<div id="carousel-lightbox" class="bx--modal" data-modal>
-  <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
-    <div class="bx--lightbox__main">
-      <button class="bx--lightbox__btn" data-scroll-left>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-      <img src="http://via.placeholder.com/1056x594?text=/0" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=1" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=2" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=3" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=4" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=5" class="bx--lightbox__item">
-      <button class="bx--lightbox__btn" data-scroll-right>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/components/checkbox/checkbox.dust b/src/components/checkbox/checkbox.dust
new file mode 100644
index 000000000000..e04cf2d9ced6
--- /dev/null
+++ b/src/components/checkbox/checkbox.dust
@@ -0,0 +1,32 @@
+{>_layout/}
+
+{<content}
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Checkbox heading</legend>
+    <!-- input + label -->
+    <div class="bx--form-item bx--checkbox-wrapper">
+      <input id="bx--checkbox-new" class="bx--checkbox" type="checkbox" value="new" name="checkbox">
+      <label for="bx--checkbox-new" class="bx--checkbox-label">Checkbox label</label>
+    </div>
+      <!-- label > input -->
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="bx--checkbox-new2" class="bx--checkbox-label">
+          <input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" checked>
+          Checkbox label 2
+        </label>
+      </div>
+      <!-- input + label indeterminate -->
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <input id="bx--checkbox-ind" class="bx--checkbox" type="checkbox" value="new" name="checkbox" aria-checked="mixed">
+        <label for="bx--checkbox-ind" class="bx--checkbox-label">Checkbox label indeterminate</label>
+      </div>
+
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed">
+          <input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed">
+          Checkbox label 2 indeterminate
+        </label>
+      </div>
+
+  </fieldset>
+{/content}
diff --git a/src/components/checkbox/checkbox.html b/src/components/checkbox/checkbox.html
deleted file mode 100644
index 0904cdbd22ac..000000000000
--- a/src/components/checkbox/checkbox.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Checkbox heading</legend>
-  <!-- input + label -->
-  <div class="bx--form-item bx--checkbox-wrapper">
-    <input id="bx--checkbox-new" class="bx--checkbox" type="checkbox" value="new" name="checkbox">
-    <label for="bx--checkbox-new" class="bx--checkbox-label">Checkbox label</label>
-  </div>
-    <!-- label > input -->
-    <div class="bx--form-item bx--checkbox-wrapper">
-      <label for="bx--checkbox-new2" class="bx--checkbox-label">
-        <input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" checked>
-        Checkbox label 2
-      </label>
-    </div>
-    <!-- input + label indeterminate -->
-    <div class="bx--form-item bx--checkbox-wrapper">
-      <input id="bx--checkbox-ind" class="bx--checkbox" type="checkbox" value="new" name="checkbox" aria-checked="mixed">
-      <label for="bx--checkbox-ind" class="bx--checkbox-label">Checkbox label indeterminate</label>
-    </div>
-
-    <div class="bx--form-item bx--checkbox-wrapper">
-      <label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed">
-        <input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed">
-        Checkbox label 2 indeterminate
-      </label>
-    </div>
-
-</fieldset>
\ No newline at end of file
diff --git a/src/components/code-snippet/code-snippet--terminal.html b/src/components/code-snippet/code-snippet--terminal.html
deleted file mode 100644
index 1b01bff0afe2..000000000000
--- a/src/components/code-snippet/code-snippet--terminal.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="bx--snippet bx--snippet--terminal">
-  <div class="bx--snippet-container">
-    <pre><code>node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!</code></pre>
-  </div>
-  <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
-    <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
-      <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
-      <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
-    </svg>
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-  </button>
-</div>
diff --git a/src/components/code-snippet/code-snippet.config.js b/src/components/code-snippet/code-snippet.config.js
new file mode 100644
index 000000000000..5b6a910d1acd
--- /dev/null
+++ b/src/components/code-snippet/code-snippet.config.js
@@ -0,0 +1,30 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Code',
+      notes: `
+        Code snippets are small blocks of reusable code that can be inserted in a code file.
+
+        The Code style is for larger, multi-line code snippets.
+      `,
+      context: {
+        variant: 'code',
+      },
+    },
+    {
+      name: 'terminal',
+      label: 'Terminal',
+      notes: `
+        Code snippets are small blocks of reusable code that can be inserted in a code file.
+
+        The Terminal style is for single-line .
+      `,
+      context: {
+        variant: 'terminal',
+      },
+    },
+  ],
+};
diff --git a/src/components/code-snippet/code-snippet.dust b/src/components/code-snippet/code-snippet.dust
new file mode 100644
index 000000000000..6e0ce6945159
--- /dev/null
+++ b/src/components/code-snippet/code-snippet.dust
@@ -0,0 +1,40 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--snippet {@eq key=variant value="code"}bx--snippet--code{:else}bx--snippet--terminal{/eq}">
+    <div class="bx--snippet-container">
+      {@eq key=variant value="code"}
+        <code>
+          <pre>
+@mixin bx--snippet($type) {
+  @if $type == 'terminal' {
+    background-color: red;
+  } @else if $type == 'code' {
+    background-color: blue;
+  } @else if $type == 'text' {
+    background-color: white;
+  }
+
+  @if $type == 'terminal' {
+    background-color: red;
+  } @else if $type == 'code' {
+    background-color: blue;
+  } @else if $type == 'text' {
+    background-color: white;
+  }
+}
+          </pre>
+        </code>
+      {:else}
+        <pre><code>node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!</code></pre>
+      {/eq}
+    </div>
+    <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
+      <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
+        <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
+        <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
+      </svg>
+      <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    </button>
+  </div>
+{/content}
diff --git a/src/components/code-snippet/code-snippet.html b/src/components/code-snippet/code-snippet.html
deleted file mode 100644
index 229335ed9285..000000000000
--- a/src/components/code-snippet/code-snippet.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="bx--snippet bx--snippet--code">
-  <div class="bx--snippet-container">
-    <code>
-      <pre>
-@mixin bx--snippet($type) {
-  @if $type == 'terminal' {
-    background-color: red;
-  } @else if $type == 'code' {
-    background-color: blue;
-  } @else if $type == 'text' {
-    background-color: white;
-  }
-
-  @if $type == 'terminal' {
-    background-color: red;
-  } @else if $type == 'code' {
-    background-color: blue;
-  } @else if $type == 'text' {
-    background-color: white;
-  }
-}
-      </pre>
-    </code>
-  </div>
-  <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
-    <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
-      <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
-      <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
-    </svg>
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-  </button>
-</div>
diff --git a/src/components/combo-box/combo-box--disabled.html b/src/components/combo-box/combo-box--disabled.html
deleted file mode 100644
index 84d49c40f776..000000000000
--- a/src/components/combo-box/combo-box--disabled.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="bx--form-item bx--combo-box bx--list-box bx--list-box--disabled">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true" disabled="">
-    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" disabled="" id="downshift-input-13" placeholder="Filter...">
-    <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
diff --git a/src/components/combo-box/combo-box.config.js b/src/components/combo-box/combo-box.config.js
new file mode 100644
index 000000000000..ed087691cd71
--- /dev/null
+++ b/src/components/combo-box/combo-box.config.js
@@ -0,0 +1,17 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      name: 'disabled',
+      label: 'Disabled',
+      context: {
+        disabled: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/combo-box/combo-box.dust b/src/components/combo-box/combo-box.dust
new file mode 100644
index 000000000000..ca4b8a41ff01
--- /dev/null
+++ b/src/components/combo-box/combo-box.dust
@@ -0,0 +1,32 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item bx--combo-box bx--list-box{?disabled} bx--list-box--disabled{/disabled}">
+    <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true"{?disabled} disabled{/disabled}>
+      <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..."{?disabled} disabled{/disabled}>
+      <div class="bx--list-box__menu-icon">
+        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+          <title>Open menu</title>
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div class="bx--form-item bx--combo-box bx--list-box{?disabled} bx--list-box--disabled{/disabled}">
+    <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"{?disabled} disabled{/disabled}>
+      <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." aria-activedescendant="downshift-1-item-2"{?disabled} disabled{/disabled}>
+      <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
+        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+          <title>Close menu</title>
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="bx--list-box__menu">
+      <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
+      <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-2">Option 3</div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/combo-box/combo-box.html b/src/components/combo-box/combo-box.html
deleted file mode 100644
index e1282ba87706..000000000000
--- a/src/components/combo-box/combo-box.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="bx--form-item bx--combo-box bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
-    <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--combo-box bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." aria-activedescendant="downshift-1-item-2">
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-    <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-    <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-2">Option 3</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-  </div>
-</div>
diff --git a/src/components/content-switcher/content-switcher.dust b/src/components/content-switcher/content-switcher.dust
new file mode 100644
index 000000000000..ae242e3e57e7
--- /dev/null
+++ b/src/components/content-switcher/content-switcher.dust
@@ -0,0 +1,9 @@
+{>_layout/}
+
+{<content}
+  <div data-content-switcher class="bx--content-switcher">
+    <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">First section</button>
+    <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Second section</button>
+    <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Third section</button>
+  </div>
+{/content}
diff --git a/src/components/content-switcher/content-switcher.html b/src/components/content-switcher/content-switcher.html
deleted file mode 100644
index 87472a54d07d..000000000000
--- a/src/components/content-switcher/content-switcher.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div data-content-switcher class="bx--content-switcher">
-  <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">First section</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">Second section</button>
-  <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">Third section</button>
-</div>
diff --git a/src/components/copy-button/copy-button.dust b/src/components/copy-button/copy-button.dust
new file mode 100644
index 000000000000..85ecb950c110
--- /dev/null
+++ b/src/components/copy-button/copy-button.dust
@@ -0,0 +1,11 @@
+{>_layout/}
+
+{<content}
+  <button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
+    Copy button
+    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+    </svg>
+    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+  </button>
+{/content}
diff --git a/src/components/copy-button/copy-button.html b/src/components/copy-button/copy-button.html
deleted file mode 100644
index 923e4a98507f..000000000000
--- a/src/components/copy-button/copy-button.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
-  Copy button
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-  </svg>
-  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-</button>
diff --git a/src/components/data-table-v2/data-table-v2--expandable.dust b/src/components/data-table-v2/data-table-v2--expandable.dust
new file mode 100644
index 000000000000..a2d8304e9b4a
--- /dev/null
+++ b/src/components/data-table-v2/data-table-v2--expandable.dust
@@ -0,0 +1,92 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--data-table-v2-container" data-table-v2>
+    <h4 class="bx--data-table-v2-header">Table title</h4>
+    <div class="bx--table-toolbar">
+      <div class="bx--toolbar-search-container">
+        <div data-search class="bx--search bx--search--sm" role="search">
+          <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+            <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+          </svg>
+          <label id="search-input-label-10" class="bx--label" for="search__input-10">Search</label>
+          <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Search" aria-labelledby="search-input-label-10">
+          <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+            <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <table class="bx--data-table-v2">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Protocol</th>
+          <th>Ports</th>
+          <th>Rule</th>
+          <th>Attached Groups</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="bx--parent-row-v2" data-parent-row>
+          <td class="bx--table-expand-v2" data-event="expand">
+            <button class="bx--table-expand-v2__button">
+              <svg class="bx--table-expand-v2__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+                <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+              </svg>
+            </button>
+          </td>
+          <td>Load Balancer 1</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+        </tr>
+        <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
+          <td colspan="7">
+            <h4>
+              <strong>Harry Potter</strong>
+            </h4>
+            <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
+              Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
+              attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
+              him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
+              as they tried to protect him, shortly before attacking Harry.</p>
+          </td>
+        </tr>
+        <tr class="bx--parent-row-v2" data-parent-row>
+          <td class="bx--table-expand-v2" data-event="expand">
+            <button class="bx--table-expand-v2__button">
+              <svg class="bx--table-expand-v2__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+                <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+              </svg>
+              </butto>
+          </td>
+          <td>Load Balancer 1</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+        </tr>
+        <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
+          <td colspan="7">
+            <h4>
+              <strong>Harry Potter</strong>
+            </h4>
+            <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
+              Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
+              attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
+              him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
+              as they tried to protect him, shortly before attacking Harry.</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+{/content}
diff --git a/src/components/data-table-v2/data-table-v2--pagination.dust b/src/components/data-table-v2/data-table-v2--pagination.dust
new file mode 100644
index 000000000000..8c7fd9a0706b
--- /dev/null
+++ b/src/components/data-table-v2/data-table-v2--pagination.dust
@@ -0,0 +1,415 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--data-table-v2-container" data-table-v2>
+    <h4 class="bx--data-table-v2-header">Table title</h4>
+    <section class="bx--table-toolbar">
+      <div class="bx--batch-actions" aria-label="Table Action Bar">
+        <div class="bx--action-list">
+          <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
+            Ghost
+            <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+            </svg>
+          </button>
+
+          <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
+            Ghost
+            <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+            </svg>
+          </button>
+
+          <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
+            Ghost
+            <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="bx--batch-summary">
+          <p class="bx--batch-summary__para">
+            <span data-items-selected>3</span> items selected</p>
+          <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
+        </div>
+      </div>
+      <div class="bx--toolbar-search-container">
+        <div data-search class="bx--search bx--search--sm" role="search">
+          <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+            <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+          </svg>
+          <label id="search-input-label-10" class="bx--label" for="search__input-10">Filter table</label>
+          <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Filter table" aria-labelledby="search-input-label-10">
+          <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+            <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+          </svg>
+        </div>
+      </div>
+
+      <div class="bx--toolbar-content">
+        <button class="bx--toolbar-action">
+          <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+            <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
+            <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
+          </svg>
+        </button>
+
+        <button class="bx--toolbar-action">
+          <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
+          </svg>
+        </button>
+
+        <button class="bx--toolbar-action">
+          <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+            <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+            />
+          </svg>
+        </button>
+
+        <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
+      </div>
+
+
+    </section>
+    <table class="bx--data-table-v2">
+      <thead>
+        <tr>
+          <th>
+            <input data-event="select-all" id="bx--checkbox-90" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
+            <label for="bx--checkbox-90" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span class="bx--table-header-label">Name</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Protocol</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Something</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Rule</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Attached Groups</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Status</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-91" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
+            <label for="bx--checkbox-91" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Load Balancer 1</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="expandable-row">
+          <td>
+            <input data-event="select" id="bx--checkbox-92" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
+            <label for="bx--checkbox-92" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-93" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
+            <label for="bx--checkbox-93" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-94" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
+            <label for="bx--checkbox-94" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-95" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
+            <label for="bx--checkbox-95" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="bx--pagination" data-pagination>
+    <div class="bx--pagination__left">
+      <span class="bx--pagination__text">Items per page:</span>
+      <div class="bx--select bx--select--inline">
+        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
+        <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
+          <option class="bx--select-option" value="10" selected>10</option>
+          <option class="bx--select-option" value="20">20</option>
+          <option class="bx--select-option" value="30">30</option>
+          <option class="bx--select-option" value="40">40</option>
+          <option class="bx--select-option" value="50">50</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+      <span class="bx--pagination__text">
+        <span>|&nbsp;</span>
+        <span data-displayed-item-range>1-10</span> of
+        <span data-total-items>40</span> items</span>
+    </div>
+    <div class="bx--pagination__right bx--pagination--inline">
+      <span class="bx--pagination__text">
+        <span data-displayed-page-number>1</span> of
+        <span data-total-pages>4</span> pages</span>
+      <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
+        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+        </svg>
+      </button>
+      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
+      <div class="bx--select bx--select--inline">
+        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
+        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
+          <option class="bx--select-option" value="1" selected>1</option>
+          <option class="bx--select-option" value="2">2</option>
+          <option class="bx--select-option" value="3">3</option>
+          <option class="bx--select-option" value="4">4</option>
+          <option class="bx--select-option" value="5">5</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+      <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
+        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/data-table-v2/data-table-v2--pagination.html b/src/components/data-table-v2/data-table-v2--pagination.html
deleted file mode 100644
index e04de64a9eec..000000000000
--- a/src/components/data-table-v2/data-table-v2--pagination.html
+++ /dev/null
@@ -1,411 +0,0 @@
-<div class="bx--data-table-v2-container" data-table-v2>
-  <h4 class="bx--data-table-v2-header">Table title</h4>
-  <section class="bx--table-toolbar">
-    <div class="bx--batch-actions" aria-label="Table Action Bar">
-      <div class="bx--action-list">
-        <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-          Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-          </svg>
-        </button>
-
-        <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-          Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-          </svg>
-        </button>
-
-        <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-          Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-          </svg>
-        </button>
-      </div>
-      <div class="bx--batch-summary">
-        <p class="bx--batch-summary__para">
-          <span data-items-selected>3</span> items selected</p>
-        <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
-      </div>
-    </div>
-    <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-        </svg>
-        <label id="search-input-label-10" class="bx--label" for="search__input-10">Filter table</label>
-        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Filter table" aria-labelledby="search-input-label-10">
-        <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
-      </div>
-    </div>
-
-    <div class="bx--toolbar-content">
-      <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
-          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
-        </svg>
-      </button>
-
-      <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
-        </svg>
-      </button>
-
-      <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-          />
-        </svg>
-      </button>
-
-      <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
-    </div>
-
-
-  </section>
-  <table class="bx--data-table-v2">
-    <thead>
-      <tr>
-        <th>
-          <input data-event="select-all" id="bx--checkbox-90" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
-          <label for="bx--checkbox-90" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span class="bx--table-header-label">Name</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Protocol</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Something</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Rule</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Attached Groups</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Status</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-91" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
-          <label for="bx--checkbox-91" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Load Balancer 1</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="expandable-row">
-        <td>
-          <input data-event="select" id="bx--checkbox-92" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
-          <label for="bx--checkbox-92" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-93" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
-          <label for="bx--checkbox-93" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-94" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
-          <label for="bx--checkbox-94" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-95" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
-          <label for="bx--checkbox-95" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-<div class="bx--pagination" data-pagination>
-  <div class="bx--pagination__left">
-    <span class="bx--pagination__text">Items per page:</span>
-    <div class="bx--select bx--select--inline">
-      <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-      <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
-        <option class="bx--select-option" value="10" selected>10</option>
-        <option class="bx--select-option" value="20">20</option>
-        <option class="bx--select-option" value="30">30</option>
-        <option class="bx--select-option" value="40">40</option>
-        <option class="bx--select-option" value="50">50</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-    <span class="bx--pagination__text">
-      <span>|&nbsp;</span>
-      <span data-displayed-item-range>1-10</span> of
-      <span data-total-items>40</span> items</span>
-  </div>
-  <div class="bx--pagination__right bx--pagination--inline">
-    <span class="bx--pagination__text">
-      <span data-displayed-page-number>1</span> of
-      <span data-total-pages>4</span> pages</span>
-    <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-      </svg>
-    </button>
-    <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-    <div class="bx--select bx--select--inline">
-      <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-      <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
-        <option class="bx--select-option" value="1" selected>1</option>
-        <option class="bx--select-option" value="2">2</option>
-        <option class="bx--select-option" value="3">3</option>
-        <option class="bx--select-option" value="4">4</option>
-        <option class="bx--select-option" value="5">5</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-    <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-    </button>
-  </div>
-</div>
diff --git a/src/components/data-table-v2/data-table-v2--small.dust b/src/components/data-table-v2/data-table-v2--small.dust
new file mode 100644
index 000000000000..6de7f5a7d2f5
--- /dev/null
+++ b/src/components/data-table-v2/data-table-v2--small.dust
@@ -0,0 +1,58 @@
+{>_layout/}
+
+{<content}
+  <table class="bx--data-table-v2 bx--data-table-v2--compact">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Protocol</th>
+        <th>Ports</th>
+        <th>Rule</th>
+        <th>Attached Groups</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Load Balancer 1</td>
+        <td>HTTP</td>
+        <td>80</td>
+        <td>Round Robin</td>
+        <td>Maureen's VM Groups</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>Load Balancer 5</td>
+        <td>HTTP</td>
+        <td>80</td>
+        <td>Round Robin</td>
+        <td>Maureen's VM Groups</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>Load Balancer 5</td>
+        <td>HTTP</td>
+        <td>80</td>
+        <td>Round Robin</td>
+        <td>Maureen's VM Groups</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>Load Balancer 5</td>
+        <td>HTTP</td>
+        <td>80</td>
+        <td>Round Robin</td>
+        <td>Maureen's VM Groups</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>Load Balancer 5</td>
+        <td>HTTP</td>
+        <td>80</td>
+        <td>Round Robin</td>
+        <td>Maureen's VM Groups</td>
+        <td>Active</td>
+      </tr>
+    </tbody>
+  </table>
+{/content}
diff --git a/src/components/data-table-v2/data-table-v2--small.html b/src/components/data-table-v2/data-table-v2--small.html
deleted file mode 100644
index bb49e9af5fa2..000000000000
--- a/src/components/data-table-v2/data-table-v2--small.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<table class="bx--data-table-v2 bx--data-table-v2--compact">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Protocol</th>
-      <th>Ports</th>
-      <th>Rule</th>
-      <th>Attached Groups</th>
-      <th>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Load Balancer 1</td>
-      <td>HTTP</td>
-      <td>80</td>
-      <td>Round Robin</td>
-      <td>Maureen's VM Groups</td>
-      <td>Active</td>
-    </tr>
-    <tr>
-      <td>Load Balancer 5</td>
-      <td>HTTP</td>
-      <td>80</td>
-      <td>Round Robin</td>
-      <td>Maureen's VM Groups</td>
-      <td>Active</td>
-    </tr>
-    <tr>
-      <td>Load Balancer 5</td>
-      <td>HTTP</td>
-      <td>80</td>
-      <td>Round Robin</td>
-      <td>Maureen's VM Groups</td>
-      <td>Active</td>
-    </tr>
-    <tr>
-      <td>Load Balancer 5</td>
-      <td>HTTP</td>
-      <td>80</td>
-      <td>Round Robin</td>
-      <td>Maureen's VM Groups</td>
-      <td>Active</td>
-    </tr>
-    <tr>
-      <td>Load Balancer 5</td>
-      <td>HTTP</td>
-      <td>80</td>
-      <td>Round Robin</td>
-      <td>Maureen's VM Groups</td>
-      <td>Active</td>
-    </tr>
-  </tbody>
-</table>
diff --git a/src/components/data-table-v2/data-table-v2-expandable.html b/src/components/data-table-v2/data-table-v2-expandable.html
deleted file mode 100644
index 828c1cb2f24f..000000000000
--- a/src/components/data-table-v2/data-table-v2-expandable.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<div class="bx--data-table-v2-container" data-table-v2>
-  <h4 class="bx--data-table-v2-header">Table title</h4>
-  <div class="bx--table-toolbar">
-    <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-        </svg>
-        <label id="search-input-label-10" class="bx--label" for="search__input-10">Search</label>
-        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Search" aria-labelledby="search-input-label-10">
-        <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-
-  <table class="bx--data-table-v2">
-    <thead>
-      <tr>
-        <th></th>
-        <th>Name</th>
-        <th>Protocol</th>
-        <th>Ports</th>
-        <th>Rule</th>
-        <th>Attached Groups</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="bx--parent-row-v2" data-parent-row>
-        <td class="bx--table-expand-v2" data-event="expand">
-          <button class="bx--table-expand-v2__button">
-            <svg class="bx--table-expand-v2__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-            </svg>
-          </button>
-        </td>
-        <td>Load Balancer 1</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-      </tr>
-      <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
-        <td colspan="7">
-          <h4>
-            <strong>Harry Potter</strong>
-          </h4>
-          <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-            Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-            attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-            him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-            as they tried to protect him, shortly before attacking Harry.</p>
-        </td>
-      </tr>
-      <tr class="bx--parent-row-v2" data-parent-row>
-        <td class="bx--table-expand-v2" data-event="expand">
-          <button class="bx--table-expand-v2__button">
-            <svg class="bx--table-expand-v2__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-            </svg>
-            </butto>
-        </td>
-        <td>Load Balancer 1</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-      </tr>
-      <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
-        <td colspan="7">
-          <h4>
-            <strong>Harry Potter</strong>
-          </h4>
-          <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-            Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-            attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-            him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-            as they tried to protect him, shortly before attacking Harry.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/src/components/data-table-v2/data-table-v2.dust b/src/components/data-table-v2/data-table-v2.dust
new file mode 100644
index 000000000000..687d8b61b497
--- /dev/null
+++ b/src/components/data-table-v2/data-table-v2.dust
@@ -0,0 +1,328 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--data-table-v2-container" data-table-v2>
+    <h4 class="bx--data-table-v2-header">Table title</h4>
+    <section class="bx--table-toolbar">
+      <div class="bx--batch-actions" aria-label="Table Action Bar">
+        <div class="bx--action-list">
+          <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
+            Ghost
+            <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+            </svg>
+          </button>
+
+          <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
+            Ghost
+            <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+            </svg>
+          </button>
+
+          <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
+            Ghost
+            <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+              <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="bx--batch-summary">
+          <p class="bx--batch-summary__para">
+            <span data-items-selected>3</span> items selected</p>
+          <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
+        </div>
+      </div>
+
+      <div class="bx--toolbar-search-container">
+        <div data-search class="bx--search bx--search--sm" role="search">
+          <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+            <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+          </svg>
+          <label id="search-input-label-10" class="bx--label" for="search__input-10">Filter table</label>
+          <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Filter table" aria-labelledby="search-input-label-10">
+          <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+            <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+          </svg>
+        </div>
+      </div>
+
+      <div class="bx--toolbar-content">
+        <button class="bx--toolbar-action">
+          <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+            <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
+            <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
+          </svg>
+        </button>
+
+        <button class="bx--toolbar-action">
+          <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
+          </svg>
+        </button>
+
+        <button class="bx--toolbar-action">
+          <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+            <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+            />
+          </svg>
+        </button>
+
+        <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
+      </div>
+    </section>
+
+    <table class="bx--data-table-v2 bx--data-table-v2--zebra">
+      <thead>
+        <tr>
+          <th>
+            <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
+            <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span class="bx--table-header-label">Name</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Protocol</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Something</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Rule</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Attached Groups</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th>
+            <button class="bx--table-sort-v2" data-event="sort">
+              <span>Status</span>
+              <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
+                <path d='M10 0L5 5 0 0z'></path>
+              </svg>
+            </button>
+          </th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
+            <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
+          </td>
+          <td>Load Balancer 1</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="expandable-row">
+          <td>
+            <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
+            <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
+            <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
+            <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
+            <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
+          </td>
+          <td>Load Balancer 5</td>
+          <td>HTTP</td>
+          <td>80</td>
+          <td>Round Robin</td>
+          <td>Maureen's VM Groups</td>
+          <td>Active</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+{/content}
diff --git a/src/components/data-table-v2/data-table-v2.html b/src/components/data-table-v2/data-table-v2.html
deleted file mode 100644
index a72aa6eecc94..000000000000
--- a/src/components/data-table-v2/data-table-v2.html
+++ /dev/null
@@ -1,324 +0,0 @@
-<div class="bx--data-table-v2-container" data-table-v2>
-  <h4 class="bx--data-table-v2-header">Table title</h4>
-  <section class="bx--table-toolbar">
-    <div class="bx--batch-actions" aria-label="Table Action Bar">
-      <div class="bx--action-list">
-        <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-          Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-          </svg>
-        </button>
-
-        <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-          Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-          </svg>
-        </button>
-
-        <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
-          Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
-          </svg>
-        </button>
-      </div>
-      <div class="bx--batch-summary">
-        <p class="bx--batch-summary__para">
-          <span data-items-selected>3</span> items selected</p>
-        <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
-      </div>
-    </div>
-
-    <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-        </svg>
-        <label id="search-input-label-10" class="bx--label" for="search__input-10">Filter table</label>
-        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Filter table" aria-labelledby="search-input-label-10">
-        <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
-      </div>
-    </div>
-
-    <div class="bx--toolbar-content">
-      <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
-          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
-        </svg>
-      </button>
-
-      <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
-        </svg>
-      </button>
-
-      <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-          />
-        </svg>
-      </button>
-
-      <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
-    </div>
-  </section>
-
-  <table class="bx--data-table-v2 bx--data-table-v2--zebra">
-    <thead>
-      <tr>
-        <th>
-          <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
-          <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span class="bx--table-header-label">Name</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Protocol</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Something</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Rule</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Attached Groups</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th>
-          <button class="bx--table-sort-v2" data-event="sort">
-            <span>Status</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
-            </svg>
-          </button>
-        </th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
-          <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
-        </td>
-        <td>Load Balancer 1</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="expandable-row">
-        <td>
-          <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
-          <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
-          <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
-          <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
-          <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
-        </td>
-        <td>Load Balancer 5</td>
-        <td>HTTP</td>
-        <td>80</td>
-        <td>Round Robin</td>
-        <td>Maureen's VM Groups</td>
-        <td>Active</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/src/components/data-table/data-table--simple.dust b/src/components/data-table/data-table--simple.dust
new file mode 100644
index 000000000000..dca099a2c8cd
--- /dev/null
+++ b/src/components/data-table/data-table--simple.dust
@@ -0,0 +1,72 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--responsive-table-container" data-responsive-table>
+    <table class="bx--responsive-table bx--responsive-table--static-size" data-table>
+      <thead class="bx--table-head">
+        <tr class="bx--table-row">
+          <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
+            <span>First Name</span>
+            <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </th>
+          <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
+            <span>Last Name</span>
+            <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </th>
+          <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
+            <span>House</span>
+            <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bx--table-body">
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Harry</td>
+          <td>Potter</td>
+          <td>Gryffindor</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Hermoine</td>
+          <td>Granger</td>
+          <td>Gryffindor</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Ron</td>
+          <td>Weasley</td>
+          <td>Gryffindor</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Draco</td>
+          <td>Malfoy</td>
+          <td>Slytherin</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Blaise</td>
+          <td>Zabini</td>
+          <td>Slytherin</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Cedric</td>
+          <td>Diggory</td>
+          <td>Hufflepuff</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Luna</td>
+          <td>Lovegood</td>
+          <td>Ravenclaw</td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td>Cho</td>
+          <td>Chang</td>
+          <td>Ravenclaw</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+{/content}
diff --git a/src/components/data-table/data-table--simple.html b/src/components/data-table/data-table--simple.html
deleted file mode 100644
index b119519df25a..000000000000
--- a/src/components/data-table/data-table--simple.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<div class="bx--responsive-table-container" data-responsive-table>
-  <table class="bx--responsive-table bx--responsive-table--static-size" data-table>
-    <thead class="bx--table-head">
-      <tr class="bx--table-row">
-        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
-          <span>First Name</span>
-          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </th>
-        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
-          <span>Last Name</span>
-          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </th>
-        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
-          <span>House</span>
-          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bx--table-body">
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Harry</td>
-        <td>Potter</td>
-        <td>Gryffindor</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Hermoine</td>
-        <td>Granger</td>
-        <td>Gryffindor</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Ron</td>
-        <td>Weasley</td>
-        <td>Gryffindor</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Draco</td>
-        <td>Malfoy</td>
-        <td>Slytherin</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Blaise</td>
-        <td>Zabini</td>
-        <td>Slytherin</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Cedric</td>
-        <td>Diggory</td>
-        <td>Hufflepuff</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Luna</td>
-        <td>Lovegood</td>
-        <td>Ravenclaw</td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td>Cho</td>
-        <td>Chang</td>
-        <td>Ravenclaw</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/src/components/data-table/data-table.dust b/src/components/data-table/data-table.dust
new file mode 100644
index 000000000000..df8cf7587aa3
--- /dev/null
+++ b/src/components/data-table/data-table.dust
@@ -0,0 +1,483 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--responsive-table-container" data-responsive-table>
+    <table class="bx--responsive-table" data-table>
+      <thead class="bx--table-head">
+        <tr class="bx--table-row">
+          <th class="bx--table-header"></th>
+          <th class="bx--table-header bx--table-select">
+            <input data-event="select-all" id="bx--checkbox-1" class="bx--checkbox" type="checkbox" value="green" name="checkbox-1">
+            <label for="bx--checkbox-1" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </th>
+          <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
+            <span>First Name</span>
+            <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </th>
+          <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
+            <span>Last Name</span>
+            <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </th>
+          <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
+            <span>House</span>
+            <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </th>
+          <th class="bx--table-header"></th>
+        </tr>
+      </thead>
+      <tbody class="bx--table-body">
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-2">
+            <label for="bx--checkbox-2" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Harry</td>
+          <td>Potter</td>
+          <td>Gryffindor</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options" tabindex="-1">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <h4><strong>Harry Potter</strong></h4>
+            <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
+              Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
+              attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
+              him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
+              as they tried to protect him, shortly before attacking Harry.</p>
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-3" class="bx--checkbox" type="checkbox" value="green" name="checkbox-3">
+            <label for="bx--checkbox-3" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Hermoine</td>
+          <td>Granger</td>
+          <td>Gryffindor</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <table class="bx--responsive-table bx--responsive-table--static-size">
+              <thead>
+                <tr class="bx--table-row">
+                  <th class="bx--table-header">First Name</th>
+                  <th class="bx--table-header">Last Name</th>
+                  <th class="bx--table-header">House</th>
+                  <th class="bx--table-header">Hello</th>
+                  <th class="bx--table-header">Column</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Godric</td>
+                  <td>Gryffindor</td>
+                  <td>Origin</td>
+                  <td>Something</td>
+                  <td>Hooray</td>
+                </tr>
+                <tr>
+                  <td>Salazar</td>
+                  <td>Slytherin</td>
+                  <td>Origin</td>
+                  <td>Something</td>
+                  <td>Hooray</td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-4" class="bx--checkbox" type="checkbox" value="green" name="checkbox-4">
+            <label for="bx--checkbox-4" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Ron</td>
+          <td>Weasley</td>
+          <td>Gryffindor</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <img src="https://upload.wikimedia.org/wikipedia/en/5/5e/Ron_Weasley_poster.jpg" />
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-5" class="bx--checkbox" type="checkbox" value="green" name="checkbox-5">
+            <label for="bx--checkbox-5" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Draco</td>
+          <td>Malfoy</td>
+          <td>Slytherin</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <p>Draco Malfoy is in Gryffindor House. He is in his fifth year.</p>
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-6" class="bx--checkbox" type="checkbox" value="green" name="checkbox-6">
+            <label for="bx--checkbox-6" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Blaise</td>
+          <td>Zabini</td>
+          <td>Slytherin</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <p>Blaise Zabini is in Gryffindor House. He is in his fifth year.</p>
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-7" class="bx--checkbox" type="checkbox" value="green" name="checkbox-7">
+            <label for="bx--checkbox-7" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Cedric</td>
+          <td>Diggory</td>
+          <td>Hufflepuff</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <p>Cedric Diggory is in Hufflepuff House. He is in his fifth year.</p>
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-8" class="bx--checkbox" type="checkbox" value="green" name="checkbox-8">
+            <label for="bx--checkbox-8" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Luna</td>
+          <td>Lovegood</td>
+          <td>Ravenclaw</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <p>Luna Lovegood is in Ravenclaw House. She is in her fifth year.</p>
+          </td>
+        </tr>
+        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
+          <td tabindex="0" class="bx--table-expand" data-event="expand">
+            <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            </svg>
+          </td>
+          <td class="bx--table-select">
+            <input id="bx--checkbox-9" class="bx--checkbox" type="checkbox" value="green" name="checkbox-9">
+            <label for="bx--checkbox-9" class="bx--checkbox-label" aria-label="Label name">
+              <span class="bx--checkbox-appearance">
+                <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                  <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+                </svg>
+              </span>
+            </label>
+          </td>
+          <td>Cho</td>
+          <td>Chang</td>
+          <td>Ravenclaw</td>
+          <td class="bx--table-overflow">
+            <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+              <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+                <circle cx="2" cy="2" r="2"></circle>
+                <circle cx="2" cy="10" r="2"></circle>
+                <circle cx="2" cy="18" r="2"></circle>
+              </svg>
+              <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Restart app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Rename app</button>
+                </li>
+                <li class="bx--overflow-menu-options__option">
+                  <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
+                </li>
+                <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+                  <button class="bx--overflow-menu-options__btn">Delete app</button>
+                </li>
+              </ul>
+            </div>
+          </td>
+        </tr>
+        <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
+          <td colspan="6">
+            <p>Cho Chang is in Gryffindor House. She is in her fifth year.</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+{/content}
diff --git a/src/components/data-table/data-table.html b/src/components/data-table/data-table.html
deleted file mode 100644
index 1809338c1ac9..000000000000
--- a/src/components/data-table/data-table.html
+++ /dev/null
@@ -1,479 +0,0 @@
-<div class="bx--responsive-table-container" data-responsive-table>
-  <table class="bx--responsive-table" data-table>
-    <thead class="bx--table-head">
-      <tr class="bx--table-row">
-        <th class="bx--table-header"></th>
-        <th class="bx--table-header bx--table-select">
-          <input data-event="select-all" id="bx--checkbox-1" class="bx--checkbox" type="checkbox" value="green" name="checkbox-1">
-          <label for="bx--checkbox-1" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </th>
-        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
-          <span>First Name</span>
-          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </th>
-        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
-          <span>Last Name</span>
-          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </th>
-        <th tabindex="0" class="bx--table-header bx--table-sort" data-event="sort">
-          <span>House</span>
-          <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </th>
-        <th class="bx--table-header"></th>
-      </tr>
-    </thead>
-    <tbody class="bx--table-body">
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-2">
-          <label for="bx--checkbox-2" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Harry</td>
-        <td>Potter</td>
-        <td>Gryffindor</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options" tabindex="-1">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <h4><strong>Harry Potter</strong></h4>
-          <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
-            Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
-            attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
-            him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
-            as they tried to protect him, shortly before attacking Harry.</p>
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-3" class="bx--checkbox" type="checkbox" value="green" name="checkbox-3">
-          <label for="bx--checkbox-3" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Hermoine</td>
-        <td>Granger</td>
-        <td>Gryffindor</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <table class="bx--responsive-table bx--responsive-table--static-size">
-            <thead>
-              <tr class="bx--table-row">
-                <th class="bx--table-header">First Name</th>
-                <th class="bx--table-header">Last Name</th>
-                <th class="bx--table-header">House</th>
-                <th class="bx--table-header">Hello</th>
-                <th class="bx--table-header">Column</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Godric</td>
-                <td>Gryffindor</td>
-                <td>Origin</td>
-                <td>Something</td>
-                <td>Hooray</td>
-              </tr>
-              <tr>
-                <td>Salazar</td>
-                <td>Slytherin</td>
-                <td>Origin</td>
-                <td>Something</td>
-                <td>Hooray</td>
-              </tr>
-            </tbody>
-          </table>
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-4" class="bx--checkbox" type="checkbox" value="green" name="checkbox-4">
-          <label for="bx--checkbox-4" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Ron</td>
-        <td>Weasley</td>
-        <td>Gryffindor</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <img src="https://upload.wikimedia.org/wikipedia/en/5/5e/Ron_Weasley_poster.jpg" />
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-5" class="bx--checkbox" type="checkbox" value="green" name="checkbox-5">
-          <label for="bx--checkbox-5" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Draco</td>
-        <td>Malfoy</td>
-        <td>Slytherin</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <p>Draco Malfoy is in Gryffindor House. He is in his fifth year.</p>
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-6" class="bx--checkbox" type="checkbox" value="green" name="checkbox-6">
-          <label for="bx--checkbox-6" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Blaise</td>
-        <td>Zabini</td>
-        <td>Slytherin</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <p>Blaise Zabini is in Gryffindor House. He is in his fifth year.</p>
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-7" class="bx--checkbox" type="checkbox" value="green" name="checkbox-7">
-          <label for="bx--checkbox-7" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Cedric</td>
-        <td>Diggory</td>
-        <td>Hufflepuff</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <p>Cedric Diggory is in Hufflepuff House. He is in his fifth year.</p>
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-8" class="bx--checkbox" type="checkbox" value="green" name="checkbox-8">
-          <label for="bx--checkbox-8" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Luna</td>
-        <td>Lovegood</td>
-        <td>Ravenclaw</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <p>Luna Lovegood is in Ravenclaw House. She is in her fifth year.</p>
-        </td>
-      </tr>
-      <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
-        <td tabindex="0" class="bx--table-expand" data-event="expand">
-          <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-            <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-          </svg>
-        </td>
-        <td class="bx--table-select">
-          <input id="bx--checkbox-9" class="bx--checkbox" type="checkbox" value="green" name="checkbox-9">
-          <label for="bx--checkbox-9" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
-          </label>
-        </td>
-        <td>Cho</td>
-        <td>Chang</td>
-        <td>Ravenclaw</td>
-        <td class="bx--table-overflow">
-          <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
-            </svg>
-            <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Restart app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Rename app</button>
-              </li>
-              <li class="bx--overflow-menu-options__option">
-                <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
-              </li>
-              <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-                <button class="bx--overflow-menu-options__btn">Delete app</button>
-              </li>
-            </ul>
-          </div>
-        </td>
-      </tr>
-      <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
-        <td colspan="6">
-          <p>Cho Chang is in Gryffindor House. She is in her fifth year.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
\ No newline at end of file
diff --git a/src/components/date-picker/date-picker--range.dust b/src/components/date-picker/date-picker--range.dust
new file mode 100644
index 000000000000..7ac8da2d94ad
--- /dev/null
+++ b/src/components/date-picker/date-picker--range.dust
@@ -0,0 +1,30 @@
+{>_layout/}
+
+{<content}
+  <!-- Ranged -->
+  <div class="bx--form-item">
+    <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range">
+      <div class="bx--date-picker-container">
+        <label for="date-picker-1" class="bx--label">Start date label</label>
+        <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+          data-date-picker-input-from />
+        <div class="bx--form-requirement">
+          Invalid date format.
+        </div>
+      </div>
+      <div class="bx--date-picker-container">
+        <label for="date-picker-2" class="bx--label">End date label</label>
+        <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+          data-date-picker-input-to />
+        <div class="bx--form-requirement">
+          Invalid date format.
+        </div>
+      </div>
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      </svg>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/date-picker/date-picker--range.html b/src/components/date-picker/date-picker--range.html
deleted file mode 100644
index 184323fdd0d9..000000000000
--- a/src/components/date-picker/date-picker--range.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!-- Ranged -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-1" class="bx--label">Start date label</label>
-      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
-        data-date-picker-input-from />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-    <div class="bx--date-picker-container">
-      <label for="date-picker-2" class="bx--label">End date label</label>
-      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
-        data-date-picker-input-to />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
-    </svg>
-  </div>
-</div>
diff --git a/src/components/date-picker/date-picker--single.dust b/src/components/date-picker/date-picker--single.dust
new file mode 100644
index 000000000000..651a90066399
--- /dev/null
+++ b/src/components/date-picker/date-picker--single.dust
@@ -0,0 +1,22 @@
+{>_layout/}
+
+{<content}
+  <!-- Basic with calendar -->
+  <div class="bx--form-item">
+    <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single">
+      <div class="bx--date-picker-container">
+        <label for="date-picker-3" class="bx--label">Date Picker label</label>
+        <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+          <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+          <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+          <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+        </svg>
+        <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+          data-date-picker-input />
+        <div class="bx--form-requirement">
+          Invalid date format.
+        </div>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/date-picker/date-picker--single.html b/src/components/date-picker/date-picker--single.html
deleted file mode 100644
index d9e4742fcf4a..000000000000
--- a/src/components/date-picker/date-picker--single.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- Basic with calendar -->
-<div class="bx--form-item">
-  <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
-      </svg>
-      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
-        data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/date-picker/date-picker.dust b/src/components/date-picker/date-picker.dust
new file mode 100644
index 000000000000..63dbeb7a20b1
--- /dev/null
+++ b/src/components/date-picker/date-picker.dust
@@ -0,0 +1,31 @@
+{>_layout/}
+
+{<content}
+  <!-- Basic without calendar (mm/yy only) -->
+  <div class="bx--form-item">
+    <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short">
+      <div class="bx--date-picker-container">
+        <label for="date-picker-4" class="bx--label">Date Picker label</label>
+        <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
+        />
+        <div class="bx--form-requirement">
+          Invalid date format.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Basic without calendar -->
+  <div class="bx--form-item">
+    <div class="bx--date-picker bx--date-picker--simple">
+      <div class="bx--date-picker-container">
+        <label for="date-picker-5" class="bx--label">Date Picker label</label>
+        <input data-invalid type="text" id="date-picker-5" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+          data-date-picker-input />
+        <div class="bx--form-requirement">
+          Invalid date format.
+        </div>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/date-picker/date-picker.html b/src/components/date-picker/date-picker.html
deleted file mode 100644
index ff2eb703fa44..000000000000
--- a/src/components/date-picker/date-picker.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Basic without calendar (mm/yy only) -->
-<div class="bx--form-item">
-  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-4" class="bx--label">Date Picker label</label>
-      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
-      />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Basic without calendar -->
-<div class="bx--form-item">
-  <div class="bx--date-picker bx--date-picker--simple">
-    <div class="bx--date-picker-container">
-      <label for="date-picker-5" class="bx--label">Date Picker label</label>
-      <input data-invalid type="text" id="date-picker-5" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
-        data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/detail-page-header/detail-page-header--with-tabs.html b/src/components/detail-page-header/detail-page-header--with-tabs.html
deleted file mode 100644
index 49ea00130a6f..000000000000
--- a/src/components/detail-page-header/detail-page-header--with-tabs.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<div class="test-header"></div>
-<header data-detail-page-header class="bx--detail-page-header bx--detail-page-header--with-tabs">
-  <div class="bx--detail-page-header-content">
-    <div class="bx--breadcrumb">
-      <div class="bx--breadcrumb-item">
-        <a href="#" class="bx--link">Breadcrumb 1</a>
-      </div>
-      <div class="bx--breadcrumb-item">
-        <a href="#" class="bx--link">Breadcrumb 2</a>
-      </div>
-      <div class="bx--breadcrumb-item">
-        <a href="#" class="bx--link">Breadcrumb 3</a>
-      </div>
-    </div>
-    <div class="bx--detail-page-header-title-container">
-      <div class="bx--detail-page-header-icon-container">
-        <svg width="24" height="24" viewBox="0 0 24 24">
-          <path fill="#D8D8D8" d="M0 0h24v24H0z" fill-rule="evenodd" />
-        </svg>
-      </div>
-      <h1 class="bx--detail-page-header-title">Title</h1>
-      <div class="bx--detail-page-header-status-container">
-        <div class="bx--detail-page-header-status-icon"></div>
-        <span class="bx--detail-page-header-status-text">Running</span>
-      </div>
-    </div>
-    <nav data-tabs class="bx--tabs" role="navigation">
-      <div class="bx--tabs-trigger">
-        <a href="javascript:void(0)" class="bx--tabs-trigger-text"></a>
-        <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
-        </svg>
-      </div>
-      <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
-        <li class="bx--tabs__nav-item bx--tabs__nav-item--selected" data-target=".tab-1" role="presentation">
-          <a id="tab-link-1-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="true">Tab Label 1</a>
-        </li>
-        <li class="bx--tabs__nav-item" data-target=".tab-2" role="presentation">
-          <a id="tab-link-2-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 2</a>
-        </li>
-        <li class="bx--tabs__nav-item" data-target=".tab-3" role="presentation">
-          <a id="tab-link-3-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 3</a>
-        </li>
-        <li class="bx--tabs__nav-item" data-target=".tab-4" role="presentation">
-          <a id="tab-link-4-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 4</a>
-        </li>
-        <li class="bx--tabs__nav-item" data-target=".tab-5" role="presentation">
-          <a id="tab-link-5-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 5</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <div class="bx--detail-page-header-menu">
-    <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-        <circle cx="2" cy="2" r="2"></circle>
-        <circle cx="2" cy="10" r="2"></circle>
-        <circle cx="2" cy="18" r="2"></circle>
-      </svg>
-      <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Stop app</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Restart app</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Rename app</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Edit routes</button>
-        </li>
-        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-          <button class="bx--overflow-menu-options__btn">Delete app</button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</header>
diff --git a/src/components/detail-page-header/detail-page-header.config.js b/src/components/detail-page-header/detail-page-header.config.js
new file mode 100644
index 000000000000..67daad071ca0
--- /dev/null
+++ b/src/components/detail-page-header/detail-page-header.config.js
@@ -0,0 +1,17 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      name: 'with-tabs',
+      label: 'With tabs',
+      context: {
+        hasTabs: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/detail-page-header/detail-page-header.dust b/src/components/detail-page-header/detail-page-header.dust
new file mode 100644
index 000000000000..ae38447bcc75
--- /dev/null
+++ b/src/components/detail-page-header/detail-page-header.dust
@@ -0,0 +1,88 @@
+{>_layout/}
+
+{<content}
+  <div class="test-header"></div>
+  {^hasTabs}
+  <div class="test-nav"></div>
+  {/hasTabs}
+  <header data-detail-page-header class="bx--detail-page-header {^hasTabs}bx--detail-page-header--no-tabs{:else}bx--detail-page-header--with-tabs{/hasTabs}">
+    <div class="bx--detail-page-header-content">
+      <div class="bx--breadcrumb">
+        <div class="bx--breadcrumb-item">
+          <a href="#" class="bx--link">Breadcrumb 1</a>
+        </div>
+        <div class="bx--breadcrumb-item">
+          <a href="#" class="bx--link">Breadcrumb 2</a>
+        </div>
+        <div class="bx--breadcrumb-item">
+          <a href="#" class="bx--link">Breadcrumb 3</a>
+        </div>
+      </div>
+      <div class="bx--detail-page-header-title-container">
+        <div class="bx--detail-page-header-icon-container">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path fill="#D8D8D8" d="M0 0h24v24H0z" fill-rule="evenodd" />
+          </svg>
+        </div>
+        <h1 class="bx--detail-page-header-title">Title</h1>
+        <div class="bx--detail-page-header-status-container">
+          <div class="bx--detail-page-header-status-icon"></div>
+          <span class="bx--detail-page-header-status-text">Running</span>
+        </div>
+      </div>
+      {?hasTabs}
+      <nav data-tabs class="bx--tabs" role="navigation">
+        <div class="bx--tabs-trigger">
+          <a href="javascript:void(0)" class="bx--tabs-trigger-text"></a>
+          <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+            <path d="M10 0L5 5 0 0z"></path>
+          </svg>
+        </div>
+        <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
+          <li class="bx--tabs__nav-item bx--tabs__nav-item--selected" data-target=".tab-1" role="presentation">
+            <a id="tab-link-1-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="true">Tab Label 1</a>
+          </li>
+          <li class="bx--tabs__nav-item" data-target=".tab-2" role="presentation">
+            <a id="tab-link-2-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 2</a>
+          </li>
+          <li class="bx--tabs__nav-item" data-target=".tab-3" role="presentation">
+            <a id="tab-link-3-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 3</a>
+          </li>
+          <li class="bx--tabs__nav-item" data-target=".tab-4" role="presentation">
+            <a id="tab-link-4-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 4</a>
+          </li>
+          <li class="bx--tabs__nav-item" data-target=".tab-5" role="presentation">
+            <a id="tab-link-5-with-tabs" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-selected="false">Tab Label 5</a>
+          </li>
+        </ul>
+      </nav>
+      {/hasTabs}
+    </div>
+    <div class="bx--detail-page-header-menu">
+      <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+        <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+          <circle cx="2" cy="2" r="2"></circle>
+          <circle cx="2" cy="10" r="2"></circle>
+          <circle cx="2" cy="18" r="2"></circle>
+        </svg>
+        <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
+          <li class="bx--overflow-menu-options__option">
+            <button class="bx--overflow-menu-options__btn">Stop app</button>
+          </li>
+          <li class="bx--overflow-menu-options__option">
+            <button class="bx--overflow-menu-options__btn">Restart app</button>
+          </li>
+          <li class="bx--overflow-menu-options__option">
+            <button class="bx--overflow-menu-options__btn">Rename app</button>
+          </li>
+          <li class="bx--overflow-menu-options__option">
+            <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
+          </li>
+          <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+            <button class="bx--overflow-menu-options__btn">Delete app</button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </header>
+{/content}
diff --git a/src/components/detail-page-header/detail-page-header.html b/src/components/detail-page-header/detail-page-header.html
deleted file mode 100644
index fbb78835dca5..000000000000
--- a/src/components/detail-page-header/detail-page-header.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<div class="test-header"></div>
-<div class="test-nav"></div>
-<header data-detail-page-header class="bx--detail-page-header bx--detail-page-header--no-tabs">
-  <div class="bx--detail-page-header-content">
-    <div class="bx--breadcrumb">
-      <div class="bx--breadcrumb-item">
-        <a href="#" class="bx--link">Breadcrumb 1</a>
-      </div>
-      <div class="bx--breadcrumb-item">
-        <a href="#" class="bx--link">Breadcrumb 2</a>
-      </div>
-      <div class="bx--breadcrumb-item">
-        <a href="#" class="bx--link">Breadcrumb 3</a>
-      </div>
-    </div>
-    <div class="bx--detail-page-header-title-container">
-      <div class="bx--detail-page-header-icon-container">
-        <svg width="24" height="24" viewBox="0 0 24 24">
-          <path fill="#D8D8D8" d="M0 0h24v24H0z" fill-rule="evenodd" />
-        </svg>
-      </div>
-      <h1 class="bx--detail-page-header-title">Title</h1>
-      <div class="bx--detail-page-header-status-container">
-        <div class="bx--detail-page-header-status-icon"></div>
-        <span class="bx--detail-page-header-status-text">Running</span>
-      </div>
-    </div>
-  </div>
-  <div class="bx--detail-page-header-menu">
-    <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-        <circle cx="2" cy="2" r="2"></circle>
-        <circle cx="2" cy="10" r="2"></circle>
-        <circle cx="2" cy="18" r="2"></circle>
-      </svg>
-      <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Stop app</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Restart app</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Rename app</button>
-        </li>
-        <li class="bx--overflow-menu-options__option">
-          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
-        </li>
-        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-          <button class="bx--overflow-menu-options__btn">Delete app</button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</header>
diff --git a/src/components/dropdown/dropdown.dust b/src/components/dropdown/dropdown.dust
new file mode 100644
index 000000000000..fb9d35579f96
--- /dev/null
+++ b/src/components/dropdown/dropdown.dust
@@ -0,0 +1,29 @@
+{>_layout/}
+
+{<content}
+  <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+    <li class="bx--dropdown-text">Dropdown label</li>
+    <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+    <li>
+      <ul class="bx--dropdown-list">
+        <li data-option data-value="all" class="bx--dropdown-item">
+          <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
+        </li>
+        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
+          <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
+        </li>
+        <li data-option data-value="staging" class="bx--dropdown-item">
+          <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
+        </li>
+        <li data-option data-value="dea" class="bx--dropdown-item">
+          <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
+        </li>
+        <li data-option data-value="router" class="bx--dropdown-item">
+          <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+{/content}
diff --git a/src/components/dropdown/dropdown.html b/src/components/dropdown/dropdown.html
deleted file mode 100644
index e0dff10a7536..000000000000
--- a/src/components/dropdown/dropdown.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-  <li class="bx--dropdown-text">Dropdown label</li>
-  <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-    <path d="M10 0L5 5 0 0z"></path>
-  </svg>
-  <li>
-    <ul class="bx--dropdown-list">
-      <li data-option data-value="all" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
-      </li>
-      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
-      </li>
-      <li data-option data-value="staging" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
-      </li>
-      <li data-option data-value="dea" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
-      </li>
-      <li data-option data-value="router" class="bx--dropdown-item">
-        <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
-      </li>
-    </ul>
-  </li>
-</ul>
diff --git a/src/components/fab/fab.dust b/src/components/fab/fab.dust
new file mode 100644
index 000000000000..d5a05000a85b
--- /dev/null
+++ b/src/components/fab/fab.dust
@@ -0,0 +1,11 @@
+{>_layout/}
+
+{<content}
+  <a href="#" data-fab data-state="open" class="bx--fab" role="button" alt="Show Content">
+    <svg class="bx--fab__svg" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+      <polygon class="bx--fab__hexagon" fill-rule="evenodd" points="36 0 67.1769145 18 67.1769145 54 36 72 4.82308546 54 4.82308546 18 "></polygon>
+      <path class="bx--fab__plus-icon" stroke-width="1" d="M35.08,34.992 L26.98,34.992 L26.98,36.9 L35.08,36.9 L35.08,45 L36.988,45 L36.988,36.9 L45.088,36.9 L45.088,34.992 L36.988,34.992 L36.988,26.892 L35.08,26.892 L35.08,34.992 Z"></path>
+    </svg>
+    <span class="bx--fab__hidden">show content</span>
+  </a>
+{/content}
diff --git a/src/components/fab/fab.html b/src/components/fab/fab.html
deleted file mode 100644
index 16da1fd518bc..000000000000
--- a/src/components/fab/fab.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<a href="#" data-fab data-state="open" class="bx--fab" role="button" alt="Show Content">
-  <svg class="bx--fab__svg" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <polygon class="bx--fab__hexagon" fill-rule="evenodd" points="36 0 67.1769145 18 67.1769145 54 36 72 4.82308546 54 4.82308546 18 "></polygon>
-    <path class="bx--fab__plus-icon" stroke-width="1" d="M35.08,34.992 L26.98,34.992 L26.98,36.9 L35.08,36.9 L35.08,45 L36.988,45 L36.988,36.9 L45.088,36.9 L45.088,34.992 L36.988,34.992 L36.988,26.892 L35.08,26.892 L35.08,34.992 Z"></path>
-  </svg>
-  <span class="bx--fab__hidden">show content</span>
-</a>
diff --git a/src/components/file-uploader/file-uploader.dust b/src/components/file-uploader/file-uploader.dust
new file mode 100644
index 000000000000..cc6749f43195
--- /dev/null
+++ b/src/components/file-uploader/file-uploader.dust
@@ -0,0 +1,24 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <strong class="bx--label">Account photo</strong>
+    <p class="bx--label-description">only .jpg and .png files. 500kb max file size.</p>
+    <div class="bx--file" data-file>
+      <label
+        for="your-file-importer-id-here"
+        class="bx--file-btn bx--btn bx--btn--secondary"
+        role="button"
+        tabindex="0">Add files</label>
+      <input
+        type="file"
+        class="bx--file-input"
+        id="your-file-importer-id-here"
+        data-file-uploader
+        data-target="[data-file-container]"
+        multiple
+      />
+      <div data-file-container class="bx--file-container"></div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/file-uploader/file-uploader.html b/src/components/file-uploader/file-uploader.html
deleted file mode 100644
index d6ccfd3c7f1c..000000000000
--- a/src/components/file-uploader/file-uploader.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="bx--form-item">
-  <strong class="bx--label">Account photo</strong>
-  <p class="bx--label-description">only .jpg and .png files. 500kb max file size.</p>
-  <div class="bx--file" data-file>
-    <label
-      for="your-file-importer-id-here"
-      class="bx--file-btn bx--btn bx--btn--secondary"
-      role="button"
-      tabindex="0">Add files</label>
-    <input
-      type="file"
-      class="bx--file-input"
-      id="your-file-importer-id-here"
-      data-file-uploader
-      data-target="[data-file-container]"
-      multiple
-    />
-    <div data-file-container class="bx--file-container"></div>
-  </div>
-</div>
diff --git a/src/components/footer/footer.dust b/src/components/footer/footer.dust
new file mode 100644
index 000000000000..583068471fbd
--- /dev/null
+++ b/src/components/footer/footer.dust
@@ -0,0 +1,19 @@
+{>_layout/}
+
+{<content}
+  <footer class="bx--footer bx--footer--bottom-fixed" role="contentinfo">
+    <div class="bx--footer-info">
+      <div class="bx--footer-info__item">
+        <p class="bx--footer-label">Need Help?</p>
+        <a class="bx--link" href="#">Contact Bluemix Sales</a>
+      </div>
+      <div class="bx--footer-info__item">
+        <p class="bx--footer-label">Estimate Monthly Cost</p>
+        <a class="bx--link" href="#">Cost Calculator</a>
+      </div>
+    </div>
+    <div class="bx--footer-cta">
+      <button class="bx--btn bx--btn--primary" type="submit">Create</button>
+    </div>
+  </footer>
+{/content}
diff --git a/src/components/footer/footer.html b/src/components/footer/footer.html
deleted file mode 100644
index 9657c95b7267..000000000000
--- a/src/components/footer/footer.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<footer class="bx--footer bx--footer--bottom-fixed" role="contentinfo">
-  <div class="bx--footer-info">
-    <div class="bx--footer-info__item">
-      <p class="bx--footer-label">Need Help?</p>
-      <a class="bx--link" href="#">Contact Bluemix Sales</a>
-    </div>
-    <div class="bx--footer-info__item">
-      <p class="bx--footer-label">Estimate Monthly Cost</p>
-      <a class="bx--link" href="#">Cost Calculator</a>
-    </div>
-  </div>
-  <div class="bx--footer-cta">
-    <button class="bx--btn bx--btn--primary" type="submit">Create</button>
-  </div>
-</footer>
diff --git a/src/components/form/form.dust b/src/components/form/form.dust
new file mode 100644
index 000000000000..4655f7af65ee
--- /dev/null
+++ b/src/components/form/form.dust
@@ -0,0 +1,44 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <label for="text1" class="bx--label">Text Input label</label>
+    <input id="text1" type="text" class="bx--text-input" placeholder="Placeholder text" />
+    <div class="bx--form-requirement">
+      Username is taken.
+    </div>
+  </div>
+  <div class="bx--form-item">
+    <label for="text-area-2" class="bx--label">Text area label</label>
+    <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text"></textarea>
+    <div class="bx--form-requirement">
+      Please do not leave blank.
+    </div>
+  </div>
+  <div class="bx--form-item">
+    <label for="select-id-form" class="bx--label">Select label</label>
+    <div class="bx--select">
+      <select id="select-id-form" class="bx--select-input">
+        <option class="bx--select-option" disabled selected hidden>Choose an option</option>
+        <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+        <optgroup class="bx--select-optgroup" label="Category 1">
+          <option class="bx--select-option" value="option1">Option 1</option>
+          <option class="bx--select-option" value="option2">Option 2</option>
+        </optgroup>
+        <optgroup class="bx--select-optgroup" label="Category 2">
+          <option class="bx--select-option" value="option1">Option 1</option>
+          <option class="bx--select-option" value="option2">Option 2</option>
+        </optgroup>
+      </select>
+      <div class="bx--form-requirement">
+        Please choose an option.
+      </div>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+  <div class="bx--form-item">
+    <button class="bx--btn bx--btn--primary" type="button">Submit</button>
+  </div>
+{/content}
diff --git a/src/components/form/form.html b/src/components/form/form.html
deleted file mode 100644
index 4d126b5debb1..000000000000
--- a/src/components/form/form.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="bx--form-item">
-  <label for="text1" class="bx--label">Text Input label</label>
-  <input id="text1" type="text" class="bx--text-input" placeholder="Placeholder text" />
-  <div class="bx--form-requirement">
-    Username is taken.
-  </div>
-</div>
-<div class="bx--form-item">
-  <label for="text-area-2" class="bx--label">Text area label</label>
-  <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text"></textarea>
-  <div class="bx--form-requirement">
-    Please do not leave blank.
-  </div>
-</div>
-<div class="bx--form-item">
-  <label for="select-id-form" class="bx--label">Select label</label>
-  <div class="bx--select">
-    <select id="select-id-form" class="bx--select-input">
-      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
-      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
-      <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1">Option 1</option>
-        <option class="bx--select-option" value="option2">Option 2</option>
-      </optgroup>
-      <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1">Option 1</option>
-        <option class="bx--select-option" value="option2">Option 2</option>
-      </optgroup>
-    </select>
-    <div class="bx--form-requirement">
-      Please choose an option.
-    </div>
-    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-</div>
-<div class="bx--form-item">
-  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
-</div>
diff --git a/src/components/grid/grid.dust b/src/components/grid/grid.dust
new file mode 100644
index 000000000000..48a9362c8add
--- /dev/null
+++ b/src/components/grid/grid.dust
@@ -0,0 +1,28 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--grid">
+    <div class="bx--row">
+      <div class="bx--col-xs-12 bx--col-sm-6 indigo">
+        <div class="bx--row">
+          <div class="bx--col-xs-12 bx--col-sm-6">
+            <div class="col-example">
+              <p>Content space for bx--col-xs-12 bx--col-sm-6</p>
+            </div>
+          </div>
+          <div class="bx--col-xs-12 bx--col-sm-6 green">
+            <p>Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
+              the column directly will effect the entire column, as opposed to using a child element in the example to the
+              left). </p>
+          </div>
+        </div>
+
+        <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
+      </div>
+      <div class="bx--col-xs-12 bx--col-sm-6 red">
+        <p>Background color over entire column, not just content space</p>
+
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/grid/grid.html b/src/components/grid/grid.html
deleted file mode 100644
index 40d0b2a5b570..000000000000
--- a/src/components/grid/grid.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-xs-12 bx--col-sm-6 indigo">
-      <div class="bx--row">
-        <div class="bx--col-xs-12 bx--col-sm-6">
-          <div class="col-example">
-            <p>Content space for bx--col-xs-12 bx--col-sm-6</p>
-          </div>
-        </div>
-        <div class="bx--col-xs-12 bx--col-sm-6 green">
-          <p>Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
-            the column directly will effect the entire column, as opposed to using a child element in the example to the
-            left). </p>
-        </div>
-      </div>
-
-      <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
-    </div>
-    <div class="bx--col-xs-12 bx--col-sm-6 red">
-      <p>Background color over entire column, not just content space</p>
-
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/components/interior-left-nav/interior-left-nav-keep-open.html b/src/components/interior-left-nav/interior-left-nav-keep-open.html
deleted file mode 100644
index 8a1d69f6256e..000000000000
--- a/src/components/interior-left-nav/interior-left-nav-keep-open.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<nav role="navigation" aria-label="Interior Left Navigation Open" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable"
-  data-keep-open="true">
-  <ul role="menubar" aria-label="left nav list" class="left-nav-list" data-interior-left-nav-list aria-hidden="false">
-    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
-      <a class="left-nav-list__item-link">
-        Example Item 1
-      </a>
-    </li>
-    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
-      <a class="left-nav-list__item-link">
-        Example Item 2
-      </a>
-    </li>
-    <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
-      data-interior-left-nav-with-children>
-      <a class="left-nav-list__item-link">
-        Example Item 3
-        <div class="left-nav-list__item-icon">
-          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </div>
-      </a>
-      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1A</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1B</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1C</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1D</a>
-        </li>
-      </ul>
-    </li>
-    <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
-      data-interior-left-nav-with-children>
-      <a class="left-nav-list__item-link">
-        Example Item 4
-        <div class="left-nav-list__item-icon">
-          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </div>
-      </a>
-      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2A</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2B</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2C</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2D</a>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
-    <a class="bx--interior-left-nav-collapse__link" href="#" aria-label="collapse nav pane">
-      <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd" data-interior-left-nav-arrow>
-        <title>Collapse nav pane</title>
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-      </svg>
-    </a>
-  </div>
-</nav>
diff --git a/src/components/interior-left-nav/interior-left-nav.config.js b/src/components/interior-left-nav/interior-left-nav.config.js
new file mode 100644
index 000000000000..804f970550fd
--- /dev/null
+++ b/src/components/interior-left-nav/interior-left-nav.config.js
@@ -0,0 +1,22 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+      notes: `
+        Interior left navigation organizes the content structure and provides
+        context to support user orientation. This pattern accommodates the
+        breadth of content and tasks users expect to see.
+      `,
+    },
+    {
+      name: 'keep-open',
+      label: 'Keep open',
+      context: {
+        keepOpen: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/interior-left-nav/interior-left-nav.dust b/src/components/interior-left-nav/interior-left-nav.dust
new file mode 100644
index 000000000000..c27486874af6
--- /dev/null
+++ b/src/components/interior-left-nav/interior-left-nav.dust
@@ -0,0 +1,77 @@
+{>_layout/}
+
+{<content}
+  <nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable"{?keepOpen} data-keep-open="true"{/keepOpen}>
+    <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-label="left nav list" aria-hidden="false">
+      <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
+        <a class="left-nav-list__item-link">
+          Example Item 1
+        </a>
+      </li>
+      <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
+        <a class="left-nav-list__item-link">
+          Example Item 2
+        </a>
+      </li>
+      <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
+        data-interior-left-nav-with-children>
+        <a class="left-nav-list__item-link">
+          Example Item 3
+          <div class="left-nav-list__item-icon">
+            <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </div>
+        </a>
+        <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-1A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1A</a>
+          </li>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-1B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1B</a>
+          </li>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-1C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1C</a>
+          </li>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-1D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1D</a>
+          </li>
+        </ul>
+      </li>
+      <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
+        data-interior-left-nav-with-children>
+        <a class="left-nav-list__item-link">
+          Example Item 4
+          <div class="left-nav-list__item-icon">
+            <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+              <path d="M10 0L5 5 0 0z"></path>
+            </svg>
+          </div>
+        </a>
+        <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" aria-label="nested left nav list" data-interior-left-nav-nested-list>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-2A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2A</a>
+          </li>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-2B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2B</a>
+          </li>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-2C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2C</a>
+          </li>
+          <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
+            <a href="#example-item-2D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2D</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+
+    <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
+      <a class="bx--interior-left-nav-collapse__link" href="#" aria-label="collapse nav pane">
+        <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd" data-interior-left-nav-arrow>
+          <title>Collapse nav pane</title>
+          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+        </svg>
+      </a>
+    </div>
+  </nav>
+{/content}
diff --git a/src/components/interior-left-nav/interior-left-nav.html b/src/components/interior-left-nav/interior-left-nav.html
deleted file mode 100644
index b4b3a6ee6385..000000000000
--- a/src/components/interior-left-nav/interior-left-nav.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable">
-  <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-label="left nav list" aria-hidden="false">
-    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
-      <a class="left-nav-list__item-link">
-        Example Item 1
-      </a>
-    </li>
-    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
-      <a class="left-nav-list__item-link">
-        Example Item 2
-      </a>
-    </li>
-    <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
-      data-interior-left-nav-with-children>
-      <a class="left-nav-list__item-link">
-        Example Item 3
-        <div class="left-nav-list__item-icon">
-          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </div>
-      </a>
-      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1A</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1B</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1C</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-1D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1D</a>
-        </li>
-      </ul>
-    </li>
-    <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
-      data-interior-left-nav-with-children>
-      <a class="left-nav-list__item-link">
-        Example Item 4
-        <div class="left-nav-list__item-icon">
-          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-            <path d="M10 0L5 5 0 0z"></path>
-          </svg>
-        </div>
-      </a>
-      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" aria-label="nested left nav list" data-interior-left-nav-nested-list>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2A</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2B</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2C</a>
-        </li>
-        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
-          <a href="#example-item-2D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2D</a>
-        </li>
-      </ul>
-    </li>
-  </ul>
-
-  <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
-    <a class="bx--interior-left-nav-collapse__link" href="#" aria-label="collapse nav pane">
-      <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd" data-interior-left-nav-arrow>
-        <title>Collapse nav pane</title>
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-      </svg>
-    </a>
-  </div>
-</nav>
diff --git a/src/components/lightbox/lightbox.dust b/src/components/lightbox/lightbox.dust
new file mode 100644
index 000000000000..81e5df32754a
--- /dev/null
+++ b/src/components/lightbox/lightbox.dust
@@ -0,0 +1,51 @@
+{>_layout/}
+
+{<content}
+  <button class="bx--btn bx--btn--primary" type="button" data-modal-target="#lightbox" data-carousel-item-index="0">Open Lightbox</button>
+
+  <div id="lightbox" class="bx--modal" data-modal>
+    <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
+      <div class="bx--lightbox__main">
+        <button class="bx--lightbox__btn" data-scroll-left>
+          <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+            <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+          </svg>
+        </button>
+        <img src="http://via.placeholder.com/1056x594?text=/0" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=1" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=2" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=3" class="bx--lightbox__item">
+        <img src="http://via.placeholder.com/1056x594?text=4" class="bx--lightbox__item">
+        <button class="bx--lightbox__btn" data-scroll-right>
+          <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+            <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+          </svg>
+        </button>
+      </div>
+      <div class="bx--lightbox__footer">
+        <div class="bx--filmstrip">
+          <button class="bx--carousel__item" data-carousel-item-index="0">
+            <img src="http://via.placeholder.com/256x144?text=/0">
+          </button>
+          <button class="bx--carousel__item" data-carousel-item-index="1">
+            <img src="http://via.placeholder.com/256x144?text=1">
+          </button>
+          <button class="bx--carousel__item" data-carousel-item-index="2">
+            <img src="http://via.placeholder.com/256x144?text=2">
+          </button>
+          <button class="bx--carousel__item" data-carousel-item-index="3">
+            <img src="http://via.placeholder.com/256x144?text=3">
+          </button>
+          <button class="bx--carousel__item" data-carousel-item-index="4">
+            <img src="http://via.placeholder.com/256x144?text=4">
+          </button>
+        </div>
+        <div class="bx--filmstrip-indicator-ctn">
+          <div class="bx--filmstrip-indicator bx--filmstrip-indicator--active"></div>
+          <div class="bx--filmstrip-indicator"></div>
+          <div class="bx--filmstrip-indicator"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/lightbox/lightbox.html b/src/components/lightbox/lightbox.html
deleted file mode 100644
index 5746773fa60d..000000000000
--- a/src/components/lightbox/lightbox.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#lightbox" data-carousel-item-index="0">Open Lightbox</button>
-
-<div id="lightbox" class="bx--modal" data-modal>
-  <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
-    <div class="bx--lightbox__main">
-      <button class="bx--lightbox__btn" data-scroll-left>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-      <img src="http://via.placeholder.com/1056x594?text=/0" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=1" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=2" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=3" class="bx--lightbox__item">
-      <img src="http://via.placeholder.com/1056x594?text=4" class="bx--lightbox__item">
-      <button class="bx--lightbox__btn" data-scroll-right>
-        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="bx--lightbox__footer">
-      <div class="bx--filmstrip">
-        <button class="bx--carousel__item" data-carousel-item-index="0">
-          <img src="http://via.placeholder.com/256x144?text=/0">
-        </button>
-        <button class="bx--carousel__item" data-carousel-item-index="1">
-          <img src="http://via.placeholder.com/256x144?text=1">
-        </button>
-        <button class="bx--carousel__item" data-carousel-item-index="2">
-          <img src="http://via.placeholder.com/256x144?text=2">
-        </button>
-        <button class="bx--carousel__item" data-carousel-item-index="3">
-          <img src="http://via.placeholder.com/256x144?text=3">
-        </button>
-        <button class="bx--carousel__item" data-carousel-item-index="4">
-          <img src="http://via.placeholder.com/256x144?text=4">
-        </button>
-      </div>
-      <div class="bx--filmstrip-indicator-ctn">
-        <div class="bx--filmstrip-indicator bx--filmstrip-indicator--active"></div>
-        <div class="bx--filmstrip-indicator"></div>
-        <div class="bx--filmstrip-indicator"></div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/link/link.dust b/src/components/link/link.dust
new file mode 100644
index 000000000000..865853442063
--- /dev/null
+++ b/src/components/link/link.dust
@@ -0,0 +1,6 @@
+{>_layout/}
+
+{<content}
+  <a href="#" class="bx--link">Link</a>
+  <a href="#" class="bx--link" tabindex="-1" aria-disabled="true">Link</a>
+{/content}
diff --git a/src/components/link/link.html b/src/components/link/link.html
deleted file mode 100644
index 3acaf88a065d..000000000000
--- a/src/components/link/link.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<a href="#" class="bx--link">Link</a>
-<a href="#" class="bx--link" tabindex="-1" aria-disabled="true">Link</a>
diff --git a/src/components/list-box/list-box--inline.html b/src/components/list-box/list-box--inline.html
deleted file mode 100644
index 9229d6bb5d78..000000000000
--- a/src/components/list-box/list-box--inline.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="bx--form-item bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-    <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-0">Option 1</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-  </div>
-</div>
diff --git a/src/components/list-box/list-box.config.js b/src/components/list-box/list-box.config.js
new file mode 100644
index 000000000000..2b787ccdb462
--- /dev/null
+++ b/src/components/list-box/list-box.config.js
@@ -0,0 +1,17 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      name: 'inline',
+      label: 'Inline',
+      context: {
+        inline: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/list-box/list-box.dust b/src/components/list-box/list-box.dust
new file mode 100644
index 000000000000..ce7b4a3c052b
--- /dev/null
+++ b/src/components/list-box/list-box.dust
@@ -0,0 +1,32 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item bx--list-box{?inline} bx--list-box--inline{/inline}">
+    <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
+      <span class="bx--list-box__label">Label</span>
+      <div class="bx--list-box__menu-icon">
+        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+          <title>Open menu</title>
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div class="bx--form-item bx--list-box{?inline} bx--list-box--inline{/inline}">
+    <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
+      <span class="bx--list-box__label">Label</span>
+      <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
+        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+          <title>Close menu</title>
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="bx--list-box__menu">
+      <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-0">Option 1</div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/list-box/list-box.html b/src/components/list-box/list-box.html
deleted file mode 100644
index 143825d2fa70..000000000000
--- a/src/components/list-box/list-box.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="bx--form-item bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"><span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-    <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-2">Option 3</div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
-  </div>
-</div>
diff --git a/src/components/list/list--ordered.html b/src/components/list/list--ordered.html
deleted file mode 100644
index f45e5de75e21..000000000000
--- a/src/components/list/list--ordered.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<ol class="bx--list--ordered">
-  <li class="bx--list__item">Ordered List level 1
-    <ol class="bx--list--nested">
-      <li class="bx--list__item">Ordered List level 2</li>
-      <li class="bx--list__item">Ordered List level 2</li>
-    </ol>
-  </li>
-  <li class="bx--list__item">Ordered List level 1</li>
-  <li class="bx--list__item">Ordered List level 1</li>
-</ol>
diff --git a/src/components/list/list.config.js b/src/components/list/list.config.js
new file mode 100644
index 000000000000..2ddea7186861
--- /dev/null
+++ b/src/components/list/list.config.js
@@ -0,0 +1,24 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Unordered',
+      context: {
+        tag: 'ul',
+        type: 'unordered',
+        displayType: 'Unordered',
+      },
+    },
+    {
+      name: 'ordered',
+      label: 'Ordered',
+      context: {
+        tag: 'ol',
+        type: 'ordered',
+        displayType: 'Ordered',
+      },
+    },
+  ],
+};
diff --git a/src/components/list/list.dust b/src/components/list/list.dust
new file mode 100644
index 000000000000..aaf5db4d2198
--- /dev/null
+++ b/src/components/list/list.dust
@@ -0,0 +1,14 @@
+{>_layout/}
+
+{<content}
+  <{tag} class="bx--list--{type}">
+    <li class="bx--list__item">{displayType} List level 1
+      <{tag} class="bx--list--nested">
+        <li class="bx--list__item">{displayType} List level 2</li>
+        <li class="bx--list__item">{displayType} List level 2</li>
+      </{tag}>
+    </li>
+    <li class="bx--list__item">{displayType} List level 1</li>
+    <li class="bx--list__item">{displayType} List level 1</li>
+  </{tag}>
+{/content}
diff --git a/src/components/list/list.html b/src/components/list/list.html
deleted file mode 100644
index 3cec5a430e18..000000000000
--- a/src/components/list/list.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<ul class="bx--list--unordered">
-  <li class="bx--list__item">Unordered List level 1
-    <ul class="bx--list--nested">
-      <li class="bx--list__item">Unordered List level 2</li>
-      <li class="bx--list__item">Unordered List level 2</li>
-    </ul>
-  </li>
-  <li class="bx--list__item">Unordered List level 1</li>
-  <li class="bx--list__item">Unordered List level 1</li>
-</ul>
diff --git a/src/components/loading/loading--small.html b/src/components/loading/loading--small.html
deleted file mode 100644
index 50c3d2f4b8dc..000000000000
--- a/src/components/loading/loading--small.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div data-loading class="bx--loading bx--loading--small">
-  <svg class=" bx--loading__svg " viewBox="-75 -75 150 150 ">
-    <title>Loading</title>
-    <circle cx="0 " cy="0 " r="37.5" />
-  </svg>
-</div>
diff --git a/src/components/loading/loading--without-overlay.html b/src/components/loading/loading--without-overlay.html
deleted file mode 100644
index eff146fff89f..000000000000
--- a/src/components/loading/loading--without-overlay.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div data-loading class="bx--loading">
-  <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-    <title>Loading</title>
-    <circle cx="0" cy="0" r="37.5" />
-  </svg>
-</div>
diff --git a/src/components/loading/loading.config.js b/src/components/loading/loading.config.js
new file mode 100644
index 000000000000..a5ce6828f328
--- /dev/null
+++ b/src/components/loading/loading.config.js
@@ -0,0 +1,32 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+      notes: `
+        Loading spinners are used when retrieving data or performing slow computations,
+        and help to notify users that loading is underway.
+      `,
+      context: {
+        overlay: true,
+      },
+    },
+    {
+      name: 'without-overlay',
+      label: 'Without overlay',
+      context: {
+        overlay: false,
+      },
+    },
+    {
+      name: 'small',
+      label: 'Small',
+      context: {
+        overlay: false,
+        small: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/loading/loading.dust b/src/components/loading/loading.dust
new file mode 100644
index 000000000000..dd6c0bf6fc66
--- /dev/null
+++ b/src/components/loading/loading.dust
@@ -0,0 +1,12 @@
+{>_layout/}
+
+{<content}
+  {?overlay}<div class="bx--loading-overlay">{/overlay}
+  <div data-loading class="bx--loading{?small} bx--loading--small{/small}">
+    <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+      <title>Loading</title>
+      <circle cx="0" cy="0" r="37.5" />
+    </svg>
+  </div>
+  {?overlay}</div>{/overlay}
+{/content}
diff --git a/src/components/loading/loading.html b/src/components/loading/loading.html
deleted file mode 100644
index 48626960c484..000000000000
--- a/src/components/loading/loading.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="bx--loading-overlay">
-  <div data-loading class="bx--loading">
-    <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-      <title>Loading</title>
-      <circle cx="0" cy="0" r="37.5" />
-    </svg>
-  </div>
-</div>
diff --git a/src/components/modal/modal--nofooter.html b/src/components/modal/modal--nofooter.html
deleted file mode 100644
index 89a3930dde40..000000000000
--- a/src/components/modal/modal--nofooter.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<button class="bx--btn bx--btn--secondary" type="button" data-modal-target="#nofooter">Passive</button>
-
-<div data-modal id="nofooter" class="bx--modal" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta">Optional label</p>
-      <p class="bx--modal-header__heading bx--type-beta">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close data-modal-primary-focus aria-label="close modal">
-        <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-          <title>Close Modal</title>
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
-      </button>
-    </div>
-
-    <div class="bx--modal-content">
-      <p>Passive modal notifications should only appear if there is an action the user needs to address immediately. Passive
-        modal notifications are persistent on the screen.</p>
-    </div>
-  </div>
-</div>
diff --git a/src/components/modal/modal.config.js b/src/components/modal/modal.config.js
new file mode 100644
index 000000000000..ee79b91424a4
--- /dev/null
+++ b/src/components/modal/modal.config.js
@@ -0,0 +1,24 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+      notes: `
+        Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.
+      `,
+      context: {
+        hasFooter: true,
+      },
+    },
+    {
+      name: 'nofooter',
+      label: 'Without footer',
+      notes: 'Passive modals are modals without footers.',
+      context: {
+        hasFooter: false,
+      },
+    },
+  ],
+};
diff --git a/src/components/modal/modal.dust b/src/components/modal/modal.dust
new file mode 100644
index 000000000000..d47ed5168175
--- /dev/null
+++ b/src/components/modal/modal.dust
@@ -0,0 +1,31 @@
+{>_layout/}
+
+{<content}
+  <button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal">Show modal</button>
+
+  <div data-modal id="modal" class="bx--modal" tabindex="-1">
+    <div class="bx--modal-container">
+      <div class="bx--modal-header">
+        <p class="bx--modal-header__label bx--type-delta">Optional label</p>
+        <p class="bx--modal-header__heading bx--type-beta">Modal heading</p>
+        <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal"{^hasFooter} data-modal-primary-focus{/hasFooter}>
+          <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+            <title>Close Modal</title>
+            <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+          </svg>
+        </button>
+      </div>
+
+      <div class="bx--modal-content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
+      </div>
+
+      {?hasFooter}
+        <div class="bx--modal-footer">
+          <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
+          <button class="bx--btn bx--btn--primary" type="button" data-modal-primary-focus>Primary button</button>
+        </div>
+      {/hasFooter}
+    </div>
+  </div>
+{/content}
diff --git a/src/components/modal/modal.html b/src/components/modal/modal.html
deleted file mode 100644
index 412d0db022f2..000000000000
--- a/src/components/modal/modal.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal">Transactional</button>
-
-<div data-modal id="modal" class="bx--modal" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta">Optional label</p>
-      <p class="bx--modal-header__heading bx--type-beta">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal">
-        <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-           <title>Close Modal</title>
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-        </svg>
-      </button>
-    </div>
-
-    <div class="bx--modal-content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
-    </div>
-
-    <div class="bx--modal-footer">
-      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
-      <button class="bx--btn bx--btn--primary" type="button" data-modal-primary-focus>Primary button</button>
-    </div>
-  </div>
-</div>
diff --git a/src/components/module/module.dust b/src/components/module/module.dust
new file mode 100644
index 000000000000..dc33d33fe487
--- /dev/null
+++ b/src/components/module/module.dust
@@ -0,0 +1,80 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--module bx--module--double">
+    <div class="bx--module__inner">
+      <div class="bx--module__header">
+        <p class="bx--module__title bx--type-alpha">Example header</p>
+      </div>
+      <div class="bx--module__content">
+        <p>
+          Example content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bx--module bx--module--single">
+    <div class="bx--module__inner">
+      <div class="bx--module__header">
+        <p class="bx--module__title bx--type-alpha">Example header</p>
+      </div>
+      <div class="bx--module__content bx--module__content--centered">
+        <p>
+          Example centered content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bx--module bx--module--single">
+    <div class="bx--module__inner">
+      <div class="bx--module__header">
+        <p class="bx--module__title bx--type-alpha">Example header</p>
+      </div>
+      <div class="bx--module__content bx--module__content--scrollable">
+        <p>
+          Example scrollable content.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet risus a elit egestas feugiat. Class aptent taciti
+          sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus imperdiet, mi in aliquam condimentum,
+          dui quam elementum metus, in porta ex elit sed augue.
+        </p>
+        <p>
+          Donec quis orci quis ex euismod rhoncus vel eu elit. Pellentesque posuere libero id nisi aliquam, sed iaculis ligula fringilla.
+          Vestibulum vulputate tellus nisi, id facilisis ipsum sodales sit amet. Nam dui eros, pulvinar a sodales nec, imperdiet
+          non sem. Etiam pharetra velit diam, at sagittis nunc laoreet cursus. Donec faucibus fringilla nibh nec ultrices.
+          Curabitur urna felis, mollis feugiat elementum vel, ultricies quis neque.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet risus a elit egestas feugiat. Class aptent taciti
+          sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus imperdiet, mi in aliquam condimentum,
+          dui quam elementum metus, in porta ex elit sed augue. Donec quis orci quis ex euismod rhoncus vel eu elit. Pellentesque
+          posuere libero id nisi aliquam, sed iaculis ligula fringilla.
+        </p>
+        <p>
+          Vestibulum vulputate tellus nisi, id facilisis ipsum sodales sit amet. Nam dui eros, pulvinar a sodales nec, imperdiet non
+          sem. Etiam pharetra velit diam, at sagittis nunc laoreet cursus. Donec faucibus fringilla nibh nec ultrices. Curabitur
+          urna felis, mollis feugiat elementum vel, ultricies quis neque.
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bx--module bx--module--double">
+    <div class="bx--module__inner">
+      <div class="bx--module__content bx--module__content--centered">
+        <p>
+          Example centered content without header
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bx--module bx--module--single">
+    <div class="bx--module__inner">
+      <div class="bx--module__content">
+        <p>
+          Example content without header
+        </p>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/module/module.html b/src/components/module/module.html
deleted file mode 100644
index 38c5e7187227..000000000000
--- a/src/components/module/module.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<div class="bx--module bx--module--double">
-  <div class="bx--module__inner">
-    <div class="bx--module__header">
-      <p class="bx--module__title bx--type-alpha">Example header</p>
-    </div>
-    <div class="bx--module__content">
-      <p>
-        Example content
-      </p>
-    </div>
-  </div>
-</div>
-<div class="bx--module bx--module--single">
-  <div class="bx--module__inner">
-    <div class="bx--module__header">
-      <p class="bx--module__title bx--type-alpha">Example header</p>
-    </div>
-    <div class="bx--module__content bx--module__content--centered">
-      <p>
-        Example centered content
-      </p>
-    </div>
-  </div>
-</div>
-<div class="bx--module bx--module--single">
-  <div class="bx--module__inner">
-    <div class="bx--module__header">
-      <p class="bx--module__title bx--type-alpha">Example header</p>
-    </div>
-    <div class="bx--module__content bx--module__content--scrollable">
-      <p>
-        Example scrollable content.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet risus a elit egestas feugiat. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus imperdiet, mi in aliquam condimentum,
-        dui quam elementum metus, in porta ex elit sed augue.
-      </p>
-      <p>
-        Donec quis orci quis ex euismod rhoncus vel eu elit. Pellentesque posuere libero id nisi aliquam, sed iaculis ligula fringilla.
-        Vestibulum vulputate tellus nisi, id facilisis ipsum sodales sit amet. Nam dui eros, pulvinar a sodales nec, imperdiet
-        non sem. Etiam pharetra velit diam, at sagittis nunc laoreet cursus. Donec faucibus fringilla nibh nec ultrices.
-        Curabitur urna felis, mollis feugiat elementum vel, ultricies quis neque.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet risus a elit egestas feugiat. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus imperdiet, mi in aliquam condimentum,
-        dui quam elementum metus, in porta ex elit sed augue. Donec quis orci quis ex euismod rhoncus vel eu elit. Pellentesque
-        posuere libero id nisi aliquam, sed iaculis ligula fringilla.
-      </p>
-      <p>
-        Vestibulum vulputate tellus nisi, id facilisis ipsum sodales sit amet. Nam dui eros, pulvinar a sodales nec, imperdiet non
-        sem. Etiam pharetra velit diam, at sagittis nunc laoreet cursus. Donec faucibus fringilla nibh nec ultrices. Curabitur
-        urna felis, mollis feugiat elementum vel, ultricies quis neque.
-      </p>
-    </div>
-  </div>
-</div>
-<div class="bx--module bx--module--double">
-  <div class="bx--module__inner">
-    <div class="bx--module__content bx--module__content--centered">
-      <p>
-        Example centered content without header
-      </p>
-    </div>
-  </div>
-</div>
-<div class="bx--module bx--module--single">
-  <div class="bx--module__inner">
-    <div class="bx--module__content">
-      <p>
-        Example content without header
-      </p>
-    </div>
-  </div>
-</div>
diff --git a/src/components/multi-select/multi-select--inline.html b/src/components/multi-select/multi-select--inline.html
deleted file mode 100644
index 408512ffa71a..000000000000
--- a/src/components/multi-select/multi-select--inline.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div class="bx--form-item bx--multi-select bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--multi-select bx--list-box bx--list-box--inline">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-    <div class="bx--list-box__menu-item" id="downshift-1-item-0">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-0" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 1</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-1">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-1" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 2" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 2</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-2">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-2" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 3" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 3</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-3">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-3" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 4" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 4</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/multi-select/multi-select.config.js b/src/components/multi-select/multi-select.config.js
new file mode 100644
index 000000000000..2b787ccdb462
--- /dev/null
+++ b/src/components/multi-select/multi-select.config.js
@@ -0,0 +1,17 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      name: 'inline',
+      label: 'Inline',
+      context: {
+        inline: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/multi-select/multi-select.dust b/src/components/multi-select/multi-select.dust
new file mode 100644
index 000000000000..f71b442ff36d
--- /dev/null
+++ b/src/components/multi-select/multi-select.dust
@@ -0,0 +1,84 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item bx--multi-select bx--list-box{?inline} bx--list-box--inline{/inline}">
+    <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
+      <span class="bx--list-box__label">Label</span>
+      <div class="bx--list-box__menu-icon">
+        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+          <title>Open menu</title>
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div class="bx--form-item bx--multi-select bx--list-box{?inline} bx--list-box--inline{/inline}">
+    <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
+      <span class="bx--list-box__label">Label</span>
+      <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
+        <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+          <title>Close menu</title>
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="bx--list-box__menu">
+      <div class="bx--list-box__menu-item" id="downshift-1-item-0">
+        <div class="bx--form-item bx--checkbox-wrapper">
+          <label for="downshift-1-item-0" class="bx--checkbox-label">
+            <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+                <title>Select this item</title>
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            <span class="bx--checkbox-label-text">Option 1</span>
+          </label>
+        </div>
+      </div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-1">
+        <div class="bx--form-item bx--checkbox-wrapper">
+          <label for="downshift-1-item-1" class="bx--checkbox-label">
+            <input type="checkbox" name="Option 2" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+                <title>Select this item</title>
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            <span class="bx--checkbox-label-text">Option 2</span>
+          </label>
+        </div>
+      </div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-2">
+        <div class="bx--form-item bx--checkbox-wrapper">
+          <label for="downshift-1-item-2" class="bx--checkbox-label">
+            <input type="checkbox" name="Option 3" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+                <title>Select this item</title>
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            <span class="bx--checkbox-label-text">Option 3</span>
+          </label>
+        </div>
+      </div>
+      <div class="bx--list-box__menu-item" id="downshift-1-item-3">
+        <div class="bx--form-item bx--checkbox-wrapper">
+          <label for="downshift-1-item-3" class="bx--checkbox-label">
+            <input type="checkbox" name="Option 4" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+                <title>Select this item</title>
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            <span class="bx--checkbox-label-text">Option 4</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/multi-select/multi-select.html b/src/components/multi-select/multi-select.html
deleted file mode 100644
index eaf7bcc213cf..000000000000
--- a/src/components/multi-select/multi-select.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div class="bx--form-item bx--multi-select bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
-<div class="bx--form-item bx--multi-select bx--list-box">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
-    <span class="bx--list-box__label">Label</span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
-        <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-  <div class="bx--list-box__menu">
-    <div class="bx--list-box__menu-item" id="downshift-1-item-0">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-0" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 1</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-1">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-1" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 2" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 2</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-2">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-2" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 3" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 3</span>
-        </label>
-      </div>
-    </div>
-    <div class="bx--list-box__menu-item" id="downshift-1-item-3">
-      <div class="bx--form-item bx--checkbox-wrapper">
-        <label for="downshift-1-item-3" class="bx--checkbox-label">
-          <input type="checkbox" name="Option 4" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          <span class="bx--checkbox-label-text">Option 4</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/notification/inline-notification.dust b/src/components/notification/inline-notification.dust
new file mode 100644
index 000000000000..4b1236cc360d
--- /dev/null
+++ b/src/components/notification/inline-notification.dust
@@ -0,0 +1,71 @@
+{>_layout/}
+
+{<content}
+  <div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
+    <div class="bx--inline-notification__details">
+      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM5.1 13.3L3.5 12 11 2.6l1.5 1.2-7.4 9.5z"></path>
+      </svg>
+      <div class="bx--inline-notification__text-wrapper">
+        <p class="bx--inline-notification__title">Notification title</p>
+        <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
+      </div>
+    </div>
+    <button data-notification-btn class="bx--inline-notification__close-button" type="button">
+      <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div data-notification class="bx--inline-notification bx--inline-notification--info" aria-live="polite">
+    <div class="bx--inline-notification__details">
+      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
+      </svg>
+      <div class="bx--inline-notification__text-wrapper">
+        <p class="bx--inline-notification__title">Notification title</p>
+        <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
+      </div>
+    </div>
+    <button data-notification-btn class="bx--inline-notification__close-button" type="button">
+      <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div data-notification class="bx--inline-notification bx--inline-notification--success" aria-live="polite">
+    <div class="bx--inline-notification__details">
+      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"></path>
+      </svg>
+      <div class="bx--inline-notification__text-wrapper">
+        <p class="bx--inline-notification__title">Notification title</p>
+        <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
+      </div>
+    </div>
+    <button data-notification-btn class="bx--inline-notification__close-button" type="button">
+      <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
+    <div class="bx--inline-notification__details">
+      <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M8 1L0 15h16L8 1zm-.8 5h1.5v1.4L8.3 11h-.8l-.4-3.6V6h.1zm.8 8c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+      </svg>
+      <div class="bx--inline-notification__text-wrapper">
+        <p class="bx--inline-notification__title">Notification title</p>
+        <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
+      </div>
+    </div>
+    <button data-notification-btn class="bx--inline-notification__close-button" type="button">
+      <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+{/content}
diff --git a/src/components/notification/inline-notification.html b/src/components/notification/inline-notification.html
deleted file mode 100644
index 3d0dfa0b5a42..000000000000
--- a/src/components/notification/inline-notification.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
-  <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM5.1 13.3L3.5 12 11 2.6l1.5 1.2-7.4 9.5z"></path>
-    </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
-
-<div data-notification class="bx--inline-notification bx--inline-notification--info" aria-live="polite">
-  <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
-    </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
-
-<div data-notification class="bx--inline-notification bx--inline-notification--success" aria-live="polite">
-  <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"></path>
-    </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
-
-<div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
-  <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 1L0 15h16L8 1zm-.8 5h1.5v1.4L8.3 11h-.8l-.4-3.6V6h.1zm.8 8c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-    </svg>
-    <div class="bx--inline-notification__text-wrapper">
-      <p class="bx--inline-notification__title">Notification title</p>
-      <p class="bx--inline-notification__subtitle">Subtitle text goes here.</p>
-    </div>
-  </div>
-  <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
diff --git a/src/components/notification/toast-notification.dust b/src/components/notification/toast-notification.dust
new file mode 100644
index 000000000000..b856088e1a7c
--- /dev/null
+++ b/src/components/notification/toast-notification.dust
@@ -0,0 +1,55 @@
+{>_layout/}
+
+{<content}
+  <div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
+    <div class="bx--toast-notification__details">
+      <h3 class="bx--toast-notification__title">Notification title</h3>
+      <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
+      <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
+    </div>
+    <button data-notification-btn class="bx--toast-notification__close-button" type="button">
+      <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div data-notification class="bx--toast-notification bx--toast-notification--info" aria-live="polite">
+    <div class="bx--toast-notification__details">
+      <h3 class="bx--toast-notification__title">Notification title</h3>
+      <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
+      <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
+    </div>
+    <button data-notification-btn class="bx--toast-notification__close-button" type="button">
+      <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div data-notification class="bx--toast-notification bx--toast-notification--success" aria-live="polite">
+    <div class="bx--toast-notification__details">
+      <h3 class="bx--toast-notification__title">Notification title</h3>
+      <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
+      <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
+    </div>
+    <button data-notification-btn class="bx--toast-notification__close-button" type="button">
+      <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+
+  <div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert">
+    <div class="bx--toast-notification__details">
+      <h3 class="bx--toast-notification__title">Notification title</h3>
+      <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
+      <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
+    </div>
+    <button data-notification-btn class="bx--toast-notification__close-button" type="button">
+      <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+        <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+      </svg>
+    </button>
+  </div>
+{/content}
diff --git a/src/components/notification/toast-notification.html b/src/components/notification/toast-notification.html
deleted file mode 100644
index ac38035c43ab..000000000000
--- a/src/components/notification/toast-notification.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
-
-<div data-notification class="bx--toast-notification bx--toast-notification--info" aria-live="polite">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
-
-<div data-notification class="bx--toast-notification bx--toast-notification--success" aria-live="polite">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
-
-<div data-notification class="bx--toast-notification bx--toast-notification--warning" role="alert">
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">Notification title</h3>
-    <p class="bx--toast-notification__subtitle">Subtitle text goes here.</p>
-    <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
-  </div>
-  <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
-    </svg>
-  </button>
-</div>
diff --git a/src/components/number-input/number-input.dust b/src/components/number-input/number-input.dust
new file mode 100644
index 000000000000..280eac64e345
--- /dev/null
+++ b/src/components/number-input/number-input.dust
@@ -0,0 +1,44 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <label for="number-input" class="bx--label">Number Input label</label>
+    <div data-numberinput class="bx--number">
+      <input id="number-input" type="number" min="0" max="100" value="1">
+      <div class="bx--number__controls">
+        <button class="bx--number__control-btn up-icon">
+          <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+            <path d="M10 5L5 0 0 5z"></path>
+          </svg>
+        </button>
+        <button class="bx--number__control-btn down-icon">
+          <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+            <path d="M10 0L5 5 0 0z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="bx--form-item">
+    <label for="number-input" class="bx--label">Number Input label</label>
+    <div data-invalid data-numberinput class="bx--number">
+      <input id="number-input" type="number" min="0" max="100" value="1">
+      <div class="bx--number__controls">
+        <button class="bx--number__control-btn up-icon">
+          <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+            <path d="M10 5L5 0 0 5z"></path>
+          </svg>
+        </button>
+        <button class="bx--number__control-btn down-icon">
+          <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+            <path d="M10 0L5 5 0 0z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div class="bx--form-requirement">
+      Invalid number
+    </div>
+  </div>
+{/content}
diff --git a/src/components/number-input/number-input.html b/src/components/number-input/number-input.html
deleted file mode 100644
index 78ca84ba7a23..000000000000
--- a/src/components/number-input/number-input.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="bx--form-item">
-  <label for="number-input" class="bx--label">Number Input label</label>
-  <div data-numberinput class="bx--number">
-    <input id="number-input" type="number" min="0" max="100" value="1">
-    <div class="bx--number__controls">
-      <button class="bx--number__control-btn up-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 5L5 0 0 5z"></path>
-        </svg>
-      </button>
-      <button class="bx--number__control-btn down-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-
-<div class="bx--form-item">
-  <label for="number-input" class="bx--label">Number Input label</label>
-  <div data-invalid data-numberinput class="bx--number">
-    <input id="number-input" type="number" min="0" max="100" value="1">
-    <div class="bx--number__controls">
-      <button class="bx--number__control-btn up-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 5L5 0 0 5z"></path>
-        </svg>
-      </button>
-      <button class="bx--number__control-btn down-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div class="bx--form-requirement">
-    Invalid number
-  </div>
-</div>
diff --git a/src/components/order-summary/order-summary-category.html b/src/components/order-summary/order-summary-category.html
deleted file mode 100644
index 5c4f585d59ee..000000000000
--- a/src/components/order-summary/order-summary-category.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<div class="bx--order-summary">
-  <section class="bx--order-header">
-    <p class="bx--order-header-title">Order Summary</p>
-    <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-      <li class="bx--dropdown-text">USD</li>
-      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-      <li>
-        <ul class="bx--dropdown-list">
-          <li data-option data-value="all" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">USD</a></li>
-          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">NOK</a></li>
-          <li data-option data-value="staging" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">GBP</a></li>
-          <li data-option data-value="dea" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">EUR</a></li>
-        </ul>
-      </li>
-    </ul>
-
-  </section>
-  <ul class="bx--order-list">
-    <li class="bx--order-category">
-      <p class="bx--order-category-title">Category Label</p>
-      <ul>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$10.00 /mo</p>
-        </li>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-      </ul>
-    </li>
-    <li class="bx--order-category">
-      <p class="bx--order-category-title">Category Label</p>
-      <ul>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Extra long detail to show what a long line is like</p>
-          <p class="bx--order-price">$20000.00</p>
-        </li>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-      </ul>
-    </li>
-    <li class="bx--order-category">
-      <p class="bx--order-category-title">Category Label</p>
-      <ul>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-        <li class="bx--order-item">
-          <p class="bx--order-detail">Detail one</p>
-          <p class="bx--order-price">$20.00</p>
-        </li>
-      </ul>
-    </li>
-  </ul>
-  <section class="bx--order-total-container">
-    <div class="bx--order-total">
-      <p class="bx--order-total-text">Total due now</p>
-      <p class="bx--order-total-price">
-        $0.00
-        <span>estimated</span>
-      </p>
-    </div>
-    <p class="bx--order-total-subtitle"> * This is an estimated price based on a customer’s average usage, includes monthly and hourly pricing.</p>
-    <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
-    <button class="bx--btn bx--btn--secondary">Cancel</button>
-  </section>
-  <section class="bx--order-footer">
-    <p class="bx--order-footer-text">Need Help?</p>
-    &nbsp;
-    <a href="" class="bx--link">Contact Bluemix Sales</a>
-  </section>
-</div>
diff --git a/src/components/order-summary/order-summary.config.js b/src/components/order-summary/order-summary.config.js
new file mode 100644
index 000000000000..06ab494b8b89
--- /dev/null
+++ b/src/components/order-summary/order-summary.config.js
@@ -0,0 +1,25 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+      notes: `
+        This component is used to display the items a user will be purchasing.
+        This version does not include OrderSummaryCategory.
+      `,
+    },
+    {
+      name: 'with-category',
+      label: 'With category',
+      notes: `
+        This component is used to display the items a user will be purchasing.
+        The category version of OrderSummary can break the items being purchased into categories.
+      `,
+      context: {
+        hasCategory: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/order-summary/order-summary.dust b/src/components/order-summary/order-summary.dust
new file mode 100644
index 000000000000..666d036dc64e
--- /dev/null
+++ b/src/components/order-summary/order-summary.dust
@@ -0,0 +1,117 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--order-summary">
+    <section class="bx--order-header">
+      <p class="bx--order-header-title">Order Summary</p>
+      <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+        <li class="bx--dropdown-text">USD</li>
+        <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+        <li>
+          <ul class="bx--dropdown-list">
+            <li data-option data-value="all" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">USD</a></li>
+            <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">NOK</a></li>
+            <li data-option data-value="staging" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">GBP</a></li>
+            <li data-option data-value="dea" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">EUR</a></li>
+          </ul>
+        </li>
+      </ul>
+
+    </section>
+    <ul class="bx--order-list">
+      {?hasCategory}
+        <li class="bx--order-category">
+          <p class="bx--order-category-title">Category Label</p>
+          <ul>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$10.00 /mo</p>
+            </li>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+          </ul>
+        </li>
+        <li class="bx--order-category">
+          <p class="bx--order-category-title">Category Label</p>
+          <ul>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Extra long detail to show what a long line is like</p>
+              <p class="bx--order-price">$20000.00</p>
+            </li>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+          </ul>
+        </li>
+        <li class="bx--order-category">
+          <p class="bx--order-category-title">Category Label</p>
+          <ul>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+            <li class="bx--order-item">
+              <p class="bx--order-detail">Detail one</p>
+              <p class="bx--order-price">$20.00</p>
+            </li>
+          </ul>
+        </li>
+      {:else}
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">-</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">-</p>
+        </li>
+      {/hasCategory}
+    </ul>
+    <section class="bx--order-total-container">
+      <div class="bx--order-total">
+        <p class="bx--order-total-text">Total due now</p>
+        <p class="bx--order-total-price">
+          $0.00
+          <span>estimated</span>
+        </p>
+      </div>
+      {?hasCategory}
+        <p class="bx--order-total-subtitle"> * This is an estimated price based on a customer’s average usage, includes monthly and hourly pricing.</p>
+      {/hasCategory}
+      <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
+      {?hasCategory}
+        <button class="bx--btn bx--btn--secondary">Cancel</button>
+      {/hasCategory}
+    </section>
+    <section class="bx--order-footer">
+      <p class="bx--order-footer-text">Need Help?</p>
+      &nbsp;
+      <a href="" class="bx--link">Contact Bluemix Sales</a>
+    </section>
+  </div>
+{/content}
diff --git a/src/components/order-summary/order-summary.html b/src/components/order-summary/order-summary.html
deleted file mode 100644
index 99d94dc39b9a..000000000000
--- a/src/components/order-summary/order-summary.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<div class="bx--order-summary">
-  <section class="bx--order-header">
-    <p class="bx--order-header-title">Order Summary</p>
-    <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-      <li class="bx--dropdown-text">USD</li>
-      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-      <li>
-        <ul class="bx--dropdown-list">
-          <li data-option data-value="all" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">USD</a></li>
-          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><a class="bx--dropdown-link" title="NOKNOKNOKNOKNOK" ref="javascript:void(0)">NOKNOKNOKNOKNOK</a></li>
-          <li data-option data-value="staging" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">GBP</a></li>
-          <li data-option data-value="dea" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">WWW</a></li>
-        </ul>
-      </li>
-    </ul>
-
-  </section>
-  <ul class="bx--order-list">
-    <li class="bx--order-item">
-      <p class="bx--order-detail">Detail one</p>
-      <p class="bx--order-price">$20.00</p>
-    </li>
-    <li class="bx--order-item">
-      <p class="bx--order-detail">Detail one</p>
-      <p class="bx--order-price">$20.00</p>
-    </li>
-    <li class="bx--order-item">
-      <p class="bx--order-detail">Detail one</p>
-      <p class="bx--order-price">-</p>
-    </li>
-    <li class="bx--order-item">
-      <p class="bx--order-detail">Detail one</p>
-      <p class="bx--order-price">-</p>
-    </li>
-  </ul>
-  <section class="bx--order-total-container">
-    <div class="bx--order-total">
-      <p class="bx--order-total-text">Total due now</p>
-      <p class="bx--order-total-price">
-        $0.00
-        <span>estimated</span>
-      </p>
-    </div>
-    <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
-  </section>
-  <section class="bx--order-footer">
-    <p class="bx--order-footer-text">Need Help?</p>
-    &nbsp;
-    <a href="" class="bx--link">Contact Bluemix Sales</a>
-  </section>
-</div>
diff --git a/src/components/overflow-menu/overflow-menu.dust b/src/components/overflow-menu/overflow-menu.dust
new file mode 100644
index 000000000000..2c6f2fd75876
--- /dev/null
+++ b/src/components/overflow-menu/overflow-menu.dust
@@ -0,0 +1,53 @@
+{>_layout/}
+
+{<content}
+  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+      <circle cx="2" cy="2" r="2"></circle>
+      <circle cx="2" cy="10" r="2"></circle>
+      <circle cx="2" cy="18" r="2"></circle>
+    </svg>
+    <ul class="bx--overflow-menu-options" tabindex="-1">
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Option 1</button>
+      </li>
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn">Option 2</button>
+      </li>
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn">Option 3</button>
+      </li>
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn">Option 4</button>
+      </li>
+      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+        <button class="bx--overflow-menu-options__btn">Danger option</button>
+      </li>
+    </ul>
+  </div>
+
+  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
+    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+      <circle cx="2" cy="2" r="2"></circle>
+      <circle cx="2" cy="10" r="2"></circle>
+      <circle cx="2" cy="18" r="2"></circle>
+    </svg>
+    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Option 1</button>
+      </li>
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn">Option 2</button>
+      </li>
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn">Option 3</button>
+      </li>
+      <li class="bx--overflow-menu-options__option">
+        <button class="bx--overflow-menu-options__btn">Option 4</button>
+      </li>
+      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
+        <button class="bx--overflow-menu-options__btn">Danger option</button>
+      </li>
+    </ul>
+  </div>
+{/content}
diff --git a/src/components/overflow-menu/overflow-menu.html b/src/components/overflow-menu/overflow-menu.html
deleted file mode 100644
index 2718bdcc684e..000000000000
--- a/src/components/overflow-menu/overflow-menu.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-  <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-    <circle cx="2" cy="2" r="2"></circle>
-    <circle cx="2" cy="10" r="2"></circle>
-    <circle cx="2" cy="18" r="2"></circle>
-  </svg>
-  <ul class="bx--overflow-menu-options" tabindex="-1">
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Option 1</button>
-    </li>
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn">Option 2</button>
-    </li>
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn">Option 3</button>
-    </li>
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn">Option 4</button>
-    </li>
-    <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-      <button class="bx--overflow-menu-options__btn">Danger option</button>
-    </li>
-  </ul>
-</div>
-
-<div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-  <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-    <circle cx="2" cy="2" r="2"></circle>
-    <circle cx="2" cy="10" r="2"></circle>
-    <circle cx="2" cy="18" r="2"></circle>
-  </svg>
-  <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Option 1</button>
-    </li>
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn">Option 2</button>
-    </li>
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn">Option 3</button>
-    </li>
-    <li class="bx--overflow-menu-options__option">
-      <button class="bx--overflow-menu-options__btn">Option 4</button>
-    </li>
-    <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
-      <button class="bx--overflow-menu-options__btn">Danger option</button>
-    </li>
-  </ul>
-</div>
diff --git a/src/components/pagination/pagination-v2.dust b/src/components/pagination/pagination-v2.dust
new file mode 100644
index 000000000000..d0262f909f44
--- /dev/null
+++ b/src/components/pagination/pagination-v2.dust
@@ -0,0 +1,55 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--pagination" data-pagination>
+    <div class="bx--pagination__left">
+      <span class="bx--pagination__text">Items per page:</span>
+      <div class="bx--select bx--select--inline">
+        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
+        <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
+          <option class="bx--select-option" value="10" selected>10</option>
+          <option class="bx--select-option" value="20">20</option>
+          <option class="bx--select-option" value="30">30</option>
+          <option class="bx--select-option" value="40">40</option>
+          <option class="bx--select-option" value="50">50</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+      <span class="bx--pagination__text">
+        <span>|&nbsp;</span>
+        <span data-displayed-item-range>1-10</span> of
+        <span data-total-items>40</span> items</span>
+    </div>
+    <div class="bx--pagination__right bx--pagination--inline">
+      <span class="bx--pagination__text">
+        <span data-displayed-page-number>1</span> of
+        <span data-total-pages>4</span> pages</span>
+      <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
+        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+        </svg>
+      </button>
+      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
+      <div class="bx--select bx--select--inline">
+        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
+        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
+          <option class="bx--select-option" value="1" selected>1</option>
+          <option class="bx--select-option" value="2">2</option>
+          <option class="bx--select-option" value="3">3</option>
+          <option class="bx--select-option" value="4">4</option>
+          <option class="bx--select-option" value="5">5</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+      <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
+        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/pagination/pagination-v2.html b/src/components/pagination/pagination-v2.html
deleted file mode 100644
index d0731111dea8..000000000000
--- a/src/components/pagination/pagination-v2.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div class="bx--pagination" data-pagination>
-  <div class="bx--pagination__left">
-    <span class="bx--pagination__text">Items per page:</span>
-    <div class="bx--select bx--select--inline">
-      <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-      <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
-        <option class="bx--select-option" value="10" selected>10</option>
-        <option class="bx--select-option" value="20">20</option>
-        <option class="bx--select-option" value="30">30</option>
-        <option class="bx--select-option" value="40">40</option>
-        <option class="bx--select-option" value="50">50</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-    <span class="bx--pagination__text">
-      <span>|&nbsp;</span>
-      <span data-displayed-item-range>1-10</span> of
-      <span data-total-items>40</span> items</span>
-  </div>
-  <div class="bx--pagination__right bx--pagination--inline">
-    <span class="bx--pagination__text">
-      <span data-displayed-page-number>1</span> of
-      <span data-total-pages>4</span> pages</span>
-    <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-      </svg>
-    </button>
-    <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-    <div class="bx--select bx--select--inline">
-      <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-      <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
-        <option class="bx--select-option" value="1" selected>1</option>
-        <option class="bx--select-option" value="2">2</option>
-        <option class="bx--select-option" value="3">3</option>
-        <option class="bx--select-option" value="4">4</option>
-        <option class="bx--select-option" value="5">5</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-    <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-    </button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/components/pagination/pagination.dust b/src/components/pagination/pagination.dust
new file mode 100644
index 000000000000..a6f5e8420f46
--- /dev/null
+++ b/src/components/pagination/pagination.dust
@@ -0,0 +1,38 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--pagination" data-pagination>
+    <div class="bx--pagination__left">
+      <div class="bx--select">
+        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
+        <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
+          <option class="bx--select-option" value="10" selected>10</option>
+          <option class="bx--select-option" value="15">15</option>
+          <option class="bx--select-option" value="20">20</option>
+          <option class="bx--select-option" value="25">25</option>
+          <option class="bx--select-option" value="30">30</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+      <span class="bx--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+      <span class="bx--pagination__text"><span data-displayed-item-range>1-10</span> of <span data-total-items>40</span> items</span>
+    </div>
+    <div class="bx--pagination__right">
+      <span class="bx--pagination__text"><span data-displayed-page-number>1</span> of <span data-total-pages>4</span> pages</span>
+      <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
+        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+        </svg>
+      </button>
+      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
+      <input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
+      <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
+        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+          <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/pagination/pagination.html b/src/components/pagination/pagination.html
deleted file mode 100644
index 9da802f0bc0c..000000000000
--- a/src/components/pagination/pagination.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="bx--pagination" data-pagination>
-  <div class="bx--pagination__left">
-    <div class="bx--select">
-      <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
-      <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
-        <option class="bx--select-option" value="10" selected>10</option>
-        <option class="bx--select-option" value="15">15</option>
-        <option class="bx--select-option" value="20">20</option>
-        <option class="bx--select-option" value="25">25</option>
-        <option class="bx--select-option" value="30">30</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-    <span class="bx--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-    <span class="bx--pagination__text"><span data-displayed-item-range>1-10</span> of <span data-total-items>40</span> items</span>
-  </div>
-  <div class="bx--pagination__right">
-    <span class="bx--pagination__text"><span data-displayed-page-number>1</span> of <span data-total-pages>4</span> pages</span>
-    <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
-      </svg>
-    </button>
-    <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
-    <input id="page-number-input" type="text" class="bx--text-input" placeholder="0" value="1" data-page-number-input>
-    <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
-      </svg>
-    </button>
-  </div>
-</div>
diff --git a/src/components/progress-indicator/progress-indicator.dust b/src/components/progress-indicator/progress-indicator.dust
new file mode 100644
index 000000000000..f9cc7c18479f
--- /dev/null
+++ b/src/components/progress-indicator/progress-indicator.dust
@@ -0,0 +1,36 @@
+{>_layout/}
+
+{<content}
+  <ul data-progress data-progress-current class="bx--progress">
+    <li class="bx--progress-step bx--progress-step--complete">
+      <svg width="24px" height="24px" viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="12"></circle>
+        <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></polygon>
+      </svg>
+      <p class="bx--progress-label">First step</p>
+      <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--current">
+      <svg>
+        <circle cx="12" cy="12" r="12"></circle>
+        <circle cx="12" cy="12" r="6"></circle>
+      </svg>
+      <p class="bx--progress-label">Second step</p>
+      <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+      <svg>
+        <circle cx="12" cy="12" r="12"></circle>
+      </svg>
+      <p class="bx--progress-label">Third step</p>
+      <span class="bx--progress-line"></span>
+    </li>
+    <li class="bx--progress-step bx--progress-step--incomplete">
+      <svg>
+        <circle cx="12" cy="12" r="12"></circle>
+      </svg>
+      <p class="bx--progress-label">Fourth step</p>
+      <span class="bx--progress-line"></span>
+    </li>
+  </ul>
+{/content}
diff --git a/src/components/progress-indicator/progress-indicator.html b/src/components/progress-indicator/progress-indicator.html
deleted file mode 100644
index bf911ccd1a78..000000000000
--- a/src/components/progress-indicator/progress-indicator.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<ul data-progress data-progress-current class="bx--progress">
-  <li class="bx--progress-step bx--progress-step--complete">
-    <svg width="24px" height="24px" viewBox="0 0 24 24">
-      <circle cx="12" cy="12" r="12"></circle>
-      <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></polygon>
-    </svg>
-    <p class="bx--progress-label">First step</p>
-    <span class="bx--progress-line"></span>
-  </li>
-  <li class="bx--progress-step bx--progress-step--current">
-    <svg>
-      <circle cx="12" cy="12" r="12"></circle>
-      <circle cx="12" cy="12" r="6"></circle>
-    </svg>
-    <p class="bx--progress-label">Second step</p>
-    <span class="bx--progress-line"></span>
-  </li>
-  <li class="bx--progress-step bx--progress-step--incomplete">
-    <svg>
-      <circle cx="12" cy="12" r="12"></circle>
-    </svg>
-    <p class="bx--progress-label">Third step</p>
-    <span class="bx--progress-line"></span>
-  </li>
-  <li class="bx--progress-step bx--progress-step--incomplete">
-    <svg>
-      <circle cx="12" cy="12" r="12"></circle>
-    </svg>
-    <p class="bx--progress-label">Fourth step</p>
-    <span class="bx--progress-line"></span>
-  </li>
-</ul>
diff --git a/src/components/radio-button/radio-button.dust b/src/components/radio-button/radio-button.dust
new file mode 100644
index 000000000000..ab15db88cb85
--- /dev/null
+++ b/src/components/radio-button/radio-button.dust
@@ -0,0 +1,26 @@
+{>_layout/}
+
+{<content}
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Radio Button heading</legend>
+    <div class="bx--form-item">
+      <div class="bx--radio-button-group">
+        <input id="radio-button-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
+        <label for="radio-button-1" class="bx--radio-button__label">
+          <span class="bx--radio-button__appearance"></span>
+          Radio Button label
+        </label>
+        <input id="radio-button-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
+        <label for="radio-button-2" class="bx--radio-button__label">
+          <span class="bx--radio-button__appearance"></span>
+          Radio Button label
+        </label>
+        <input id="radio-button-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
+        <label for="radio-button-3" class="bx--radio-button__label">
+          <span class="bx--radio-button__appearance"></span>
+          Radio Button label
+        </label>
+      </div>
+    </div>
+  </fieldset>
+{/content}
diff --git a/src/components/radio-button/radio-button.html b/src/components/radio-button/radio-button.html
deleted file mode 100644
index 1333114b70d1..000000000000
--- a/src/components/radio-button/radio-button.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Radio Button heading</legend>
-  <div class="bx--form-item">
-    <div class="bx--radio-button-group">
-      <input id="radio-button-1" class="bx--radio-button" type="radio" value="red" name="radio-button" tabindex="0" checked>
-      <label for="radio-button-1" class="bx--radio-button__label">
-        <span class="bx--radio-button__appearance"></span>
-        Radio Button label
-      </label>
-      <input id="radio-button-2" class="bx--radio-button" type="radio" value="green" name="radio-button" tabindex="0">
-      <label for="radio-button-2" class="bx--radio-button__label">
-        <span class="bx--radio-button__appearance"></span>
-        Radio Button label
-      </label>
-      <input id="radio-button-3" class="bx--radio-button" type="radio" value="blue" name="radio-button" tabindex="0" disabled>
-      <label for="radio-button-3" class="bx--radio-button__label">
-        <span class="bx--radio-button__appearance"></span>
-        Radio Button label
-      </label>
-    </div>
-  </div>
-</fieldset>
diff --git a/src/components/search/search-large.html b/src/components/search/search-large.html
deleted file mode 100644
index d2d7d8e55ead..000000000000
--- a/src/components/search/search-large.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div data-search class="bx--search bx--search--lg" role="search">
-  <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-    <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-  </svg>
-  <label class="bx--label" id="search-input-label-2" for="search__input-1">Search</label>
-  <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
-  <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
-  </svg>
-  <button class="bx--search-button" type="button" aria-label="Filter button">
-    <svg class="bx--search-filter" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M5 0C3.7 0 2.6.8 2.2 2H0v2h2.2C2.6 5.2 3.7 6 5 6c1.3 0 2.4-.8 2.8-2H16V2H7.8C7.4.8 6.3 0 5 0zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM5 10c-1.3 0-2.4.8-2.8 2H0v2h2.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16v-2H7.8c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-      <path d="M11 5c-1.3 0-2.4.8-2.8 2H0v2h8.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16V7h-2.2c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-    </svg>
-  </button>
-  <button class="bx--search-button" type="button" data-search-toggle aria-label="Grid and list toggle button">
-    <div data-search-view="grid">
-      <svg class="bx--search-view" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-        <path d="M0 0h7v7H0zM9 0h7v7H9zM0 9h7v7H0zM9 9h7v7H9z"></path>
-      </svg>
-    </div>
-    <div class="bx--search-view--hidden" data-search-view="list">
-      <svg class="bx--search-view" width="16" height="14" viewBox="0 0 16 14" fill-rule="evenodd">
-        <path d="M0 0h16v2H0zM0 4h16v2H0zM0 8h16v2H0zM0 12h16v2H0z"></path>
-      </svg>
-    </div>
-  </button>
-</div>
diff --git a/src/components/search/search-small.html b/src/components/search/search-small.html
deleted file mode 100644
index b13131eaa668..000000000000
--- a/src/components/search/search-small.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div data-search class="bx--search bx--search--sm" role="search">
-  <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-    <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-  </svg>
-  <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
-  <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
-  <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
-  </svg>
-</div>
diff --git a/src/components/search/search.config.js b/src/components/search/search.config.js
new file mode 100644
index 000000000000..6bbd071b9df3
--- /dev/null
+++ b/src/components/search/search.config.js
@@ -0,0 +1,32 @@
+'use stirct';
+
+module.exports = {
+  default: 'large',
+  variants: [
+    {
+      name: 'large',
+      label: 'Normal',
+      notes: `
+        Search enables users to specify a word or a phrase to find particular relevant pieces of content
+        without the use of navigation. Search can be used as the primary means of discovering content,
+        or as a filter to aid the user in finding content.
+      `,
+      context: {
+        suffix: 'lg',
+      },
+    },
+    {
+      name: 'small',
+      label: 'Small',
+      notes: `
+        Search enables users to specify a word or a phrase to find particular relevant pieces of content
+        without the use of navigation. Search can be used as the primary means of discovering content,
+        or as a filter to aid the user in finding content. With the small version, the search field will be
+        more compact.
+      `,
+      context: {
+        suffix: 'sm',
+      },
+    },
+  ],
+};
diff --git a/src/components/search/search.dust b/src/components/search/search.dust
new file mode 100644
index 000000000000..d6e95f547d01
--- /dev/null
+++ b/src/components/search/search.dust
@@ -0,0 +1,35 @@
+{>_layout/}
+
+{<content}
+  <div data-search class="bx--search bx--search--{suffix}" role="search">
+    <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+      <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+    </svg>
+    <label class="bx--label" id="search-input-label-2" for="search__input-1">Search</label>
+    <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
+    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+    </svg>
+    {@eq key=suffix value="lg"}
+      <button class="bx--search-button" type="button" aria-label="Filter button">
+        <svg class="bx--search-filter" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M5 0C3.7 0 2.6.8 2.2 2H0v2h2.2C2.6 5.2 3.7 6 5 6c1.3 0 2.4-.8 2.8-2H16V2H7.8C7.4.8 6.3 0 5 0zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM5 10c-1.3 0-2.4.8-2.8 2H0v2h2.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16v-2H7.8c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+          <path d="M11 5c-1.3 0-2.4.8-2.8 2H0v2h8.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16V7h-2.2c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+        </svg>
+      </button>
+      <button class="bx--search-button" type="button" data-search-toggle aria-label="Grid and list toggle button">
+        <div data-search-view="grid">
+          <svg class="bx--search-view" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M0 0h7v7H0zM9 0h7v7H9zM0 9h7v7H0zM9 9h7v7H9z"></path>
+          </svg>
+        </div>
+        <div class="bx--search-view--hidden" data-search-view="list">
+          <svg class="bx--search-view" width="16" height="14" viewBox="0 0 16 14" fill-rule="evenodd">
+            <path d="M0 0h16v2H0zM0 4h16v2H0zM0 8h16v2H0zM0 12h16v2H0z"></path>
+          </svg>
+        </div>
+      </button>
+    {/eq}
+  </div>
+{/content}
diff --git a/src/components/select/inline-select.html b/src/components/select/inline-select.html
deleted file mode 100644
index acf828fecb66..000000000000
--- a/src/components/select/inline-select.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="bx--form-item">
-  <div class="bx--select bx--select--inline">
-    <label for="select-id-inline" class="bx--label">Select label</label>
-    <select id="select-id-inline" class="bx--select-input">
-      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
-      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
-      <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1">Option 1</option>
-        <option class="bx--select-option" value="option2">Option 2</option>
-      </optgroup>
-      <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1">Option 1</option>
-        <option class="bx--select-option" value="option2">Option 2</option>
-      </optgroup>
-    </select>
-    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-</div>
diff --git a/src/components/select/select.config.js b/src/components/select/select.config.js
new file mode 100644
index 000000000000..21f2871ec4e6
--- /dev/null
+++ b/src/components/select/select.config.js
@@ -0,0 +1,24 @@
+'use stirct';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Default',
+      notes: `
+        Select displays a list below its title when selected. They are used primarily in forms,
+        where a user chooses one option from a list. Once the user selects an item, the dropdown will
+        dissapear and the field will reflect the user's choice. Create Select Item components for each
+        option in the list.
+      `,
+    },
+    {
+      name: 'inline',
+      label: 'Inline',
+      notes: 'Inline select is for use when there will be multiple elements in a row.',
+      context: {
+        inline: true,
+      },
+    },
+  ],
+};
diff --git a/src/components/select/select.dust b/src/components/select/select.dust
new file mode 100644
index 000000000000..1def15814137
--- /dev/null
+++ b/src/components/select/select.dust
@@ -0,0 +1,29 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    {^inline}
+      <label for="select-id" class="bx--label">Select label</label>
+    {/inline}
+    <div class="bx--select{?inline} bx--select--inline{/inline}">
+      {?inline}
+        <label for="select-id" class="bx--label">Select label</label>
+      {/inline}
+      <select id="select-id" class="bx--select-input">
+        <option class="bx--select-option" disabled selected hidden>Choose an option</option>
+        <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+        <optgroup class="bx--select-optgroup" label="Category 1">
+          <option class="bx--select-option" value="option1">Option 1</option>
+          <option class="bx--select-option" value="option2">Option 2</option>
+        </optgroup>
+        <optgroup class="bx--select-optgroup" label="Category 2">
+          <option class="bx--select-option" value="option1">Option 1</option>
+          <option class="bx--select-option" value="option2">Option 2</option>
+        </optgroup>
+      </select>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/select/select.html b/src/components/select/select.html
deleted file mode 100644
index d9bbccb86b2a..000000000000
--- a/src/components/select/select.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="bx--form-item">
-  <label for="select-id" class="bx--label">Select label</label>
-  <div class="bx--select">
-    <select id="select-id" class="bx--select-input">
-      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
-      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
-      <optgroup class="bx--select-optgroup" label="Category 1">
-        <option class="bx--select-option" value="option1">Option 1</option>
-        <option class="bx--select-option" value="option2">Option 2</option>
-      </optgroup>
-      <optgroup class="bx--select-optgroup" label="Category 2">
-        <option class="bx--select-option" value="option1">Option 1</option>
-        <option class="bx--select-option" value="option2">Option 2</option>
-      </optgroup>
-    </select>
-    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-</div>
diff --git a/src/components/slider/slider.dust b/src/components/slider/slider.dust
new file mode 100644
index 000000000000..a4a598bc6705
--- /dev/null
+++ b/src/components/slider/slider.dust
@@ -0,0 +1,20 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <label for="slider" class="bx--label">Slider label</label>
+    <div class="bx--slider-test">
+    <div class="bx--slider-container">
+      <span class="bx--slider__range-label">0</span>
+      <div class="bx--slider" data-slider data-slider-input-box="#slider-input-box">
+        <div class="bx--slider__track"></div>
+        <div class="bx--slider__filled-track"></div>
+        <div class="bx--slider__thumb" tabindex="0"></div>
+        <input id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="50">
+      </div>
+      <span class="bx--slider__range-label">100</span>
+      <input id="slider-input-box" type="number" class="bx--text-input bx--slider-text-input" placeholder="0">
+    </div>
+  </div>
+  </div>
+{/content}
diff --git a/src/components/slider/slider.html b/src/components/slider/slider.html
deleted file mode 100644
index d7abc3d0caec..000000000000
--- a/src/components/slider/slider.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="bx--form-item">
-  <label for="slider" class="bx--label">Slider label</label>
-  <div class="bx--slider-test">
-  <div class="bx--slider-container">
-    <span class="bx--slider__range-label">0</span>
-    <div class="bx--slider" data-slider data-slider-input-box="#slider-input-box">
-      <div class="bx--slider__track"></div>
-      <div class="bx--slider__filled-track"></div>
-      <div class="bx--slider__thumb" tabindex="0"></div>
-      <input id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="50">
-    </div>
-    <span class="bx--slider__range-label">100</span>
-    <input id="slider-input-box" type="number" class="bx--text-input bx--slider-text-input" placeholder="0">
-  </div>
-</div>
-</div>
diff --git a/src/components/structured-list/structured-list--selection.dust b/src/components/structured-list/structured-list--selection.dust
new file mode 100644
index 000000000000..fe376528fbc7
--- /dev/null
+++ b/src/components/structured-list/structured-list--selection.dust
@@ -0,0 +1,69 @@
+{>_layout/}
+
+{<content}
+  <section class="bx--structured-list bx--structured-list--border bx--structured-list--selection" data-structured-list>
+    <div class="bx--structured-list-thead">
+      <div class="bx--structured-list-row bx--structured-list-row--header-row">
+        <div class="bx--structured-list-th"></div>
+        <div class="bx--structured-list-th">Column A</div>
+        <div class="bx--structured-list-th">Column B</div>
+        <div class="bx--structured-list-th">Column C</div>
+      </div>
+    </div>
+    <div class="bx--structured-list-tbody">
+      <label for="apache-id" aria-label="apache spark" class="bx--structured-list-row bx--structured-list-row--selected" tabindex="0">
+        <input tabindex="-1" id="apache-id" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark"
+          checked />
+        <div class="bx--structured-list-td">
+          <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+            </path>
+          </svg>
+        </div>
+        <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
+        <div class="bx--structured-list-td">Row 1</div>
+        <div class="bx--structured-list-td">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+        </div>
+      </label>
+      <label for="cloudant-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
+        <input tabindex="-1" id="cloudant-id" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant"
+        />
+        <div class="bx--structured-list-td">
+          <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+            </path>
+          </svg>
+        </div>
+        <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
+        <div class="bx--structured-list-td">Row 2</div>
+        <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
+      </label>
+      <label for="block-storate-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
+        <input tabindex="-1" id="block-storate-id" class="bx--structured-list-input" value="block-storage" type="radio" name="services"
+          title="block-storage" />
+        <div class="bx--structured-list-td">
+          <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+            </path>
+          </svg>
+        </div>
+        <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 3</div>
+        <div class="bx--structured-list-td">Row 3</div>
+        <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
+      </label>
+      <label for="open-whisk-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
+        <input tabindex="-1" id="open-whisk-id" class="bx--structured-list-input" value="open-whisk" type="radio" name="services" title="open-whisk" />
+        <div class="bx--structured-list-td">
+          <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+            </path>
+          </svg>
+        </div>
+        <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 4</div>
+        <div class="bx--structured-list-td">Row 4</div>
+        <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
+      </label>
+    </div>
+  </section>
+{/content}
diff --git a/src/components/structured-list/structured-list--selection.html b/src/components/structured-list/structured-list--selection.html
deleted file mode 100644
index 34b857881a52..000000000000
--- a/src/components/structured-list/structured-list--selection.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<section class="bx--structured-list bx--structured-list--border bx--structured-list--selection" data-structured-list>
-  <div class="bx--structured-list-thead">
-    <div class="bx--structured-list-row bx--structured-list-row--header-row">
-      <div class="bx--structured-list-th"></div>
-      <div class="bx--structured-list-th">Column A</div>
-      <div class="bx--structured-list-th">Column B</div>
-      <div class="bx--structured-list-th">Column C</div>
-    </div>
-  </div>
-  <div class="bx--structured-list-tbody">
-    <label for="apache-id" aria-label="apache spark" class="bx--structured-list-row bx--structured-list-row--selected" tabindex="0">
-      <input tabindex="-1" id="apache-id" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark"
-        checked />
-      <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
-        </svg>
-      </div>
-      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
-      <div class="bx--structured-list-td">Row 1</div>
-      <div class="bx--structured-list-td">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-      </div>
-    </label>
-    <label for="cloudant-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
-      <input tabindex="-1" id="cloudant-id" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant"
-      />
-      <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
-        </svg>
-      </div>
-      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
-      <div class="bx--structured-list-td">Row 2</div>
-      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
-    </label>
-    <label for="block-storate-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
-      <input tabindex="-1" id="block-storate-id" class="bx--structured-list-input" value="block-storage" type="radio" name="services"
-        title="block-storage" />
-      <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
-        </svg>
-      </div>
-      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 3</div>
-      <div class="bx--structured-list-td">Row 3</div>
-      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
-    </label>
-    <label for="open-whisk-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
-      <input tabindex="-1" id="open-whisk-id" class="bx--structured-list-input" value="open-whisk" type="radio" name="services" title="open-whisk" />
-      <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
-        </svg>
-      </div>
-      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 4</div>
-      <div class="bx--structured-list-td">Row 4</div>
-      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
-    </label>
-  </div>
-</section>
diff --git a/src/components/structured-list/structured-list.dust b/src/components/structured-list/structured-list.dust
new file mode 100644
index 000000000000..ca87b7a82097
--- /dev/null
+++ b/src/components/structured-list/structured-list.dust
@@ -0,0 +1,31 @@
+{>_layout/}
+
+{<content}
+  <section class="bx--structured-list">
+    <div class="bx--structured-list-thead">
+      <div class="bx--structured-list-row bx--structured-list-row--header-row">
+        <div class="bx--structured-list-th">ColumnA</div>
+        <div class="bx--structured-list-th">ColumnB</div>
+        <div class="bx--structured-list-th">ColumnC</div>
+      </div>
+    </div>
+    <div class="bx--structured-list-tbody">
+      <div class="bx--structured-list-row">
+        <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
+        <div class="bx--structured-list-td">Row 1</div>
+        <div class="bx--structured-list-td">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+        </div>
+      </div>
+      <div class="bx--structured-list-row">
+        <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
+        <div class="bx--structured-list-td">
+          Row 2
+        </div>
+        <div class="bx--structured-list-td">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+        </div>
+      </div>
+    </div>
+  </section>
+{/content}
diff --git a/src/components/structured-list/structured-list.html b/src/components/structured-list/structured-list.html
deleted file mode 100644
index 96cf4c3931ef..000000000000
--- a/src/components/structured-list/structured-list.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<section class="bx--structured-list">
-  <div class="bx--structured-list-thead">
-    <div class="bx--structured-list-row bx--structured-list-row--header-row">
-      <div class="bx--structured-list-th">ColumnA</div>
-      <div class="bx--structured-list-th">ColumnB</div>
-      <div class="bx--structured-list-th">ColumnC</div>
-    </div>
-  </div>
-  <div class="bx--structured-list-tbody">
-    <div class="bx--structured-list-row">
-      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
-      <div class="bx--structured-list-td">Row 1</div>
-      <div class="bx--structured-list-td">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-      </div>
-    </div>
-    <div class="bx--structured-list-row">
-      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
-      <div class="bx--structured-list-td">
-        Row 2
-      </div>
-      <div class="bx--structured-list-td">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
-      </div>
-    </div>
-  </div>
-</section>
diff --git a/src/components/tabs/tabs.dust b/src/components/tabs/tabs.dust
new file mode 100644
index 000000000000..1ecd1f4faee8
--- /dev/null
+++ b/src/components/tabs/tabs.dust
@@ -0,0 +1,47 @@
+{>_layout/}
+
+{<content}
+  <nav data-tabs class="bx--tabs" role="navigation">
+    <div class="bx--tabs-trigger" tabindex="0">
+      <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
+      <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+    <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
+      <li class="bx--tabs__nav-item bx--tabs__nav-item--selected" data-target=".tab-1" role="presentation">
+        <a id="tab-link-1" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-1" aria-selected="true">Tab label 1</a>
+      </li>
+      <li class="bx--tabs__nav-item" data-target=".tab-2" role="presentation">
+        <a id="tab-link-2" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-2" aria-selected="false">Tab label 2</a>
+      </li>
+      <li class="bx--tabs__nav-item" data-target=".tab-3" role="presentation">
+        <a id="tab-link-3" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-3" aria-selected="false">Tab label 3</a>
+      </li>
+      <li class="bx--tabs__nav-item" data-target=".tab-4" role="presentation">
+        <a id="tab-link-4" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-4" aria-selected="false">Tab label 4</a>
+      </li>
+      <li class="bx--tabs__nav-item" data-target=".tab-5" role="presentation">
+        <a id="tab-link-5" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-5" aria-selected="false">Tab label 5</a>
+      </li>
+    </ul>
+  </nav>
+  <!-- The markup below is for demonstration purposes only -->
+  <div style="padding: 1rem;">
+    <div id="tab-panel-1" class="tab-1" role="tabpanel" aria-labelledby="tab-link-1" aria-hidden="false">
+      <p>Content for first tab goes here.</p>
+    </div>
+    <div id="tab-panel-2" class="tab-2" role="tabpanel" aria-labelledby="tab-link-2" aria-hidden="true" hidden>
+      <p>Content for second tab goes here.</p>
+    </div>
+    <div id="tab-panel-3" class="tab-3" role="tabpanel" aria-labelledby="tab-link-3" aria-hidden="true" hidden>
+      <p>Content for third tab goes here.</p>
+    </div>
+    <div id="tab-panel-4" class="tab-4" role="tabpanel" aria-labelledby="tab-link-4" aria-hidden="true" hidden>
+      <p>Content for fourth tab goes here.</p>
+    </div>
+    <div id="tab-panel-5" class="tab-5" role="tabpanel" aria-labelledby="tab-link-5" aria-hidden="true" hidden>
+      <p>Content for fifth tab goes here.</p>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/tabs/tabs.html b/src/components/tabs/tabs.html
deleted file mode 100644
index af51243edca2..000000000000
--- a/src/components/tabs/tabs.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<nav data-tabs class="bx--tabs" role="navigation">
-  <div class="bx--tabs-trigger" tabindex="0">
-    <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-  </div>
-  <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
-    <li class="bx--tabs__nav-item bx--tabs__nav-item--selected" data-target=".tab-1" role="presentation">
-      <a id="tab-link-1" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-1" aria-selected="true">Tab label 1</a>
-    </li>
-    <li class="bx--tabs__nav-item" data-target=".tab-2" role="presentation">
-      <a id="tab-link-2" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-2" aria-selected="false">Tab label 2</a>
-    </li>
-    <li class="bx--tabs__nav-item" data-target=".tab-3" role="presentation">
-      <a id="tab-link-3" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-3" aria-selected="false">Tab label 3</a>
-    </li>
-    <li class="bx--tabs__nav-item" data-target=".tab-4" role="presentation">
-      <a id="tab-link-4" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-4" aria-selected="false">Tab label 4</a>
-    </li>
-    <li class="bx--tabs__nav-item" data-target=".tab-5" role="presentation">
-      <a id="tab-link-5" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-5" aria-selected="false">Tab label 5</a>
-    </li>
-  </ul>
-</nav>
-<!-- The markup below is for demonstration purposes only -->
-<div style="padding: 1rem;">
-  <div id="tab-panel-1" class="tab-1" role="tabpanel" aria-labelledby="tab-link-1" aria-hidden="false">
-    <p>Content for first tab goes here.</p>
-  </div>
-  <div id="tab-panel-2" class="tab-2" role="tabpanel" aria-labelledby="tab-link-2" aria-hidden="true" hidden>
-    <p>Content for second tab goes here.</p>
-  </div>
-  <div id="tab-panel-3" class="tab-3" role="tabpanel" aria-labelledby="tab-link-3" aria-hidden="true" hidden>
-    <p>Content for third tab goes here.</p>
-  </div>
-  <div id="tab-panel-4" class="tab-4" role="tabpanel" aria-labelledby="tab-link-4" aria-hidden="true" hidden>
-    <p>Content for fourth tab goes here.</p>
-  </div>
-  <div id="tab-panel-5" class="tab-5" role="tabpanel" aria-labelledby="tab-link-5" aria-hidden="true" hidden>
-    <p>Content for fifth tab goes here.</p>
-  </div>
-</div>
diff --git a/src/components/tag/tag.dust b/src/components/tag/tag.dust
new file mode 100644
index 000000000000..173ef2b9e15f
--- /dev/null
+++ b/src/components/tag/tag.dust
@@ -0,0 +1,13 @@
+{>_layout/}
+
+{<content}
+  <span class="bx--tag bx--tag--ibm">IBM</span>
+  <span class="bx--tag bx--tag--beta">Beta</span>
+  <span class="bx--tag bx--tag--third-party">Third-Party</span>
+  <span class="bx--tag bx--tag--local">Local</span>
+  <span class="bx--tag bx--tag--dedicated">Dedicated</span>
+  <span class="bx--tag bx--tag--custom">Custom</span>
+  <span class="bx--tag bx--tag--experimental">Experimental</span>
+  <span class="bx--tag bx--tag--community">Community</span>
+  <span class="bx--tag bx--tag--private">Private</span>
+{/content}
diff --git a/src/components/tag/tag.html b/src/components/tag/tag.html
deleted file mode 100644
index 447fa7dcb275..000000000000
--- a/src/components/tag/tag.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<span class="bx--tag bx--tag--ibm">IBM</span>
-<span class="bx--tag bx--tag--beta">Beta</span>
-<span class="bx--tag bx--tag--third-party">Third-Party</span>
-<span class="bx--tag bx--tag--local">Local</span>
-<span class="bx--tag bx--tag--dedicated">Dedicated</span>
-<span class="bx--tag bx--tag--custom">Custom</span>
-<span class="bx--tag bx--tag--experimental">Experimental</span>
-<span class="bx--tag bx--tag--community">Community</span>
-<span class="bx--tag bx--tag--private">Private</span>
diff --git a/src/components/text-area/text-area.dust b/src/components/text-area/text-area.dust
new file mode 100644
index 000000000000..ce0b0291a1e4
--- /dev/null
+++ b/src/components/text-area/text-area.dust
@@ -0,0 +1,6 @@
+{>_layout/}
+
+{<content}
+  <label for="text-area-1" class="bx--label">Text Area label</label>
+  <textarea id="text-area-1" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+{/content}
diff --git a/src/components/text-area/text-area.html b/src/components/text-area/text-area.html
deleted file mode 100644
index 40b3f9c72d6b..000000000000
--- a/src/components/text-area/text-area.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<label for="text-area-1" class="bx--label">Text Area label</label>
-<textarea id="text-area-1" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text."></textarea>
diff --git a/src/components/text-input/text-input.dust b/src/components/text-input/text-input.dust
new file mode 100644
index 000000000000..af00a1ed3028
--- /dev/null
+++ b/src/components/text-input/text-input.dust
@@ -0,0 +1,13 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <label for="text-input-1" class="bx--label">Text Input label</label>
+    <input id="text-input-1" type="text" class="bx--text-input" placeholder="Placeholder text">
+  </div>
+
+  <div class="bx--form-item">
+    <label for="text-input-2" class="bx--label bx--label--disabled">Text Input label</label>
+    <input id="text-input-2" type="text" class="bx--text-input" placeholder="Placeholder text" disabled>
+  </div>
+{/content}
diff --git a/src/components/text-input/text-input.html b/src/components/text-input/text-input.html
deleted file mode 100644
index 27b6437b518e..000000000000
--- a/src/components/text-input/text-input.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="bx--form-item">
-  <label for="text-input-1" class="bx--label">Text Input label</label>
-  <input id="text-input-1" type="text" class="bx--text-input" placeholder="Placeholder text">
-</div>
-
-<div class="bx--form-item">
-  <label for="text-input-2" class="bx--label bx--label--disabled">Text Input label</label>
-  <input id="text-input-2" type="text" class="bx--text-input" placeholder="Placeholder text" disabled>
-</div>
diff --git a/src/components/tile/tile--clickable.dust b/src/components/tile/tile--clickable.dust
new file mode 100644
index 000000000000..7a7adeee91c6
--- /dev/null
+++ b/src/components/tile/tile--clickable.dust
@@ -0,0 +1,5 @@
+{>_layout/}
+
+{<content}
+  <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
+{/content}
diff --git a/src/components/tile/tile--clickable.html b/src/components/tile/tile--clickable.html
deleted file mode 100644
index b0ec419f0783..000000000000
--- a/src/components/tile/tile--clickable.html
+++ /dev/null
@@ -1 +0,0 @@
-<a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
diff --git a/src/components/tile/tile--expandable.dust b/src/components/tile/tile--expandable.dust
new file mode 100644
index 000000000000..779188725edf
--- /dev/null
+++ b/src/components/tile/tile--expandable.dust
@@ -0,0 +1,19 @@
+{>_layout/}
+
+{<content}
+  <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
+    <button class="bx--tile__chevron">
+      <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
+        <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
+      </svg>
+    </button>
+    <div class="bx--tile-content">
+      <span data-tile-atf class="bx--tile-content__above-the-fold">
+        <!-- Above the fold content here -->
+      </span>
+      <span class="bx--tile-content__below-the-fold">
+        <!-- Rest of the content here -->
+      </span>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/tile/tile--expandable.html b/src/components/tile/tile--expandable.html
deleted file mode 100644
index fa96b9246064..000000000000
--- a/src/components/tile/tile--expandable.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
-  <button class="bx--tile__chevron">
-    <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
-      <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
-    </svg>
-  </button>
-  <div class="bx--tile-content">
-    <span data-tile-atf class="bx--tile-content__above-the-fold">
-      <!-- Above the fold content here -->
-    </span>
-    <span class="bx--tile-content__below-the-fold">
-      <!-- Rest of the content here -->
-    </span>
-  </div>
-</div>
diff --git a/src/components/tile/tile--grid.dust b/src/components/tile/tile--grid.dust
new file mode 100644
index 000000000000..6aae6e379993
--- /dev/null
+++ b/src/components/tile/tile--grid.dust
@@ -0,0 +1,112 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--grid">
+
+    <div class="bx--tile-container" style="width: 100%">
+      <div class="bx--row">
+        <div class="bx--col bx--col-md-12">
+          <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
+            <button class="bx--tile__chevron">
+              <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
+                <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
+              </svg>
+            </button>
+            <div class="bx--tile-content">
+              <span data-tile-atf class="bx--tile-content__above-the-fold" style="height: 200px">
+                <!-- Above the fold content here -->
+                <h2>Above the fold content here</h2>
+              </span>
+              <span class="bx--tile-content__below-the-fold" style="height: 400px">
+                <!-- Rest of the content here -->
+                <h2>Below the fold content here</h2>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bx--row">
+        <div class="bx--col bx--col-sm-6 bx--col-xs-6">
+          <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
+            <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile" />
+            <div class="bx--tile__checkmark">
+              <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
+                <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
+              </svg>
+            </div>
+            <div class="bx--tile-content">
+            <!-- Tile content here -->
+            </div>
+          </label>
+        </div>
+        <div class="bx--col bx--col-sm-6 bx--col-xs-6">
+          <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
+            <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2" />
+            <div class="bx--tile__checkmark">
+              <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
+                <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
+              </svg>
+            </div>
+            <div class="bx--tile-content">
+            <!-- Tile content here -->
+            </div>
+          </label>
+        </div>
+      </div>
+      <div class="bx--row">
+        <div class="bx--col bx--col-md-4 bx--col-sm-4">
+          <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
+        </div>
+        <div class="bx--col bx--col-md-4 bx--col-sm-4">
+          <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
+        </div>
+        <div class="bx--col bx--col-md-4 bx--col-sm-4">
+          <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
+        </div>
+      </div>
+      <div class="bx--row">
+        <div class="bx--col bx--col-md-3 bx--col-sm-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-md-3 bx--col-sm-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-md-3 bx--col-sm-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-md-3 bx--col-sm-12">
+          <div class="bx--tile"></div>
+        </div>
+      </div>
+      <div class="bx--row">
+        <div class="bx--col bx--col-lg-2 bx--col-md-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-lg-2 bx--col-md-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-lg-2 bx--col-md-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-lg-2 bx--col-md-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-lg-2 bx--col-md-12">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-lg-2 bx--col-md-12">
+          <div class="bx--tile"></div>
+        </div>
+      </div>
+      <div class="bx--row">
+        <div class="bx--col bx--col-md-8 bx--col-sm-8">
+          <div class="bx--tile"></div>
+        </div>
+        <div class="bx--col bx--col-md-4 bx--col-sm-4">
+          <div class="bx--tile"></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+{/content}
diff --git a/src/components/tile/tile--grid.html b/src/components/tile/tile--grid.html
deleted file mode 100644
index 582e2a8255bc..000000000000
--- a/src/components/tile/tile--grid.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<div class="bx--grid">
-
-  <div class="bx--tile-container" style="width: 100%">
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-12">
-        <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
-          <button class="bx--tile__chevron">
-            <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
-              <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
-            </svg>
-          </button>
-          <div class="bx--tile-content">
-            <span data-tile-atf class="bx--tile-content__above-the-fold" style="height: 200px">
-              <!-- Above the fold content here -->
-              <h2>Above the fold content here</h2>
-            </span>
-            <span class="bx--tile-content__below-the-fold" style="height: 400px">
-              <!-- Rest of the content here -->
-              <h2>Below the fold content here</h2>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-sm-6 bx--col-xs-6">
-        <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-          <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile" />
-          <div class="bx--tile__checkmark">
-            <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
-              <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
-            </svg>
-          </div>
-          <div class="bx--tile-content">
-          <!-- Tile content here -->
-          </div>
-        </label>
-      </div>
-      <div class="bx--col bx--col-sm-6 bx--col-xs-6">
-        <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-          <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2" />
-          <div class="bx--tile__checkmark">
-            <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
-              <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
-            </svg>
-          </div>
-          <div class="bx--tile-content">
-          <!-- Tile content here -->
-          </div>
-        </label>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
-      </div>
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
-      </div>
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-3 bx--col-sm-12">
-        <div class="bx--tile"></div>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-lg-2 bx--col-md-12">
-        <div class="bx--tile"></div>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col bx--col-md-8 bx--col-sm-8">
-        <div class="bx--tile"></div>
-      </div>
-      <div class="bx--col bx--col-md-4 bx--col-sm-4">
-        <div class="bx--tile"></div>
-      </div>
-    </div>
-  </div>
-
-</div>
diff --git a/src/components/tile/tile--selectable.dust b/src/components/tile/tile--selectable.dust
new file mode 100644
index 000000000000..9fbe99376cbc
--- /dev/null
+++ b/src/components/tile/tile--selectable.dust
@@ -0,0 +1,15 @@
+{>_layout/}
+
+{<content}
+  <label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
+    <input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
+    <div class="bx--tile__checkmark">
+      <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
+        <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
+      </svg>
+    </div>
+    <div class="bx--tile-content">
+    <!-- Tile content here -->
+    </div>
+  </label>
+{/content}
diff --git a/src/components/tile/tile--selectable.html b/src/components/tile/tile--selectable.html
deleted file mode 100644
index cb9f39feac8d..000000000000
--- a/src/components/tile/tile--selectable.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-  <input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
-  <div class="bx--tile__checkmark">
-    <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
-      <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
-    </svg>
-  </div>
-  <div class="bx--tile-content">
-  <!-- Tile content here -->
-  </div>
-</label>
diff --git a/src/components/tile/tile.dust b/src/components/tile/tile.dust
new file mode 100644
index 000000000000..ad2f8123041a
--- /dev/null
+++ b/src/components/tile/tile.dust
@@ -0,0 +1,5 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--tile"></div>
+{/content}
diff --git a/src/components/tile/tile.html b/src/components/tile/tile.html
deleted file mode 100644
index ee51de8db4c3..000000000000
--- a/src/components/tile/tile.html
+++ /dev/null
@@ -1 +0,0 @@
-<div class="bx--tile"></div>
diff --git a/src/components/time-picker/time-picker.dust b/src/components/time-picker/time-picker.dust
new file mode 100644
index 000000000000..345e74cf2672
--- /dev/null
+++ b/src/components/time-picker/time-picker.dust
@@ -0,0 +1,37 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <label for="time-picker-1" class="bx--label">Select a time</label>
+    <div class="bx--time-picker">
+      <div class="bx--time-picker__input">
+        <input id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
+          placeholder="hh:mm" maxlength="5" />
+        <div class="bx--form-requirement">
+          Invalid time.
+        </div>
+      </div>
+      <div class="bx--time-picker__select bx--select bx--select--inline">
+        <label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
+        <select id="select-id-1" class="bx--select-input">
+          <option class="bx--select-option" value="AM">AM</option>
+          <option class="bx--select-option" value="PM">PM</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+      <div class="bx--time-picker__select bx--select bx--select--inline">
+        <label for="select-id-2" class="bx--label bx--visually-hidden">Select timezone</label>
+        <select id="select-id-2" class="bx--select-input">
+          <option class="bx--select-option" value="option-1">Timezone 1</option>
+          <option class="bx--select-option" value="option-2">Timezone 2</option>
+          <option class="bx--select-option" value="option-3">Timezone 3</option>
+        </select>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/time-picker/time-picker.html b/src/components/time-picker/time-picker.html
deleted file mode 100644
index 39a555b9fafd..000000000000
--- a/src/components/time-picker/time-picker.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="bx--form-item">
-  <label for="time-picker-1" class="bx--label">Select a time</label>
-  <div class="bx--time-picker">
-    <div class="bx--time-picker__input">
-      <input id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
-        placeholder="hh:mm" maxlength="5" />
-      <div class="bx--form-requirement">
-        Invalid time.
-      </div>
-    </div>
-    <div class="bx--time-picker__select bx--select bx--select--inline">
-      <label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
-      <select id="select-id-1" class="bx--select-input">
-        <option class="bx--select-option" value="AM">AM</option>
-        <option class="bx--select-option" value="PM">PM</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-    <div class="bx--time-picker__select bx--select bx--select--inline">
-      <label for="select-id-2" class="bx--label bx--visually-hidden">Select timezone</label>
-      <select id="select-id-2" class="bx--select-input">
-        <option class="bx--select-option" value="option-1">Timezone 1</option>
-        <option class="bx--select-option" value="option-2">Timezone 2</option>
-        <option class="bx--select-option" value="option-3">Timezone 3</option>
-      </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    </div>
-  </div>
-</div>
diff --git a/src/components/toggle/toggle--small.dust b/src/components/toggle/toggle--small.dust
new file mode 100644
index 000000000000..eec82633b570
--- /dev/null
+++ b/src/components/toggle/toggle--small.dust
@@ -0,0 +1,25 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <input class="bx--toggle bx--toggle--small" id="toggle4" type="checkbox" aria-label="Label Name">
+    <label class="bx--toggle__label" for="toggle4">
+      <span class="bx--toggle__appearance">
+        <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
+          <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
+        </svg>
+      </span>
+    </label>
+  </div>
+
+  <div class="bx--form-item">
+    <input class="bx--toggle bx--toggle--small" id="toggle5" type="checkbox" aria-label="Label Name" disabled>
+    <label class="bx--toggle__label" for="toggle5"> 
+      <span class="bx--toggle__appearance">
+        <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
+          <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
+        </svg>
+      </span>
+    </label>
+  </div>
+{/content}
diff --git a/src/components/toggle/toggle--small.html b/src/components/toggle/toggle--small.html
deleted file mode 100644
index 6c1140b6ec60..000000000000
--- a/src/components/toggle/toggle--small.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="bx--form-item">
-  <input class="bx--toggle bx--toggle--small" id="toggle4" type="checkbox" aria-label="Label Name">
-  <label class="bx--toggle__label" for="toggle4">
-    <span class="bx--toggle__appearance">
-      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
-      </svg>
-    </span>
-  </label>
-</div>
-
-<div class="bx--form-item">
-  <input class="bx--toggle bx--toggle--small" id="toggle5" type="checkbox" aria-label="Label Name" disabled>
-  <label class="bx--toggle__label" for="toggle5"> 
-    <span class="bx--toggle__appearance">
-      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
-        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
-      </svg>
-    </span>
-  </label>
-</div>
diff --git a/src/components/toggle/toggle.dust b/src/components/toggle/toggle.dust
new file mode 100644
index 000000000000..e49e476890a9
--- /dev/null
+++ b/src/components/toggle/toggle.dust
@@ -0,0 +1,33 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--form-item">
+    <input class="bx--toggle" id="toggle1" type="checkbox">
+    <label class="bx--toggle__label" for="toggle1">
+      <span class="bx--toggle__text--left">Off</span>
+      <span class="bx--toggle__appearance"></span>
+      <span class="bx--toggle__text--right">On</span>
+    </label>
+  </div>
+
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Toggle w/ Label</legend>
+    <div class="bx--form-item">
+      <input class="bx--toggle" id="toggle2" type="checkbox">
+      <label class="bx--toggle__label" for="toggle2">
+      <span class="bx--toggle__text--left">Off</span>
+      <span class="bx--toggle__appearance"></span>
+      <span class="bx--toggle__text--right">On</span>
+    </label>
+    </div>
+  </fieldset>
+
+  <div class="bx--form-item">
+    <input class="bx--toggle" id="toggle3" type="checkbox" disabled>
+    <label class="bx--toggle__label" for="toggle3">
+      <span class="bx--toggle__text--left">Off</span>
+      <span class="bx--toggle__appearance"></span>
+      <span class="bx--toggle__text--right">On</span>
+    </label>
+  </div>
+{/content}
diff --git a/src/components/toggle/toggle.html b/src/components/toggle/toggle.html
deleted file mode 100644
index b82b698976e7..000000000000
--- a/src/components/toggle/toggle.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="bx--form-item">
-  <input class="bx--toggle" id="toggle1" type="checkbox">
-  <label class="bx--toggle__label" for="toggle1">
-    <span class="bx--toggle__text--left">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right">On</span>
-  </label>
-</div>
-
-<fieldset class="bx--fieldset">
-  <legend class="bx--label">Toggle w/ Label</legend>
-  <div class="bx--form-item">
-    <input class="bx--toggle" id="toggle2" type="checkbox">
-    <label class="bx--toggle__label" for="toggle2">
-    <span class="bx--toggle__text--left">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right">On</span>
-  </label>
-  </div>
-</fieldset>
-
-<div class="bx--form-item">
-  <input class="bx--toggle" id="toggle3" type="checkbox" disabled>
-  <label class="bx--toggle__label" for="toggle3">
-    <span class="bx--toggle__text--left">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right">On</span>
-  </label>
-</div>
diff --git a/src/components/toolbar/toolbar.dust b/src/components/toolbar/toolbar.dust
new file mode 100644
index 000000000000..230b047e8eec
--- /dev/null
+++ b/src/components/toolbar/toolbar.dust
@@ -0,0 +1,91 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--toolbar" data-toolbar>
+    <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
+      <label for="search__input" class="bx--label">Search</label>
+      <input type="search" class="bx--search-input" id="search__input" placeholder="Search">
+      <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
+        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+        </svg>
+      </button>
+      <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+      </svg>
+    </div>
+    <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
+      <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
+        <path d="M10.9 3c-.4-1.7-2-3-3.9-3S3.6 1.3 3.1 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24V3H10.9zM7 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM17 8c-1.9 0-3.4 1.3-3.9 3H0v2h13.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2h-3.1c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM7 16c-1.9 0-3.4 1.3-3.9 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2H10.9c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+      </svg>
+      <ul class="bx--overflow-menu-options">
+        <li class="bx--toolbar-menu__title">FILTER BY</li>
+        <li class="bx--toolbar-menu__option">
+          <input id="filter-option-1" class="bx--checkbox" type="checkbox" value="filter-option-1" name="checkbox">
+          <label for="filter-option-1" class="bx--checkbox-label">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            Filter option 1
+          </label>
+        </li>
+        <li class="bx--toolbar-menu__option">
+          <input id="filter-option-2" class="bx--checkbox" type="checkbox" value="filter-option-2" name="checkbox">
+          <label for="filter-option-2" class="bx--checkbox-label">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            Filter option 2
+          </label>
+        </li>
+        <li class="bx--toolbar-menu__option">
+          <input id="filter-option-3" class="bx--checkbox" type="checkbox" value="filter-option-3" name="checkbox">
+          <label for="filter-option-3" class="bx--checkbox-label">
+            <span class="bx--checkbox-appearance">
+              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+              </svg>
+            </span>
+            Filter option 3
+          </label>
+        </li>
+      </ul>
+    </div>
+    <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
+      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+        <circle cx="2" cy="2" r="2"></circle>
+        <circle cx="2" cy="10" r="2"></circle>
+        <circle cx="2" cy="18" r="2"></circle>
+      </svg>
+      <ul class="bx--overflow-menu-options">
+        <li class="bx--overflow-menu-options__option">
+          <button type="button" class="bx--overflow-menu-options__btn">Refresh table</button>
+        </li>
+        <hr class="bx--toolbar-menu__divider" />
+        <li class="bx--toolbar-menu__title">ROW HEIGHT</li>
+        <fieldset data-row-height class="bx--radio-button-group">
+          <legend class="bx--visually-hidden">Select table row height</legend>
+          <li class="bx--toolbar-menu__option">
+            <input id="short-rows" class="bx--radio-button" type="radio" value="short" name="radio" checked>
+            <label for="short-rows" class="bx--radio-button__label">
+              <span class="bx--radio-button__appearance"></span>
+              Short
+            </label>
+          </li>
+          <li class="bx--toolbar-menu__option">
+            <input id="tall-rows" class="bx--radio-button" type="radio" value="tall" name="radio">
+            <label for="tall-rows" class="bx--radio-button__label">
+              <span class="bx--radio-button__appearance"></span>
+              Tall
+            </label>
+          </li>
+        </fieldset>
+      </ul>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/toolbar/toolbar.html b/src/components/toolbar/toolbar.html
deleted file mode 100644
index af54d59a0eb5..000000000000
--- a/src/components/toolbar/toolbar.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<div class="bx--toolbar" data-toolbar>
-  <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
-    <label for="search__input" class="bx--label">Search</label>
-    <input type="search" class="bx--search-input" id="search__input" placeholder="Search">
-    <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-        <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-        <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-      </svg>
-    </button>
-    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
-    </svg>
-  </div>
-  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-    <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
-      <path d="M10.9 3c-.4-1.7-2-3-3.9-3S3.6 1.3 3.1 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24V3H10.9zM7 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM17 8c-1.9 0-3.4 1.3-3.9 3H0v2h13.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2h-3.1c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM7 16c-1.9 0-3.4 1.3-3.9 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2H10.9c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-    </svg>
-    <ul class="bx--overflow-menu-options">
-      <li class="bx--toolbar-menu__title">FILTER BY</li>
-      <li class="bx--toolbar-menu__option">
-        <input id="filter-option-1" class="bx--checkbox" type="checkbox" value="filter-option-1" name="checkbox">
-        <label for="filter-option-1" class="bx--checkbox-label">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          Filter option 1
-        </label>
-      </li>
-      <li class="bx--toolbar-menu__option">
-        <input id="filter-option-2" class="bx--checkbox" type="checkbox" value="filter-option-2" name="checkbox">
-        <label for="filter-option-2" class="bx--checkbox-label">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          Filter option 2
-        </label>
-      </li>
-      <li class="bx--toolbar-menu__option">
-        <input id="filter-option-3" class="bx--checkbox" type="checkbox" value="filter-option-3" name="checkbox">
-        <label for="filter-option-3" class="bx--checkbox-label">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
-          Filter option 3
-        </label>
-      </li>
-    </ul>
-  </div>
-  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-      <circle cx="2" cy="2" r="2"></circle>
-      <circle cx="2" cy="10" r="2"></circle>
-      <circle cx="2" cy="18" r="2"></circle>
-    </svg>
-    <ul class="bx--overflow-menu-options">
-      <li class="bx--overflow-menu-options__option">
-        <button type="button" class="bx--overflow-menu-options__btn">Refresh table</button>
-      </li>
-      <hr class="bx--toolbar-menu__divider" />
-      <li class="bx--toolbar-menu__title">ROW HEIGHT</li>
-      <fieldset data-row-height class="bx--radio-button-group">
-        <legend class="bx--visually-hidden">Select table row height</legend>
-        <li class="bx--toolbar-menu__option">
-          <input id="short-rows" class="bx--radio-button" type="radio" value="short" name="radio" checked>
-          <label for="short-rows" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Short
-          </label>
-        </li>
-        <li class="bx--toolbar-menu__option">
-          <input id="tall-rows" class="bx--radio-button" type="radio" value="tall" name="radio">
-          <label for="tall-rows" class="bx--radio-button__label">
-            <span class="bx--radio-button__appearance"></span>
-            Tall
-          </label>
-        </li>
-      </fieldset>
-    </ul>
-  </div>
-</div>
diff --git a/src/components/tooltip/tooltip--simple.dust b/src/components/tooltip/tooltip--simple.dust
new file mode 100644
index 000000000000..6fff846de50c
--- /dev/null
+++ b/src/components/tooltip/tooltip--simple.dust
@@ -0,0 +1,12 @@
+{>_layout/}
+
+{<content}
+  <div class="bx--tooltip--simple">
+    <p class="bx--tooltip__trigger">Tooltip label</p>
+    <div tabindex="0" class="bx--tooltip--simple__top" data-tooltip-text="This is some tooltip text">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
+      </svg>
+    </div>
+  </div>
+{/content}
diff --git a/src/components/tooltip/tooltip--simple.html b/src/components/tooltip/tooltip--simple.html
deleted file mode 100644
index 79eaa60d01fd..000000000000
--- a/src/components/tooltip/tooltip--simple.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="bx--tooltip--simple">
-  <p class="bx--tooltip__trigger">Tooltip label</p>
-  <div tabindex="0" class="bx--tooltip--simple__top" data-tooltip-text="This is some tooltip text">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
-    </svg>
-  </div>
-</div>
diff --git a/src/components/tooltip/tooltip.dust b/src/components/tooltip/tooltip.dust
new file mode 100644
index 000000000000..4392f0dc23c6
--- /dev/null
+++ b/src/components/tooltip/tooltip.dust
@@ -0,0 +1,14 @@
+{>_layout/}
+
+{<content}
+  <a class="bx--tooltip__trigger">
+    Tooltip label
+    <svg tabindex="0" data-tooltip-trigger data-tooltip-target="#unique-tooltip" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
+    </svg>
+  </a>
+  <div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip">
+    <p class="bx--tooltip__label">Tooltip subtitle</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+{/content}
diff --git a/src/components/tooltip/tooltip.html b/src/components/tooltip/tooltip.html
deleted file mode 100644
index fbd14cda4d53..000000000000
--- a/src/components/tooltip/tooltip.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<a class="bx--tooltip__trigger">
-  Tooltip label
-  <svg tabindex="0" data-tooltip-trigger data-tooltip-target="#unique-tooltip" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
-  </svg>
-</a>
-<div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip">
-  <p class="bx--tooltip__label">Tooltip subtitle</p>
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</div>
diff --git a/src/components/unified-header/unified-header.dust b/src/components/unified-header/unified-header.dust
new file mode 100644
index 000000000000..95b1f7741d63
--- /dev/null
+++ b/src/components/unified-header/unified-header.dust
@@ -0,0 +1,504 @@
+{>_layout/}
+
+{<content}
+  <!-- Unified Header -->
+  <div data-unified-header class="bx--unified-header bx--unified-header--apps" tabindex="0">
+
+    <!-- Super Global Header -->
+    <nav role="navigation" class="bx--top-nav" aria-label="Top Header">
+        <ul role="menubar" class="bx--top-nav__left-container" aria-hidden="false">
+          <li role="menuitem" class="bx--top-nav__left-container__item">
+            <a class="bx--top-nav__left-container__link" href="#" tabindex="0">
+              <svg class="bx--top-nav__left-container__link--icon">
+                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--header--help"></use>
+              </svg>
+              Docs
+            </a>
+          </li>
+        </ul>
+        <ul role="menubar" class="bx--top-nav__right-container">
+          <li data-trial class="bx--top-nav__right-container__item">
+            <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+              <li class="bx--dropdown-text">29 Trial Days Remaining</li>
+              <svg class="bx--dropdown__arrow">
+                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+              </svg>
+              <li>
+                <ul class="bx--dropdown-list">
+                  <li class="bx--dropdown__trial-content">
+                    <p class="bx--dropdown__trial-content--desc">Keep your account going by adding your credit card. Don’t worry. We won’t charge you unless you go over your free monthly allowance.</p>
+                    <button class='bx--btn' type='button'>Add credit card</button>
+                    <a href="#" class="bx--link">Apply promo code</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li data-credit class="bx--top-nav__right-container__item">
+            <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+              <li class="bx--dropdown-text">$132 Credit Expires 12/6</li>
+              <li>
+                <svg class="bx--dropdown__arrow">
+                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+                </svg>
+              </li>
+              <li>
+                <ul class="bx--dropdown-list">
+                  <li class="bx--dropdown-item bx--dropdown__credit-content">
+                    <div>
+                      <p class="bx--dropdown__credit-content--heading">Initial Credit Value</p>
+                      <p class="bx--dropdown__credit-content--desc">$200</p>
+                    </div>
+                    <div>
+                      <p class="bx--dropdown__credit-content--heading">Expires</p>
+                      <p class="bx--dropdown__credit-content--desc">12/25/2016</p>
+                    </div>
+                    <div>
+                      <p class="bx--dropdown__credit-content--heading">Spend Rate</p>
+                      <p class="bx--dropdown__credit-content--desc">$1.33/day</p>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li role="menuitem" class="bx--top-nav__right-container__item">
+            <ul role="menu" data-profile-switcher class="bx--account-switcher">
+              <li tabindex="0" data-profile-switcher-toggle class="bx--account-switcher__toggle">
+                <p data-switcher-account-sl class="bx--account-switcher__toggle--text"></p>
+                <p data-switcher-account class="bx--account-switcher__toggle--text"></p>
+                <p class="bx--account-switcher__toggle--text">|</p>
+                <p data-switcher-region class="bx--account-switcher__toggle--text"></p>
+                <p data-switcher-org class="bx--account-switcher__toggle--text"></p>
+                <p data-switcher-space class="bx--account-switcher__toggle--text"></p>
+              </li>
+              <li role="menuitem" data-switcher-menu class="bx--account-switcher__menu__container">
+                <ul role="menu" class="bx--account-switcher__menu">
+                  <li role="menuitem" class="bx--account-switcher__menu__item">
+                    <p class="bx--account-switcher__menu__item--title">Account</p>
+                    <ul role="menu" data-dropdown data-value="Logans_account_123456789_1234" class="bx--dropdown" tabindex="0">
+                      <li data-dropdown-account class="bx--dropdown-text">Logans_account_123456789_1234</li>
+                      <li>
+                        <svg class="bx--dropdown__arrow">
+                          <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+                        </svg>
+                      </li>
+                      <li aria-haspopup="true" class="bx--dropdown--scroll">
+                        <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
+                          <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
+                          <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">TJs_accoqwejqwhekjqwgehgunt_54321</span></li>
+                          <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
+                            <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
+                              <span data-dropdown-account-sl-linked>sl123456</span>
+                                <svg class="bx--account-switcher__linked-icon">
+                                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
+                                </svg>
+                              <span data-dropdown-account-linked>Logans_account_123456789_1234</span>
+                            </span>
+                          </li>
+                          <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
+                            <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
+                              <span data-dropdown-account-sl-linked>s7777</span>
+                              <svg class="bx--account-switcher__linked-icon">
+                                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
+                              </svg>
+                              <span data-dropdown-account-linked>TJs_account_123456789_1234</span>
+                            </span>
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="bx--account-switcher__menu__item">
+                    <p class="bx--account-switcher__menu__item--title">Region</p>
+                    <ul data-dropdown data-value="US South" class="bx--dropdown" tabindex="0">
+                      <li data-dropdown-region class="bx--dropdown-text">US South</li>
+                      <svg class="bx--dropdown__arrow">
+                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+                      </svg>
+                      <li class="bx--dropdown--scroll">
+                        <ul class="bx--dropdown-list">
+                          <li data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">US South</span></li>
+                          <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Sydney</span></li>
+                          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">United Kingdom</span></li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="bx--account-switcher__menu__item">
+                    <p class="bx--account-switcher__menu__item--title">Organization</p>
+                    <ul data-dropdown data-value="Organization 1" class="bx--dropdown" tabindex="0">
+                      <li data-dropdown-org class="bx--dropdown-text">Organization 1</li>
+                      <svg class="bx--dropdown__arrow">
+                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+                      </svg>
+                      <li class="bx--dropdown--scroll">
+                        <ul class="bx--dropdown-list">
+                          <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
+                          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization q2332434341sddsf2</span></li>
+                          <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 3</span></li>
+                          <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 4</span></li>
+                          <li data-option data-value="router" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 5</span></li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="bx--account-switcher__menu__item">
+                    <p class="bx--account-switcher__menu__item--title">Space</p>
+                    <ul data-dropdown data-value="Space 2" class="bx--dropdown" tabindex="0">
+                      <li data-dropdown-space class="bx--dropdown-text">Space 2</li>
+                      <svg class="bx--dropdown__arrow">
+                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+                      </svg>
+                      <li class="bx--dropdown--scroll">
+                        <ul class="bx--dropdown-list">
+                          <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Dev</span></li>
+                          <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 2</span></li>
+                          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 3</span></li>
+                          <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 4</span></li>
+                          <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 5</span></li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="bx--account-switcher__menu__item">
+                    <a href="#" class="bx--link">Manage Organizations</a>
+                    <a href="#" class="bx--link">Create A Space</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li class="bx--top-nav__right-container__item">
+            <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+              <li data-top-nav-profile-image class="bx--dropdown-text--profile-image">
+                <div class="profile-image">
+                  <svg class="bx--dropdown__profile-dropdown--picture">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
+                  </svg>
+                </div>
+              </li>
+              <li class="bx--dropdown__profile-dropdown">
+                <ul class="bx--dropdown-list">
+                  <li data-option data-value="all" class="bx--dropdown-item">
+                    <svg class="bx--dropdown__profile-dropdown--picture">
+                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
+                    </svg>
+                    <div class="bx--dropdown__profile-dropdown--information">
+                      <p>Erlich Bachman Erlich Bachman</p>
+                      <div class="bx--dropdown__profile-dropdown__container">
+                        <a class="bx--link" href="javascript:void(0)">Profile</a>
+                        <p>|</p>
+                        <a class="bx--link" href="javascript:void(0)">Log Out</a>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    <!-- End Super Global Header -->
+
+    <!-- Global Header -->
+    <header role="banner" class="bx--global-header">
+      <div class="bx--global-header__left-container">
+        <div class="bx--left-nav__trigger bx--left-nav__trigger--apps" data-left-nav-toggle="open" tabindex="0">
+          <div class="bx--left-nav__trigger--btn">
+            <span></span>
+          </div>
+        </div>
+        <div class="bx--global-header__left-nav bx--left-nav--active" data-left-nav-container aria-expanded="false">
+          <div class="bx--left-nav__close-row"></div>
+          <div data-left-nav-current-section="apps" class="bx--left-nav__header">
+            <svg data-left-nav-current-section-icon="apps" class="bx--left-nav__header--taxonomy-icon">
+              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+            </svg>
+            <a data-left-nav-current-section-title tabindex="0" class="bx--left-nav__header--title">Apps</a>
+          </div>
+          <nav class="bx--left-nav" data-left-nav role="navigation" aria-label="Left Navigation">
+            <ul data-left-nav-sections class="bx--left-nav__sections">
+              <li data-left-nav-section="services" class="bx--left-nav__section bx--left-nav__section--services">
+                <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
+                  <svg data-left-nav-section-icon="services" class="bx--left-nav__section--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  <span data-left-nav-section-link class="bx--left-nav__section--link">Services</span>
+                </a>
+              </li>
+              <li data-left-nav-section="infrastructure" class="bx--left-nav__section bx--left-nav__section--infrastructure" tabindex="0">
+                <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
+                  <svg data-left-nav-section-icon="infrastructure" class="bx--left-nav__section--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  <span data-left-nav-section-link class="bx--left-nav__section--link">Infrastructure</span>
+                </a>
+              </li>
+            </ul>
+            <!-- APPLICATIONS MENU -->
+            <ul role="menubar" class="bx--left-nav__main-nav" data-left-nav-list="apps" aria-hidden="false">
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                  <div class="bx--parent-item__link--down-icon">
+                    <svg>
+                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
+                    </svg>
+                  </div>
+                </a>
+                <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
+                  <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
+                  </li>
+                  <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
+                  </li>
+                  <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
+                      <div class="bx--nested-list__item--icon">
+                        <svg>
+                          <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
+                        </svg>
+                      </div>
+                    </a>
+                    <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+            </ul>
+            <!-- END APPLICATIONS MENU -->
+
+            <!-- SERVICES MENU -->
+            <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="services" aria-hidden="true">
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                  <div class="bx--parent-item__link--down-icon">
+                    <svg>
+                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
+                    </svg>
+                  </div>
+                </a>
+                <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
+                  <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
+                  </li>
+                  <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
+                  </li>
+                  <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
+                      <div class="bx--nested-list__item--icon">
+                        <svg>
+                          <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
+                        </svg>
+                      </div>
+                    </a>
+                    <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+            </ul>
+            <!-- END SERVICES MENU -->
+
+            <!-- INFRASTRUCTURE MENU -->
+            <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="infrastructure" aria-hidden="true">
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                  <div class="bx--parent-item__link--down-icon">
+                    <svg>
+                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
+                    </svg>
+                  </div>
+                </a>
+                <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
+                  <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
+                  </li>
+                  <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
+                  </li>
+                  <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
+                    <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
+                      <div class="bx--nested-list__item--icon">
+                        <svg>
+                          <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
+                        </svg>
+                      </div>
+                    </a>
+                    <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                      <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
+                        <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+              <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
+                <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
+                  <svg class="bx--parent-item__link--taxonomy-icon">
+                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
+                  </svg>
+                  Example Parent Item
+                </a>
+              </li>
+            </ul>
+            <!-- END INFRASTRUCTURE MENU -->
+
+          </nav>
+        </div>
+
+
+      <div class="bx--global-header__title">
+        <a href="#" class="bx--global-header__title--logo" tabindex="0">
+          <img class="bx--logo__image" src="/globals/assets/bluemix-logo.svg"></img>
+          <h1 class="bx--logo__text">
+            IBM <span class="bx--logo__text--bold">Bluemix</span>
+          </h1>
+        </a>
+        <h4 class="bx--global-header__title--current-page">Apps</h4>
+      </div>
+      </div>
+
+      <!-- Global Header - Right Nav -->
+      <div class="bx--global-header__right-container">
+      <ul data-global-header-menu role="menubar" class="bx--global-header__menu" aria-hidden="false">
+        <li role="menuitem" class="bx--global-header__menu__item">
+          <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Catalog</a>
+        </li>
+        <li role="menuitem" class="bx--global-header__menu__item">
+          <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Support</a>
+        </li>
+        <li role="menuitem" class="bx--global-header__menu__item">
+          <ul role="menu" data-dropdown data-dropdown-type="navigation" class="bx--dropdown" tabindex="0">
+            <li class="bx--dropdown-text">Account</li>
+            <li aria-haspopup="true">
+              <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
+                <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Make A Payment</a></li>
+                <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Sales</a></li>
+                <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Billing</a></li>
+                <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Users</a></li>
+                <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">VPN Access</a></li>
+                <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Manage</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      </div>
+    </header>
+    <!-- End Global Header -->
+
+  </div>
+  <!-- End Unified Header -->
+{/content}
diff --git a/src/components/unified-header/unified-header.html b/src/components/unified-header/unified-header.html
deleted file mode 100644
index e7e7bc0f56eb..000000000000
--- a/src/components/unified-header/unified-header.html
+++ /dev/null
@@ -1,500 +0,0 @@
-<!-- Unified Header -->
-<div data-unified-header class="bx--unified-header bx--unified-header--apps" tabindex="0">
-
-  <!-- Super Global Header -->
-  <nav role="navigation" class="bx--top-nav" aria-label="Top Header">
-      <ul role="menubar" class="bx--top-nav__left-container" aria-hidden="false">
-        <li role="menuitem" class="bx--top-nav__left-container__item">
-          <a class="bx--top-nav__left-container__link" href="#" tabindex="0">
-            <svg class="bx--top-nav__left-container__link--icon">
-              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--header--help"></use>
-            </svg>
-            Docs
-          </a>
-        </li>
-      </ul>
-      <ul role="menubar" class="bx--top-nav__right-container">
-        <li data-trial class="bx--top-nav__right-container__item">
-          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-            <li class="bx--dropdown-text">29 Trial Days Remaining</li>
-            <svg class="bx--dropdown__arrow">
-              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-            </svg>
-            <li>
-              <ul class="bx--dropdown-list">
-                <li class="bx--dropdown__trial-content">
-                  <p class="bx--dropdown__trial-content--desc">Keep your account going by adding your credit card. Don’t worry. We won’t charge you unless you go over your free monthly allowance.</p>
-                  <button class='bx--btn' type='button'>Add credit card</button>
-                  <a href="#" class="bx--link">Apply promo code</a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li data-credit class="bx--top-nav__right-container__item">
-          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-            <li class="bx--dropdown-text">$132 Credit Expires 12/6</li>
-            <li>
-              <svg class="bx--dropdown__arrow">
-                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-              </svg>
-            </li>
-            <li>
-              <ul class="bx--dropdown-list">
-                <li class="bx--dropdown-item bx--dropdown__credit-content">
-                  <div>
-                    <p class="bx--dropdown__credit-content--heading">Initial Credit Value</p>
-                    <p class="bx--dropdown__credit-content--desc">$200</p>
-                  </div>
-                  <div>
-                    <p class="bx--dropdown__credit-content--heading">Expires</p>
-                    <p class="bx--dropdown__credit-content--desc">12/25/2016</p>
-                  </div>
-                  <div>
-                    <p class="bx--dropdown__credit-content--heading">Spend Rate</p>
-                    <p class="bx--dropdown__credit-content--desc">$1.33/day</p>
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li role="menuitem" class="bx--top-nav__right-container__item">
-          <ul role="menu" data-profile-switcher class="bx--account-switcher">
-            <li tabindex="0" data-profile-switcher-toggle class="bx--account-switcher__toggle">
-              <p data-switcher-account-sl class="bx--account-switcher__toggle--text"></p>
-              <p data-switcher-account class="bx--account-switcher__toggle--text"></p>
-              <p class="bx--account-switcher__toggle--text">|</p>
-              <p data-switcher-region class="bx--account-switcher__toggle--text"></p>
-              <p data-switcher-org class="bx--account-switcher__toggle--text"></p>
-              <p data-switcher-space class="bx--account-switcher__toggle--text"></p>
-            </li>
-            <li role="menuitem" data-switcher-menu class="bx--account-switcher__menu__container">
-              <ul role="menu" class="bx--account-switcher__menu">
-                <li role="menuitem" class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Account</p>
-                  <ul role="menu" data-dropdown data-value="Logans_account_123456789_1234" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-account class="bx--dropdown-text">Logans_account_123456789_1234</li>
-                    <li>
-                      <svg class="bx--dropdown__arrow">
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                      </svg>
-                    </li>
-                    <li aria-haspopup="true" class="bx--dropdown--scroll">
-                      <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">TJs_accoqwejqwhekjqwgehgunt_54321</span></li>
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
-                          <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
-                            <span data-dropdown-account-sl-linked>sl123456</span>
-                              <svg class="bx--account-switcher__linked-icon">
-                                <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
-                              </svg>
-                            <span data-dropdown-account-linked>Logans_account_123456789_1234</span>
-                          </span>
-                        </li>
-                        <li role="menuitem" data-option data-value="all" class="bx--dropdown-item">
-                          <span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">
-                            <span data-dropdown-account-sl-linked>s7777</span>
-                            <svg class="bx--account-switcher__linked-icon">
-                              <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--link"></use>
-                            </svg>
-                            <span data-dropdown-account-linked>TJs_account_123456789_1234</span>
-                          </span>
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Region</p>
-                  <ul data-dropdown data-value="US South" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-region class="bx--dropdown-text">US South</li>
-                    <svg class="bx--dropdown__arrow">
-                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                    </svg>
-                    <li class="bx--dropdown--scroll">
-                      <ul class="bx--dropdown-list">
-                        <li data-option data-value="all" class="bx--dropdown-item"><span class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">US South</span></li>
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Sydney</span></li>
-                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">United Kingdom</span></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Organization</p>
-                  <ul data-dropdown data-value="Organization 1" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-org class="bx--dropdown-text">Organization 1</li>
-                    <svg class="bx--dropdown__arrow">
-                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                    </svg>
-                    <li class="bx--dropdown--scroll">
-                      <ul class="bx--dropdown-list">
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">someone_at_a_company@email.com</span></li>
-                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization q2332434341sddsf2</span></li>
-                        <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 3</span></li>
-                        <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 4</span></li>
-                        <li data-option data-value="router" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Organization 5</span></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <p class="bx--account-switcher__menu__item--title">Space</p>
-                  <ul data-dropdown data-value="Space 2" class="bx--dropdown" tabindex="0">
-                    <li data-dropdown-space class="bx--dropdown-text">Space 2</li>
-                    <svg class="bx--dropdown__arrow">
-                      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
-                    </svg>
-                    <li class="bx--dropdown--scroll">
-                      <ul class="bx--dropdown-list">
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Dev</span></li>
-                        <li data-option data-value="all" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 2</span></li>
-                        <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 3</span></li>
-                        <li data-option data-value="staging" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 4</span></li>
-                        <li data-option data-value="dea" class="bx--dropdown-item"><span  class="bx--dropdown-link" href="javascript:void(0)" tabindex="0">Space 5</span></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="bx--account-switcher__menu__item">
-                  <a href="#" class="bx--link">Manage Organizations</a>
-                  <a href="#" class="bx--link">Create A Space</a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-        <li class="bx--top-nav__right-container__item">
-          <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
-            <li data-top-nav-profile-image class="bx--dropdown-text--profile-image">
-              <div class="profile-image">
-                <svg class="bx--dropdown__profile-dropdown--picture">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
-                </svg>
-              </div>
-            </li>
-            <li class="bx--dropdown__profile-dropdown">
-              <ul class="bx--dropdown-list">
-                <li data-option data-value="all" class="bx--dropdown-item">
-                  <svg class="bx--dropdown__profile-dropdown--picture">
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--user"></use>
-                  </svg>
-                  <div class="bx--dropdown__profile-dropdown--information">
-                    <p>Erlich Bachman Erlich Bachman</p>
-                    <div class="bx--dropdown__profile-dropdown__container">
-                      <a class="bx--link" href="javascript:void(0)">Profile</a>
-                      <p>|</p>
-                      <a class="bx--link" href="javascript:void(0)">Log Out</a>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
-  <!-- End Super Global Header -->
-
-  <!-- Global Header -->
-  <header role="banner" class="bx--global-header">
-    <div class="bx--global-header__left-container">
-      <div class="bx--left-nav__trigger bx--left-nav__trigger--apps" data-left-nav-toggle="open" tabindex="0">
-        <div class="bx--left-nav__trigger--btn">
-          <span></span>
-        </div>
-      </div>
-      <div class="bx--global-header__left-nav bx--left-nav--active" data-left-nav-container aria-expanded="false">
-        <div class="bx--left-nav__close-row"></div>
-        <div data-left-nav-current-section="apps" class="bx--left-nav__header">
-          <svg data-left-nav-current-section-icon="apps" class="bx--left-nav__header--taxonomy-icon">
-            <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-          </svg>
-          <a data-left-nav-current-section-title tabindex="0" class="bx--left-nav__header--title">Apps</a>
-        </div>
-        <nav class="bx--left-nav" data-left-nav role="navigation" aria-label="Left Navigation">
-          <ul data-left-nav-sections class="bx--left-nav__sections">
-            <li data-left-nav-section="services" class="bx--left-nav__section bx--left-nav__section--services">
-              <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
-                <svg data-left-nav-section-icon="services" class="bx--left-nav__section--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                <span data-left-nav-section-link class="bx--left-nav__section--link">Services</span>
-              </a>
-            </li>
-            <li data-left-nav-section="infrastructure" class="bx--left-nav__section bx--left-nav__section--infrastructure" tabindex="0">
-              <a href="javascript:void(0)" class="bx--left-nav__section--anchor" tabindex="0">
-                <svg data-left-nav-section-icon="infrastructure" class="bx--left-nav__section--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                <span data-left-nav-section-link class="bx--left-nav__section--link">Infrastructure</span>
-              </a>
-            </li>
-          </ul>
-          <!-- APPLICATIONS MENU -->
-          <ul role="menubar" class="bx--left-nav__main-nav" data-left-nav-list="apps" aria-hidden="false">
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-                <div class="bx--parent-item__link--down-icon">
-                  <svg>
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
-                  </svg>
-                </div>
-              </a>
-              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
-                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
-                    <div class="bx--nested-list__item--icon">
-                      <svg>
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
-                      </svg>
-                    </div>
-                  </a>
-                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-          </ul>
-          <!-- END APPLICATIONS MENU -->
-
-          <!-- SERVICES MENU -->
-          <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="services" aria-hidden="true">
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-                <div class="bx--parent-item__link--down-icon">
-                  <svg>
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
-                  </svg>
-                </div>
-              </a>
-              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
-                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
-                    <div class="bx--nested-list__item--icon">
-                      <svg>
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
-                      </svg>
-                    </div>
-                  </a>
-                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-          </ul>
-          <!-- END SERVICES MENU -->
-
-          <!-- INFRASTRUCTURE MENU -->
-          <ul role="menubar" class="bx--left-nav__main-nav bx--left-nav__main-nav--hidden bx--left-nav__main-nav--top" data-left-nav-list="infrastructure" aria-hidden="true">
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item data-left-nav-item-with-children tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-                <div class="bx--parent-item__link--down-icon">
-                  <svg>
-                    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--down"></use>
-                  </svg>
-                </div>
-              </a>
-              <ul role="menu" class="bx--main-nav__nested-list" aria-hidden="true" data-left-nav-nested-list>
-                <li role="menuitem" class="bx--nested-list__item bx--active-list-item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item tabindex="-1">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item</a>
-                </li>
-                <li role="menuitem" class="bx--nested-list__item" data-left-nav-nested-item data-left-nav-has-flyout tabindex="-1" aria-haspopup="true">
-                  <a href="#" class="bx--nested-list__item--link" tabindex="-1" data-left-nav-item-link>Example Child Item
-                    <div class="bx--nested-list__item--icon">
-                      <svg>
-                        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--chevron--right"></use>
-                      </svg>
-                    </div>
-                  </a>
-                  <ul role="menu" class="bx--nested-list__flyout-menu" data-left-nav-flyout aria-hidden="true">
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                    <li role="menuitem" class="bx--flyout-menu__item" data-left-nav-flyout-item tabindex="-1">
-                      <a href="#" class="bx--flyout-menu__item--link">Example Flyout Item</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" aria-haspopup="true" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-            <li role="menuitem" class="bx--main-nav__parent-item" data-left-nav-item tabindex="0">
-              <a class="bx--parent-item__link" href="#" title="Example Item" tabindex="-1" data-left-nav-item-link>
-                <svg class="bx--parent-item__link--taxonomy-icon">
-                  <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--apps"></use>
-                </svg>
-                Example Parent Item
-              </a>
-            </li>
-          </ul>
-          <!-- END INFRASTRUCTURE MENU -->
-
-        </nav>
-      </div>
-
-
-    <div class="bx--global-header__title">
-      <a href="#" class="bx--global-header__title--logo" tabindex="0">
-        <img class="bx--logo__image" src="/globals/assets/bluemix-logo.svg"></img>
-        <h1 class="bx--logo__text">
-          IBM <span class="bx--logo__text--bold">Bluemix</span>
-        </h1>
-      </a>
-      <h4 class="bx--global-header__title--current-page">Apps</h4>
-    </div>
-    </div>
-
-    <!-- Global Header - Right Nav -->
-    <div class="bx--global-header__right-container">
-    <ul data-global-header-menu role="menubar" class="bx--global-header__menu" aria-hidden="false">
-      <li role="menuitem" class="bx--global-header__menu__item">
-        <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Catalog</a>
-      </li>
-      <li role="menuitem" class="bx--global-header__menu__item">
-        <a class="bx--global-header__menu__item--link" tabindex="0" href="javascript:void(0)">Support</a>
-      </li>
-      <li role="menuitem" class="bx--global-header__menu__item">
-        <ul role="menu" data-dropdown data-dropdown-type="navigation" class="bx--dropdown" tabindex="0">
-          <li class="bx--dropdown-text">Account</li>
-          <li aria-haspopup="true">
-            <ul role="menu" aria-hidden="true" class="bx--dropdown-list">
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Make A Payment</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Sales</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Billing</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Users</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">VPN Access</a></li>
-              <li role="menuitem" tabindex="0" data-option class="bx--dropdown-item"><a data-account-link class="bx--dropdown-link" href="javascript:void(0)">Manage</a></li>
-            </ul>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    </div>
-  </header>
-  <!-- End Global Header -->
-
-</div>
-<!-- End Unified Header -->
diff --git a/tests/spec/accordion_spec.js b/tests/spec/accordion_spec.js
index 2159348b05f8..90e06ea7cdb7 100644
--- a/tests/spec/accordion_spec.js
+++ b/tests/spec/accordion_spec.js
@@ -1,6 +1,6 @@
 import Accordion from '../../src/components/accordion/accordion';
-import HTML from '../../src/components/accordion/accordion.html';
-import LegacyHTML from '../../src/components/accordion/legacyaccordion.html';
+import HTML from '../../html/accordion/accordion.html';
+import LegacyHTML from '../../html/accordion/accordion--legacy.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test accordion', function() {
diff --git a/tests/spec/carousel_spec.js b/tests/spec/carousel_spec.js
index 3e9afd3c8659..cbf4e362d6a7 100644
--- a/tests/spec/carousel_spec.js
+++ b/tests/spec/carousel_spec.js
@@ -1,5 +1,5 @@
 import Carousel from '../../src/components/carousel/carousel';
-import HTML from '../../src/components/carousel/carousel.html';
+import HTML from '../../html/carousel/carousel.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Carousel', () => {
diff --git a/tests/spec/checkbox_spec.js b/tests/spec/checkbox_spec.js
index 99fcb483a1a1..d019b06ce62e 100644
--- a/tests/spec/checkbox_spec.js
+++ b/tests/spec/checkbox_spec.js
@@ -1,5 +1,5 @@
 import Checkbox from '../../src/components/checkbox/checkbox';
-import HTML from '../../src/components/checkbox/checkbox.html';
+import HTML from '../../html/checkbox/checkbox.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test Checkbox', function() {
diff --git a/tests/spec/content-switcher_spec.js b/tests/spec/content-switcher_spec.js
index f6e50c4b8134..14c5513da705 100644
--- a/tests/spec/content-switcher_spec.js
+++ b/tests/spec/content-switcher_spec.js
@@ -1,7 +1,7 @@
 import Promise, { promisify } from 'bluebird'; // For testing on browsers not supporting Promise
 import EventManager from '../utils/event-manager';
 import ContentSwitcher from '../../src/components/content-switcher/content-switcher';
-import HTML from '../../src/components/content-switcher/content-switcher.html';
+import HTML from '../../html/content-switcher/content-switcher.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test content switcher', function() {
diff --git a/tests/spec/data-table-v2_spec.js b/tests/spec/data-table-v2_spec.js
index eff9918dd2f5..24ec347494bc 100644
--- a/tests/spec/data-table-v2_spec.js
+++ b/tests/spec/data-table-v2_spec.js
@@ -1,7 +1,7 @@
 import EventManager from '../utils/event-manager';
 import DataTableV2 from '../../src/components/data-table-v2/data-table-v2';
-import HTML from '../../src/components/data-table-v2/data-table-v2.html';
-import ExpandableHTML from '../../src/components/data-table-v2/data-table-v2-expandable.html';
+import HTML from '../../html/data-table-v2/data-table-v2.html';
+import ExpandableHTML from '../../html/data-table-v2/data-table-v2--expandable.html';
 
 describe('Dropdown', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/data-table_spec.js b/tests/spec/data-table_spec.js
index 4ec8a66bb1f4..30337c23ab50 100644
--- a/tests/spec/data-table_spec.js
+++ b/tests/spec/data-table_spec.js
@@ -1,6 +1,6 @@
 import EventManager from '../utils/event-manager';
 import ResponsiveTable from '../../src/components/data-table/data-table';
-import HTML from '../../src/components/data-table/data-table.html';
+import HTML from '../../html/data-table/data-table.html';
 
 describe('Test responsive table', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/date-picker_spec.js b/tests/spec/date-picker_spec.js
index ffce17f4d645..e74360d052e0 100644
--- a/tests/spec/date-picker_spec.js
+++ b/tests/spec/date-picker_spec.js
@@ -1,6 +1,6 @@
 import DatePicker from '../../src/components/date-picker/date-picker';
-import singleCalHTML from '../../src/components/date-picker/date-picker--single.html';
-import rangeCalHTML from '../../src/components/date-picker/date-picker--range.html';
+import singleCalHTML from '../../html/date-picker/date-picker--single.html';
+import rangeCalHTML from '../../html/date-picker/date-picker--range.html';
 
 describe('Test date picker', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/file-uploader_spec.js b/tests/spec/file-uploader_spec.js
index 3d988af52641..2054d32da0b9 100644
--- a/tests/spec/file-uploader_spec.js
+++ b/tests/spec/file-uploader_spec.js
@@ -1,5 +1,5 @@
 import FileUploader from '../../src/components/file-uploader/file-uploader';
-import HTML from '../../src/components/file-uploader/file-uploader.html';
+import HTML from '../../html/file-uploader/file-uploader.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('File Uploader', function() {
diff --git a/tests/spec/floating-menu_spec.js b/tests/spec/floating-menu_spec.js
index e51b3360bd6a..731db4b53cb2 100644
--- a/tests/spec/floating-menu_spec.js
+++ b/tests/spec/floating-menu_spec.js
@@ -1,6 +1,6 @@
 import EventManager from '../utils/event-manager';
 import FloatingMenu from '../../src/components/floating-menu/floating-menu';
-import HTML from '../../src/components/overflow-menu/overflow-menu.html'; // Use ul.bx--overflow-menu-options for testing
+import HTML from '../../html/overflow-menu/overflow-menu.html'; // Use ul.bx--overflow-menu-options for testing
 
 describe('Test floating menu', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/interior-left-nav_spec.js b/tests/spec/interior-left-nav_spec.js
index 9d7ee36ea2f9..79d39c186d12 100644
--- a/tests/spec/interior-left-nav_spec.js
+++ b/tests/spec/interior-left-nav_spec.js
@@ -1,6 +1,6 @@
 import InteriorLeftNav from '../../src/components/interior-left-nav/interior-left-nav';
-import InteriorLeftNavHtml from '../../src/components/interior-left-nav/interior-left-nav.html';
-import KeepOpen from '../../src/components/interior-left-nav/interior-left-nav-keep-open.html';
+import InteriorLeftNavHtml from '../../html/interior-left-nav/interior-left-nav.html';
+import KeepOpen from '../../html/interior-left-nav/interior-left-nav--keep-open.html';
 
 describe('Test interior left nav', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/lightbox_spec.js b/tests/spec/lightbox_spec.js
index fff15ebd5987..be5e819f8e4c 100644
--- a/tests/spec/lightbox_spec.js
+++ b/tests/spec/lightbox_spec.js
@@ -1,5 +1,5 @@
 import Lightbox from '../../src/components/lightbox/lightbox';
-import HTML from '../../src/components/lightbox/lightbox.html';
+import HTML from '../../html/lightbox/lightbox.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Lightbox', () => {
diff --git a/tests/spec/loading_spec.js b/tests/spec/loading_spec.js
index 691215a21862..48f3a1a01450 100644
--- a/tests/spec/loading_spec.js
+++ b/tests/spec/loading_spec.js
@@ -1,5 +1,5 @@
 import Loading from '../../src/components/loading/loading';
-import LoadingHTML from '../../src/components/loading/loading.html';
+import LoadingHTML from '../../html/loading/loading.html';
 
 describe('Test Loading', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/modal_spec.js b/tests/spec/modal_spec.js
index 29d507619fb3..cebb1cc21d8f 100644
--- a/tests/spec/modal_spec.js
+++ b/tests/spec/modal_spec.js
@@ -1,5 +1,5 @@
 import Modal from '../../src/components/modal/modal';
-import ModalHtml from '../../src/components/modal/modal.html';
+import ModalHtml from '../../html/modal/modal.html';
 import EventManager from '../utils/event-manager';
 import flattenOptions from '../utils/flatten-options';
 
diff --git a/tests/spec/notification_spec.js b/tests/spec/notification_spec.js
index 9b8954aed187..37bc721dd616 100644
--- a/tests/spec/notification_spec.js
+++ b/tests/spec/notification_spec.js
@@ -1,6 +1,6 @@
 import EventManager from '../utils/event-manager';
 import Notification from '../../src/components/notification/notification';
-import HTML from '../../src/components/notification/toast-notification.html';
+import HTML from '../../html/notification/toast-notification.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('ToastNotification', function() {
diff --git a/tests/spec/number-input_spec.js b/tests/spec/number-input_spec.js
index daab2bed30ff..adbd982f8e4f 100644
--- a/tests/spec/number-input_spec.js
+++ b/tests/spec/number-input_spec.js
@@ -1,7 +1,7 @@
 import Promise from 'bluebird'; // For testing on browsers not supporting Promise
 import EventManager from '../utils/event-manager';
 import NumberInput from '../../src/components/number-input/number-input';
-import HTML from '../../src/components/number-input/number-input.html';
+import HTML from '../../html/number-input/number-input.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test Number Input', function() {
diff --git a/tests/spec/overflow-menu_spec.js b/tests/spec/overflow-menu_spec.js
index b92923ecdcf3..8d37f7ec4fa5 100644
--- a/tests/spec/overflow-menu_spec.js
+++ b/tests/spec/overflow-menu_spec.js
@@ -1,6 +1,6 @@
 import EventManager from '../utils/event-manager';
 import OverflowMenu from '../../src/components/overflow-menu/overflow-menu';
-import HTML from '../../src/components/overflow-menu/overflow-menu.html';
+import HTML from '../../html/overflow-menu/overflow-menu.html';
 
 describe('Test Overflow menu', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/profile-switcher_spec.js b/tests/spec/profile-switcher_spec.js
index d509bfdace1d..c1d98d696a0b 100644
--- a/tests/spec/profile-switcher_spec.js
+++ b/tests/spec/profile-switcher_spec.js
@@ -1,5 +1,5 @@
 import ProfileSwitcher from '../../src/components/unified-header/profile-switcher';
-import unifiedHeaderHtml from '../../src/components/unified-header/unified-header.html';
+import unifiedHeaderHtml from '../../html/unified-header/unified-header.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test profile switcher', function() {
diff --git a/tests/spec/progress-indicator_spec.js b/tests/spec/progress-indicator_spec.js
index 946f85874df6..1c3c67921141 100644
--- a/tests/spec/progress-indicator_spec.js
+++ b/tests/spec/progress-indicator_spec.js
@@ -1,6 +1,6 @@
 import '../../demo/polyfills/custom-event';
 import ProgressIndicator from '../../src/components/progress-indicator/progress-indicator';
-import HTML from '../../src/components/progress-indicator/progress-indicator.html';
+import HTML from '../../html/progress-indicator/progress-indicator.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('ProgressIndicator', function() {
diff --git a/tests/spec/search_spec.js b/tests/spec/search_spec.js
index d0d431f8ff26..6ee8479050db 100644
--- a/tests/spec/search_spec.js
+++ b/tests/spec/search_spec.js
@@ -1,5 +1,5 @@
 import Search from '../../src/components/search/search';
-import searchHTML from '../../src/components/search/search-large.html';
+import searchHTML from '../../html/search/search--large.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test Search', function() {
diff --git a/tests/spec/slider_spec.js b/tests/spec/slider_spec.js
index f12cea8b77de..a336e800f9b2 100644
--- a/tests/spec/slider_spec.js
+++ b/tests/spec/slider_spec.js
@@ -1,6 +1,6 @@
 import createMockRaf from 'mock-raf';
 import Slider from '../../src/components/slider/slider';
-import SliderHTML from '../../src/components/slider/slider.html';
+import SliderHTML from '../../html/slider/slider.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test slider', function() {
diff --git a/tests/spec/structured-list_spec.js b/tests/spec/structured-list_spec.js
index cfbbf0358f98..fab10a4a7f2c 100644
--- a/tests/spec/structured-list_spec.js
+++ b/tests/spec/structured-list_spec.js
@@ -1,5 +1,5 @@
 import StructuredList from '../../src/components/structured-list/structured-list';
-import HTML from '../../src/components/structured-list/structured-list--selection.html';
+import HTML from '../../html/structured-list/structured-list--selection.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('StructuredList', function() {
diff --git a/tests/spec/tile_spec.js b/tests/spec/tile_spec.js
index 5bcc4c8ad1af..2b58c461be42 100644
--- a/tests/spec/tile_spec.js
+++ b/tests/spec/tile_spec.js
@@ -1,7 +1,7 @@
 import Tile from '../../src/components/tile/tile';
-import clickableTile from '../../src/components/tile/tile--clickable.html';
-import expandableTile from '../../src/components/tile/tile--expandable.html';
-import selectableTile from '../../src/components/tile/tile--selectable.html';
+import clickableTile from '../../html/tile/tile--clickable.html';
+import expandableTile from '../../html/tile/tile--expandable.html';
+import selectableTile from '../../html/tile/tile--selectable.html';
 import flattenOptions from '../utils/flatten-options';
 
 describe('Test tile', function() {
diff --git a/tests/spec/toolbar_spec.js b/tests/spec/toolbar_spec.js
index 4ccf108d45f7..4d97e55d24a1 100644
--- a/tests/spec/toolbar_spec.js
+++ b/tests/spec/toolbar_spec.js
@@ -1,6 +1,6 @@
 import '../../demo/polyfills/custom-event';
 import Toolbar from '../../src/components/toolbar/toolbar';
-import ToolbarHTML from '../../src/components/toolbar/toolbar.html';
+import ToolbarHTML from '../../html/toolbar/toolbar.html';
 
 describe('Test toolbar', function() {
   describe('Constructor', function() {
diff --git a/tests/spec/tooltip_spec.js b/tests/spec/tooltip_spec.js
index 905db3bb7d6b..23685a7e915a 100644
--- a/tests/spec/tooltip_spec.js
+++ b/tests/spec/tooltip_spec.js
@@ -1,5 +1,5 @@
 import Tooltip from '../../src/components/tooltip/tooltip';
-import HTML from '../../src/components/tooltip/tooltip.html';
+import HTML from '../../html/tooltip/tooltip.html';
 
 describe('Test tooltip', function() {
   describe('Constructor', function() {
diff --git a/tools/templates.js b/tools/templates.js
new file mode 100644
index 000000000000..e2fd12421532
--- /dev/null
+++ b/tools/templates.js
@@ -0,0 +1,112 @@
+'use strict';
+
+const globby = require('globby');
+const { promisify } = require('bluebird');
+const fs = require('fs');
+const path = require('path');
+const dust = require('dustjs-linkedin');
+const helpers = require('dustjs-helpers');
+const Fractal = require('@frctl/fractal');
+
+const readFile = promisify(fs.readFile);
+const render = promisify(dust.render);
+
+dust.config.whitespace = true;
+Object.assign(dust.helpers, helpers);
+
+/**
+ * @param {string} glob A glob.
+ * @returns {Set<string, string>} A set of file contents matching the given glob, keyed by the basename of the file.
+ */
+const getContents = glob =>
+  globby(glob).then(filePaths => {
+    if (filePaths.length === 0) {
+      return undefined;
+    }
+    const contents = new Map();
+    return Promise.all(
+      filePaths.map(filePath =>
+        readFile(filePath, { encoding: 'utf8' }).then(content => {
+          contents.set(path.basename(filePath, '.dust'), content);
+        })
+      )
+    ).then(() => contents);
+  });
+
+/**
+ * Loads Dust templates and compiles them.
+ * @param {string} glob A glob.
+ * @returns {Set<string, string>} A set of file contents matching the given glob, keyed by the basename of the file.
+ */
+const loadContents = glob =>
+  getContents(glob).then(contents => {
+    contents.forEach((content, templateName) => {
+      dust.loadSource(dust.compile(content, templateName));
+    });
+    return contents;
+  });
+
+const fractal = Fractal.create();
+fractal.components.set('path', path.join(__dirname, '../src/components'));
+fractal.components.set('ext', '.dust');
+fractal.docs.set('path', path.join(__dirname, '../docs'));
+
+const promiseCache = Promise.all([fractal.load(), loadContents(path.resolve(__dirname, '../{demo,src}/**/*.dust'))]).then(
+  ([sources, contents]) => {
+    const [componentSource, docSource] = sources;
+    return {
+      componentSource,
+      docSource,
+      contents,
+    };
+  }
+);
+
+/**
+ * @param {Object} [options] The options.
+ * @param {string} [options.preview] The preview Dust template name to force. Useful to force an empty preview.
+ * @param {string} [options.defauktPreview] The preview Dust template name working as the default one.
+ * @param {boolean} [options.concat] Setting `true` here returns rendered contents all concatenated, instead of returning a map.
+ * @param {string} [handle]
+ *   The internal component name seen in Fractal.
+ *   Can be of a component or of a variant, or left empty.
+ *   Leaving `handle` empty renders all components.
+ * @returns {string|Map<Variant, string>} The list of rendered template, keyed by Fractal `Variant` object.
+ */
+const renderComponent = ({ preview, defaultPreview, concat } = {}, handle) =>
+  promiseCache.then(({ componentSource, contents }) => {
+    const promises = [];
+    const renderedItems = new Map();
+    componentSource.forEach(metadata => {
+      const items = metadata.isCollection ? metadata : !metadata.isCollated && metadata.variants && metadata.variants();
+      if (items) {
+        const filteredItems = !handle || handle === metadata.handle ? items : items.filter(item => handle === item.handle);
+        filteredItems.forEach(item => {
+          const { handle: itemHandle, baseHandle, context } = item;
+          const template = contents.has(itemHandle) ? itemHandle : baseHandle;
+          promises.push(
+            render(template, Object.assign({}, context, { preview: preview || item.preview || defaultPreview })).then(
+              rendered => {
+                renderedItems.set(item, rendered);
+              }
+            )
+          );
+        });
+      }
+    });
+    return Promise.all(promises).then(() => {
+      if (!concat) {
+        return renderedItems;
+      }
+      const accumulated = [];
+      renderedItems.forEach(rendered => {
+        accumulated.push(rendered);
+      });
+      return accumulated.join('\n');
+    });
+  });
+
+module.exports = {
+  promiseCache,
+  render: renderComponent,
+};