From b29c1077e572ed6b0397c03c4c96820583686f90 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 21 Feb 2018 23:54:30 +0100
Subject: [PATCH] [docs] Improve readability

---
 docs/src/modules/components/AppDrawer.js      | 10 ++--
 .../modules/components/AppDrawerNavItem.js    | 32 ++++-------
 .../src/modules/components/MarkdownElement.js | 21 ++++++-
 docs/src/modules/utils/generateMarkdown.js    | 10 +++-
 pages/api/app-bar.md                          |  8 +--
 pages/api/avatar.md                           | 16 +++---
 pages/api/backdrop.md                         |  8 +--
 pages/api/badge.md                            | 10 ++--
 pages/api/bottom-navigation-action.md         | 10 ++--
 pages/api/bottom-navigation.md                | 10 ++--
 pages/api/button-base.md                      | 20 +++----
 pages/api/button.md                           | 24 ++++----
 pages/api/card-actions.md                     |  6 +-
 pages/api/card-content.md                     |  4 +-
 pages/api/card-header.md                      | 12 ++--
 pages/api/card-media.md                       |  8 +--
 pages/api/card.md                             |  2 +-
 pages/api/checkbox.md                         | 32 +++++------
 pages/api/chip.md                             | 12 ++--
 pages/api/circular-progress.md                | 16 +++---
 pages/api/click-away-listener.md              |  4 +-
 pages/api/collapse.md                         | 12 ++--
 pages/api/dialog-actions.md                   |  4 +-
 pages/api/dialog-content-text.md              |  4 +-
 pages/api/dialog-content.md                   |  4 +-
 pages/api/dialog-title.md                     |  6 +-
 pages/api/dialog.md                           | 40 ++++++-------
 pages/api/divider.md                          | 10 ++--
 pages/api/drawer.md                           | 22 ++++----
 pages/api/expansion-panel-actions.md          |  4 +-
 pages/api/expansion-panel-details.md          |  4 +-
 pages/api/expansion-panel-summary.md          |  6 +-
 pages/api/expansion-panel.md                  | 14 ++---
 pages/api/fade.md                             |  6 +-
 pages/api/form-control-label.md               | 18 +++---
 pages/api/form-control.md                     | 16 +++---
 pages/api/form-group.md                       |  6 +-
 pages/api/form-helper-text.md                 | 12 ++--
 pages/api/form-label.md                       | 14 ++---
 pages/api/grid-list-tile-bar.md               | 12 ++--
 pages/api/grid-list-tile.md                   | 10 ++--
 pages/api/grid-list.md                        | 12 ++--
 pages/api/grid.md                             | 36 ++++++------
 pages/api/grow.md                             |  6 +-
 pages/api/hidden.md                           | 28 +++++-----
 pages/api/icon-button.md                      | 10 ++--
 pages/api/icon.md                             |  8 +--
 pages/api/input-adornment.md                  | 10 ++--
 pages/api/input-label.md                      | 20 +++----
 pages/api/input.md                            | 52 ++++++++---------
 pages/api/linear-progress.md                  | 10 ++--
 pages/api/list-item-avatar.md                 |  4 +-
 pages/api/list-item-icon.md                   |  4 +-
 pages/api/list-item-secondary-action.md       |  4 +-
 pages/api/list-item-text.md                   | 10 ++--
 pages/api/list-item.md                        | 18 +++---
 pages/api/list-subheader.md                   | 12 ++--
 pages/api/list.md                             | 12 ++--
 pages/api/menu-item.md                        |  8 +--
 pages/api/menu-list.md                        |  2 +-
 pages/api/menu.md                             | 28 +++++-----
 pages/api/mobile-stepper.md                   | 14 ++---
 pages/api/modal.md                            | 36 ++++++------
 pages/api/mui-theme-provider.md               |  8 +--
 pages/api/paper.md                            | 10 ++--
 pages/api/popover.md                          | 46 +++++++--------
 pages/api/portal.md                           |  6 +-
 pages/api/radio-group.md                      |  8 +--
 pages/api/radio.md                            | 28 +++++-----
 pages/api/reboot.md                           |  2 +-
 pages/api/select.md                           | 30 +++++-----
 pages/api/slide.md                            |  8 +--
 pages/api/snackbar-content.md                 |  6 +-
 pages/api/snackbar.md                         | 40 ++++++-------
 pages/api/step-button.md                      |  6 +-
 pages/api/step-content.md                     |  6 +-
 pages/api/step-icon.md                        |  8 +--
 pages/api/step-label.md                       | 10 ++--
 pages/api/step.md                             |  8 +--
 pages/api/stepper.md                          | 14 ++---
 pages/api/svg-icon.md                         | 14 ++---
 pages/api/switch.md                           | 28 +++++-----
 pages/api/tab.md                              | 10 ++--
 pages/api/table-body.md                       |  4 +-
 pages/api/table-cell.md                       | 16 +++---
 pages/api/table-footer.md                     |  4 +-
 pages/api/table-head.md                       |  4 +-
 pages/api/table-pagination.md                 | 26 ++++-----
 pages/api/table-row.md                        | 10 ++--
 pages/api/table-sort-label.md                 |  8 +--
 pages/api/table.md                            |  6 +-
 pages/api/tabs.md                             | 28 +++++-----
 pages/api/text-field.md                       | 56 +++++++++----------
 pages/api/toolbar.md                          |  6 +-
 pages/api/tooltip.md                          | 28 +++++-----
 pages/api/typography.md                       | 20 +++----
 pages/api/zoom.md                             |  6 +-
 pages/lab/api/speed-dial-action.md            | 10 ++--
 pages/lab/api/speed-dial-icon.md              |  6 +-
 pages/lab/api/speed-dial.md                   | 22 ++++----
 src/Grid/Grid.js                              |  2 +-
 101 files changed, 708 insertions(+), 693 deletions(-)

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index cecd244a523f44..716faf1ef2bbf8 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import List from 'material-ui/List';
-import Toolbar from 'material-ui/Toolbar';
 import Drawer from 'material-ui/Drawer';
 import Typography from 'material-ui/Typography';
 import Divider from 'material-ui/Divider';
@@ -29,6 +28,9 @@ const styles = theme => ({
     display: 'flex',
   },
   toolbar: {
+    ...theme.mixins.toolbar,
+    paddingLeft: theme.spacing.unit * 3,
+    display: 'flex',
     flexGrow: 1,
     flexDirection: 'column',
     alignItems: 'flex-start',
@@ -88,7 +90,7 @@ function AppDrawer(props, context) {
   const drawer = (
     <div className={classes.nav}>
       <div className={classes.toolbarIe11}>
-        <Toolbar className={classes.toolbar}>
+        <div className={classes.toolbar}>
           <Link className={classes.title} href="/" onClick={onClose}>
             <Typography variant="title" color="inherit">
               Material-UI
@@ -102,9 +104,9 @@ function AppDrawer(props, context) {
               <Typography variant="caption">{`v${process.env.MATERIAL_UI_VERSION}`}</Typography>
             </Link>
           ) : null}
-          <Divider absolute />
-        </Toolbar>
+        </div>
       </div>
+      <Divider />
       {renderNavItems({ props, pages: context.pages, activePage: context.activePage, depth: 0 })}
     </div>
   );
diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
index b4e57bda3834bd..d85adf2d81514b 100644
--- a/docs/src/modules/components/AppDrawerNavItem.js
+++ b/docs/src/modules/components/AppDrawerNavItem.js
@@ -1,40 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'docs/src/modules/components/Link';
-import classNames from 'classnames';
 import { withStyles } from 'material-ui/styles';
 import { ListItem } from 'material-ui/List';
 import Button from 'material-ui/Button';
 import Collapse from 'material-ui/transitions/Collapse';
 
 const styles = theme => ({
-  button: theme.mixins.gutters({
-    borderRadius: 0,
-    justifyContent: 'flex-start',
-    textTransform: 'none',
-    width: '100%',
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.shortest,
-    }),
-    '&:hover': {
-      textDecoration: 'none',
-    },
-  }),
   item: {
-    ...theme.typography.body2,
     display: 'block',
     paddingTop: 0,
     paddingBottom: 0,
   },
-  leaf: {
-    fontWeight: theme.typography.fontWeightRegular,
+  itemLeaf: {
     display: 'flex',
     paddingTop: 0,
     paddingBottom: 0,
   },
-  leafButton: {
+  button: {
+    justifyContent: 'flex-start',
+    textTransform: 'none',
+    width: '100%',
+  },
+  buttonLeaf: {
+    justifyContent: 'flex-start',
+    textTransform: 'none',
+    width: '100%',
     color: theme.palette.text.secondary,
-    fontSize: theme.typography.pxToRem(13),
   },
   active: {
     color: theme.palette.text.primary,
@@ -74,12 +66,12 @@ class AppDrawerNavItem extends React.Component {
 
     if (href) {
       return (
-        <ListItem className={classes.leaf} disableGutters {...other}>
+        <ListItem className={classes.itemLeaf} disableGutters {...other}>
           <Button
             component={props => (
               <Link variant="button" activeClassName={classes.active} href={href} {...props} />
             )}
-            className={classNames(classes.button, classes.leafButton)}
+            className={classes.buttonLeaf}
             disableRipple
             onClick={onClick}
             style={style}
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 4a4f6a4ce38a3c..3ec7af1a949d2c 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -163,14 +163,31 @@ const styles = theme => ({
       borderCollapse: 'collapse',
       borderSpacing: 0,
       overflow: 'hidden',
+      '& .prop-name': {
+        fontSize: 13,
+        fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
+      },
+      '& .required': {
+        color: theme.palette.type === 'light' ? '#008900' : '#65a665',
+      },
+      '& .prop-type': {
+        fontSize: 13,
+        fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
+        color: theme.palette.type === 'light' ? '#a65e97' : '#bd86b0',
+      },
+      '& .prop-default': {
+        fontSize: 13,
+        fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
+        borderBottom: `1px dotted ${theme.palette.text.hint}`,
+      },
     },
     '& thead': {
-      fontSize: 13,
+      fontSize: 14,
       fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.text.secondary,
     },
     '& tbody': {
-      fontSize: 13,
+      fontSize: 14,
       lineHeight: 1.5,
       color: theme.palette.text.primary,
     },
diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
index 7d0e734e62bcfa..7e699482631761 100644
--- a/docs/src/modules/utils/generateMarkdown.js
+++ b/docs/src/modules/utils/generateMarkdown.js
@@ -170,11 +170,15 @@ function generateProps(reactAPI) {
     let defaultValue = '';
 
     if (prop.defaultValue) {
-      defaultValue = escapeCell(prop.defaultValue.value.replace(/\n/g, ''));
+      defaultValue = `<span class="prop-default">${escapeCell(
+        prop.defaultValue.value.replace(/\n/g, ''),
+      )}</span>`;
     }
 
     if (prop.required) {
-      propRaw = `<span style="color: #31a148">${propRaw}\u00a0*</span>`;
+      propRaw = `<span class="prop-name required">${propRaw}\u00a0*</span>`;
+    } else {
+      propRaw = `<span class="prop-name">${propRaw}</span>`;
     }
 
     if (prop.type.name === 'custom') {
@@ -183,7 +187,7 @@ function generateProps(reactAPI) {
       }
     }
 
-    textProps += `| ${propRaw} | ${generatePropType(
+    textProps += `| ${propRaw} | <span class="prop-type">${generatePropType(
       prop.type,
     )} | ${defaultValue} | ${description} |\n`;
 
diff --git a/pages/api/app-bar.md b/pages/api/app-bar.md
index d6ee823b05ce2e..4eda1104353e7c 100644
--- a/pages/api/app-bar.md
+++ b/pages/api/app-bar.md
@@ -12,10 +12,10 @@ filename: /src/AppBar/AppBar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'default'<br> | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
-| position | enum:&nbsp;'fixed'&nbsp;&#124;<br>&nbsp;'absolute'&nbsp;&#124;<br>&nbsp;'sticky'&nbsp;&#124;<br>&nbsp;'static'<br> | 'fixed' | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'default'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'fixed'&nbsp;&#124;<br>&nbsp;'absolute'&nbsp;&#124;<br>&nbsp;'sticky'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'fixed'</span> | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/avatar.md b/pages/api/avatar.md
index 80385426eeee58..e282bb1cc4ef35 100644
--- a/pages/api/avatar.md
+++ b/pages/api/avatar.md
@@ -12,14 +12,14 @@ filename: /src/Avatar/Avatar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| alt | string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
-| children | node |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| imgProps | object |  | Properties applied to the `img` element when the component is used to display an image. |
-| sizes | string |  | The `sizes` attribute for the `img` element. |
-| src | string |  | The `src` attribute for the `img` element. |
-| srcSet | string |  | The `srcSet` attribute for the `img` element. |
+| <span class="prop-name">alt</span> | <span class="prop-type">string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">imgProps</span> | <span class="prop-type">object |  | Properties applied to the `img` element when the component is used to display an image. |
+| <span class="prop-name">sizes</span> | <span class="prop-type">string |  | The `sizes` attribute for the `img` element. |
+| <span class="prop-name">src</span> | <span class="prop-type">string |  | The `src` attribute for the `img` element. |
+| <span class="prop-name">srcSet</span> | <span class="prop-type">string |  | The `srcSet` attribute for the `img` element. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/backdrop.md b/pages/api/backdrop.md
index 7cc02557562acd..dfcbf0cb6a29f1 100644
--- a/pages/api/backdrop.md
+++ b/pages/api/backdrop.md
@@ -12,10 +12,10 @@ filename: /src/Modal/Backdrop.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the backdrop is open. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">invisible</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the backdrop is open. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/badge.md b/pages/api/badge.md
index a6e0e932861888..22cc99c423a3d0 100644
--- a/pages/api/badge.md
+++ b/pages/api/badge.md
@@ -12,11 +12,11 @@ filename: /src/Badge/Badge.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">badgeContent *</span> | node |  | The content rendered within the badge. |
-| <span style="color: #31a148">children *</span> | node |  | The badge will be added relative to this node. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'span' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name required">badgeContent *</span> | <span class="prop-type">node |  | The content rendered within the badge. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The badge will be added relative to this node. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/bottom-navigation-action.md b/pages/api/bottom-navigation-action.md
index cc7d693a059a91..f6a9b5fa973324 100644
--- a/pages/api/bottom-navigation-action.md
+++ b/pages/api/bottom-navigation-action.md
@@ -12,11 +12,11 @@ filename: /src/BottomNavigation/BottomNavigationAction.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| icon | node |  | The icon element. |
-| label | node |  | The label element. |
-| showLabel | bool |  | If `true`, the BottomNavigationAction will show its label. |
-| value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon element. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |  | The label element. |
+| <span class="prop-name">showLabel</span> | <span class="prop-type">bool |  | If `true`, the BottomNavigationAction will show its label. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/bottom-navigation.md b/pages/api/bottom-navigation.md
index 94fba3d01d19a5..6854c9bd9b2bfd 100644
--- a/pages/api/bottom-navigation.md
+++ b/pages/api/bottom-navigation.md
@@ -12,11 +12,11 @@ filename: /src/BottomNavigation/BottomNavigation.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| onChange | func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
-| showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
-| value | any |  | The value of the currently selected `BottomNavigationAction`. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
+| <span class="prop-name">showLabels</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |  | The value of the currently selected `BottomNavigationAction`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/button-base.md b/pages/api/button-base.md
index 91a7023cda5fb0..e17c221fcdfea5 100644
--- a/pages/api/button-base.md
+++ b/pages/api/button-base.md
@@ -14,16 +14,16 @@ It contains a load of style reset and some focus/ripple logic.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| buttonRef | func |  | Use that property to pass a ref callback to the native button component. |
-| centerRipple | bool | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
-| disabled | bool |  | If `true`, the base button will be disabled. |
-| disableRipple | bool | false | If `true`, the ripple effect will be disabled. |
-| focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
-| keyboardFocusedClassName | string |  | The CSS class applied while the component is keyboard focused. |
-| onKeyboardFocus | func |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
+| <span class="prop-name">buttonRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native button component. |
+| <span class="prop-name">centerRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the base button will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">focusRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
+| <span class="prop-name">keyboardFocusedClassName</span> | <span class="prop-type">string |  | The CSS class applied while the component is keyboard focused. |
+| <span class="prop-name">onKeyboardFocus</span> | <span class="prop-type">func |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/button.md b/pages/api/button.md
index a52f3c87a9690f..33e70e0559388a 100644
--- a/pages/api/button.md
+++ b/pages/api/button.md
@@ -12,18 +12,18 @@ filename: /src/Button/Button.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the button. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
-| disabled | bool | false | If `true`, the button will be disabled. |
-| disableFocusRipple | bool | false | If `true`, the  keyboard focus ripple will be disabled. `disableRipple` must also be true. |
-| disableRipple | bool | false | If `true`, the ripple effect will be disabled. |
-| fullWidth | bool | false | If `true`, the button will take up the full width of its container. |
-| href | string |  | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
-| mini | bool | false | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. |
-| size | enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'&nbsp;&#124;<br>&nbsp;'large'<br> | 'medium' | The size of the button. `small` is equivalent to the dense button styling. |
-| variant | enum:&nbsp;'flat'&nbsp;&#124;<br>&nbsp;'raised'&nbsp;&#124;<br>&nbsp;'fab'<br> | 'flat' | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the button. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
+| <span class="prop-name">disableFocusRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the  keyboard focus ripple will be disabled. `disableRipple` must also be true. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the button will take up the full width of its container. |
+| <span class="prop-name">href</span> | <span class="prop-type">string |  | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
+| <span class="prop-name">mini</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. |
+| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'&nbsp;&#124;<br>&nbsp;'large'<br> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'flat'&nbsp;&#124;<br>&nbsp;'raised'&nbsp;&#124;<br>&nbsp;'fab'<br> | <span class="prop-default">'flat'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/card-actions.md b/pages/api/card-actions.md
index 4e72102c65af51..015c1881c77c15 100644
--- a/pages/api/card-actions.md
+++ b/pages/api/card-actions.md
@@ -12,9 +12,9 @@ filename: /src/Card/CardActions.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableActionSpacing | bool | false | If `true`, the card actions do not have additional margin. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableActionSpacing</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the card actions do not have additional margin. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/card-content.md b/pages/api/card-content.md
index c35a5211f0f9a4..5fb2ac46e21655 100644
--- a/pages/api/card-content.md
+++ b/pages/api/card-content.md
@@ -12,8 +12,8 @@ filename: /src/Card/CardContent.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/card-header.md b/pages/api/card-header.md
index db3b22e9a8c791..5029c057cd4959 100644
--- a/pages/api/card-header.md
+++ b/pages/api/card-header.md
@@ -12,12 +12,12 @@ filename: /src/Card/CardHeader.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| action | node |  | The action to display in the card header. |
-| avatar | node |  | The Avatar for the Card Header. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| subheader | node |  | The content of the component. |
-| title | node |  | The content of the Card Title. |
+| <span class="prop-name">action</span> | <span class="prop-type">node |  | The action to display in the card header. |
+| <span class="prop-name">avatar</span> | <span class="prop-type">node |  | The Avatar for the Card Header. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">subheader</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">title</span> | <span class="prop-type">node |  | The content of the Card Title. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/card-media.md b/pages/api/card-media.md
index eb36b9024cbb8c..7618f129b21727 100644
--- a/pages/api/card-media.md
+++ b/pages/api/card-media.md
@@ -12,10 +12,10 @@ filename: /src/Card/CardMedia.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | Component for rendering image. Either a string to use a DOM element or a component. |
-| image | string |  | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. |
-| src | string |  | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | Component for rendering image. Either a string to use a DOM element or a component. |
+| <span class="prop-name">image</span> | <span class="prop-type">string |  | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. |
+| <span class="prop-name">src</span> | <span class="prop-type">string |  | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/card.md b/pages/api/card.md
index ef3cc14a737ad4..a7622313b44641 100644
--- a/pages/api/card.md
+++ b/pages/api/card.md
@@ -12,7 +12,7 @@ filename: /src/Card/Card.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| raised | bool | false | If `true`, the card will use raised styling. |
+| <span class="prop-name">raised</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the card will use raised styling. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md
index 27a7ad956de748..7f2f25dc089681 100644
--- a/pages/api/checkbox.md
+++ b/pages/api/checkbox.md
@@ -12,22 +12,22 @@ filename: /src/Checkbox/Checkbox.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| checked | union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
-| checkedIcon | node |  | The icon to display when the component is checked. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool |  | If `true`, the switch will be disabled. |
-| disableRipple | bool |  | If `true`, the ripple effect will be disabled. |
-| icon | node |  | The icon to display when the component is unchecked. |
-| id | string |  | The id of the `input` element. |
-| indeterminate | bool | false | If `true`, the component appears indeterminate. |
-| indeterminateIcon | node | &lt;IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. |
-| inputProps | object |  | Properties applied to the `input` element. |
-| inputRef | func |  | Use that property to pass a ref callback to the native input component. |
-| name | string |  |  |
-| onChange | func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
-| type | string |  | The input component property `type`. |
-| value | string |  | The value of the component. |
+| <span class="prop-name">checked</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
+| <span class="prop-name">checkedIcon</span> | <span class="prop-type">node |  | The icon to display when the component is checked. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool |  | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon to display when the component is unchecked. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The id of the `input` element. |
+| <span class="prop-name">indeterminate</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component appears indeterminate. |
+| <span class="prop-name">indeterminateIcon</span> | <span class="prop-type">node | <span class="prop-default">&lt;IndeterminateCheckBoxIcon /></span> | The icon to display when the component is indeterminate. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  |  |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">type</span> | <span class="prop-type">string |  | The input component property `type`. |
+| <span class="prop-name">value</span> | <span class="prop-type">string |  | The value of the component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/chip.md b/pages/api/chip.md
index 2c50536f20ed48..722f1ab92aa1a6 100644
--- a/pages/api/chip.md
+++ b/pages/api/chip.md
@@ -12,12 +12,12 @@ Chips represent complex entities in small blocks, such as a contact.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| avatar | element |  | Avatar element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| deleteIcon | element |  | Override the default delete icon element. Shown only if `onDelete` is set. |
-| label | node |  | The content of the label. |
-| onDelete | func |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. |
+| <span class="prop-name">avatar</span> | <span class="prop-type">element |  | Avatar element. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">deleteIcon</span> | <span class="prop-type">element |  | Override the default delete icon element. Shown only if `onDelete` is set. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |  | The content of the label. |
+| <span class="prop-name">onDelete</span> | <span class="prop-type">func |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/circular-progress.md b/pages/api/circular-progress.md
index af4569a40519b1..f1776254f7efea 100644
--- a/pages/api/circular-progress.md
+++ b/pages/api/circular-progress.md
@@ -16,14 +16,14 @@ attribute to `true` on that region until it has finished loading.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
-| max | number | 100 | The max value of progress in determinate variant. |
-| min | number | 0 | The min value of progress in determinate variant. |
-| size | union:&nbsp;number&nbsp;&#124;<br>&nbsp;string<br> | 40 | The size of the circle. |
-| thickness | number | 3.6 | The thickness of the circle. |
-| value | number | 0 | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. |
-| variant | enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'static'<br> | 'indeterminate' | The variant of progress indicator. Use indeterminate when there is no progress value. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">max</span> | <span class="prop-type">number | <span class="prop-default">100</span> | The max value of progress in determinate variant. |
+| <span class="prop-name">min</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The min value of progress in determinate variant. |
+| <span class="prop-name">size</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;string<br> | <span class="prop-default">40</span> | The size of the circle. |
+| <span class="prop-name">thickness</span> | <span class="prop-type">number | <span class="prop-default">3.6</span> | The thickness of the circle. |
+| <span class="prop-name">value</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'indeterminate'</span> | The variant of progress indicator. Use indeterminate when there is no progress value. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/click-away-listener.md b/pages/api/click-away-listener.md
index 1b8949547f8b37..65ac88a848bd1f 100644
--- a/pages/api/click-away-listener.md
+++ b/pages/api/click-away-listener.md
@@ -12,8 +12,8 @@ Listen for click events that are triggered outside of the component children.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  |  |
-| <span style="color: #31a148">onClickAway *</span> | func |  |  |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  |  |
+| <span class="prop-name required">onClickAway *</span> | <span class="prop-type">func |  |  |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/collapse.md b/pages/api/collapse.md
index 2bdac5b9030f1d..f7abf0e8fb8791 100644
--- a/pages/api/collapse.md
+++ b/pages/api/collapse.md
@@ -14,12 +14,12 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content node to be collapsed. |
-| classes | object |  | Useful to extend the style applied to components. |
-| collapsedHeight | string | '0px' | The height of the container when collapsed. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| in | bool |  | If `true`, the component will transition in. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content node to be collapsed. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">collapsedHeight</span> | <span class="prop-type">string | <span class="prop-default">'0px'</span> | The height of the container when collapsed. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">in</span> | <span class="prop-type">bool |  | If `true`, the component will transition in. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">duration.standard</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/dialog-actions.md b/pages/api/dialog-actions.md
index d07e26e7225d65..c243033d8b09f7 100644
--- a/pages/api/dialog-actions.md
+++ b/pages/api/dialog-actions.md
@@ -12,8 +12,8 @@ filename: /src/Dialog/DialogActions.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/dialog-content-text.md b/pages/api/dialog-content-text.md
index 6b637c33b305a9..ca0228c3ee5563 100644
--- a/pages/api/dialog-content-text.md
+++ b/pages/api/dialog-content-text.md
@@ -12,8 +12,8 @@ filename: /src/Dialog/DialogContentText.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/dialog-content.md b/pages/api/dialog-content.md
index cb23d9c6a42a12..0b529e0bd51818 100644
--- a/pages/api/dialog-content.md
+++ b/pages/api/dialog-content.md
@@ -12,8 +12,8 @@ filename: /src/Dialog/DialogContent.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/dialog-title.md b/pages/api/dialog-title.md
index 314a58b3830743..87101a90ce21c2 100644
--- a/pages/api/dialog-title.md
+++ b/pages/api/dialog-title.md
@@ -12,9 +12,9 @@ filename: /src/Dialog/DialogTitle.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableTypography</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/dialog.md b/pages/api/dialog.md
index 1e49d97d471480..8ed64c43b7f057 100644
--- a/pages/api/dialog.md
+++ b/pages/api/dialog.md
@@ -12,26 +12,26 @@ Dialogs are overlaid modal paper based components with a backdrop.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | Dialog children, usually the included sub-components. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. |
-| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. |
-| fullScreen | bool | false | If `true`, the dialog will be full-screen |
-| fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`. |
-| maxWidth | enum:&nbsp;'xs'&nbsp;&#124;<br>&nbsp;'sm'&nbsp;&#124;<br>&nbsp;'md'&nbsp;&#124;<br>&nbsp;false<br> | 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. Set to `false` to disable `maxWidth`. |
-| onBackdropClick | func |  | Callback fired when the backdrop is clicked. |
-| onClose | func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| onEnter | func |  | Callback fired before the dialog enters. |
-| onEntered | func |  | Callback fired when the dialog has entered. |
-| onEntering | func |  | Callback fired when the dialog is entering. |
-| onEscapeKeyDown | func |  | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. |
-| onExit | func |  | Callback fired before the dialog exits. |
-| onExited | func |  | Callback fired when the dialog has exited. |
-| onExiting | func |  | Callback fired when the dialog is exiting. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the Dialog is open. |
-| PaperProps | object |  | Properties applied to the `Paper` element. |
-| transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Fade | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | Dialog children, usually the included sub-components. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableBackdropClick</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, clicking the backdrop will not fire the `onClose` callback. |
+| <span class="prop-name">disableEscapeKeyDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, hitting escape will not fire the `onClose` callback. |
+| <span class="prop-name">fullScreen</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the dialog will be full-screen |
+| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the dialog stretches to `maxWidth`. |
+| <span class="prop-name">maxWidth</span> | <span class="prop-type">enum:&nbsp;'xs'&nbsp;&#124;<br>&nbsp;'sm'&nbsp;&#124;<br>&nbsp;'md'&nbsp;&#124;<br>&nbsp;false<br> | <span class="prop-default">'sm'</span> | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. Set to `false` to disable `maxWidth`. |
+| <span class="prop-name">onBackdropClick</span> | <span class="prop-type">func |  | Callback fired when the backdrop is clicked. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">onEnter</span> | <span class="prop-type">func |  | Callback fired before the dialog enters. |
+| <span class="prop-name">onEntered</span> | <span class="prop-type">func |  | Callback fired when the dialog has entered. |
+| <span class="prop-name">onEntering</span> | <span class="prop-type">func |  | Callback fired when the dialog is entering. |
+| <span class="prop-name">onEscapeKeyDown</span> | <span class="prop-type">func |  | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. |
+| <span class="prop-name">onExit</span> | <span class="prop-type">func |  | Callback fired before the dialog exits. |
+| <span class="prop-name">onExited</span> | <span class="prop-type">func |  | Callback fired when the dialog has exited. |
+| <span class="prop-name">onExiting</span> | <span class="prop-type">func |  | Callback fired when the dialog is exiting. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the Dialog is open. |
+| <span class="prop-name">PaperProps</span> | <span class="prop-type">object |  | Properties applied to the `Paper` element. |
+| <span class="prop-name">transition</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">Fade</span> | Transition component. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/divider.md b/pages/api/divider.md
index d0b17ec15415ea..0139d3eeeb0482 100644
--- a/pages/api/divider.md
+++ b/pages/api/divider.md
@@ -12,11 +12,11 @@ filename: /src/Divider/Divider.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| absolute | bool | false |  |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'hr' | The component used for the root node. Either a string to use a DOM element or a component. |
-| inset | bool | false | If `true`, the divider will be indented. |
-| light | bool | false | If `true`, the divider will have a lighter color. |
+| <span class="prop-name">absolute</span> | <span class="prop-type">bool | <span class="prop-default">false</span> |  |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'hr'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">inset</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the divider will be indented. |
+| <span class="prop-name">light</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the divider will have a lighter color. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/drawer.md b/pages/api/drawer.md
index 9cb8324241e728..0a38285a549b0b 100644
--- a/pages/api/drawer.md
+++ b/pages/api/drawer.md
@@ -12,17 +12,17 @@ filename: /src/Drawer/Drawer.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| anchor | enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'right'&nbsp;&#124;<br>&nbsp;'bottom'<br> | 'left' | Side from which the drawer will appear. |
-| children | node |  | The contents of the drawer. |
-| classes | object |  | Useful to extend the style applied to components. |
-| elevation | number | 16 | The elevation of the drawer. |
-| ModalProps | object |  | Properties applied to the `Modal` element. |
-| onClose | func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| open | bool | false | If `true`, the drawer is open. |
-| PaperProps | object |  | Properties applied to the `Paper` element. |
-| SlideProps | object |  | Properties applied to the `Slide` element. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
-| variant | enum:&nbsp;'permanent'&nbsp;&#124;<br>&nbsp;'persistent'&nbsp;&#124;<br>&nbsp;'temporary'<br> | 'temporary' | The type of drawer. |
+| <span class="prop-name">anchor</span> | <span class="prop-type">enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'right'&nbsp;&#124;<br>&nbsp;'bottom'<br> | <span class="prop-default">'left'</span> | Side from which the drawer will appear. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The contents of the drawer. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">elevation</span> | <span class="prop-type">number | <span class="prop-default">16</span> | The elevation of the drawer. |
+| <span class="prop-name">ModalProps</span> | <span class="prop-type">object |  | Properties applied to the `Modal` element. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">open</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the drawer is open. |
+| <span class="prop-name">PaperProps</span> | <span class="prop-type">object |  | Properties applied to the `Paper` element. |
+| <span class="prop-name">SlideProps</span> | <span class="prop-type">object |  | Properties applied to the `Slide` element. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'permanent'&nbsp;&#124;<br>&nbsp;'persistent'&nbsp;&#124;<br>&nbsp;'temporary'<br> | <span class="prop-default">'temporary'</span> | The type of drawer. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/expansion-panel-actions.md b/pages/api/expansion-panel-actions.md
index 2e58d48da488d1..90c1f7e28fdb00 100644
--- a/pages/api/expansion-panel-actions.md
+++ b/pages/api/expansion-panel-actions.md
@@ -12,8 +12,8 @@ filename: /src/ExpansionPanel/ExpansionPanelActions.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/expansion-panel-details.md b/pages/api/expansion-panel-details.md
index 97544bdb67600e..f7eed0d4140d89 100644
--- a/pages/api/expansion-panel-details.md
+++ b/pages/api/expansion-panel-details.md
@@ -12,8 +12,8 @@ filename: /src/ExpansionPanel/ExpansionPanelDetails.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the expansion panel details. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the expansion panel details. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/expansion-panel-summary.md b/pages/api/expansion-panel-summary.md
index 70af0f67043dde..67f975d6adabb3 100644
--- a/pages/api/expansion-panel-summary.md
+++ b/pages/api/expansion-panel-summary.md
@@ -12,9 +12,9 @@ filename: /src/ExpansionPanel/ExpansionPanelSummary.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the expansion panel summary. |
-| classes | object |  | Useful to extend the style applied to components. |
-| expandIcon | node |  | The icon to display as the expand indicator. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the expansion panel summary. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">expandIcon</span> | <span class="prop-type">node |  | The icon to display as the expand indicator. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/expansion-panel.md b/pages/api/expansion-panel.md
index e03c19e5095ab4..f5a6215b145fcb 100644
--- a/pages/api/expansion-panel.md
+++ b/pages/api/expansion-panel.md
@@ -12,13 +12,13 @@ filename: /src/ExpansionPanel/ExpansionPanel.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the expansion panel. |
-| classes | object |  | Useful to extend the style applied to components. |
-| CollapseProps | object |  | Properties applied to the `Collapse` element. |
-| defaultExpanded | bool | false | If `true`, expands the panel by default. |
-| disabled | bool | false | If `true`, the panel will be displayed in a disabled state. |
-| expanded | bool |  | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. |
-| onChange | func |  | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback<br>*expanded:* The `expanded` state of the panel |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the expansion panel. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">CollapseProps</span> | <span class="prop-type">object |  | Properties applied to the `Collapse` element. |
+| <span class="prop-name">defaultExpanded</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, expands the panel by default. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the panel will be displayed in a disabled state. |
+| <span class="prop-name">expanded</span> | <span class="prop-type">bool |  | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback<br>*expanded:* The `expanded` state of the panel |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/fade.md b/pages/api/fade.md
index 93b55dcb8b329b..0e3441fcf5363e 100644
--- a/pages/api/fade.md
+++ b/pages/api/fade.md
@@ -13,9 +13,9 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
-| in | bool |  | If `true`, the component will transition in. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
+| <span class="prop-name">in</span> | <span class="prop-type">bool |  | If `true`, the component will transition in. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md
index 6d27224f94537f..771ceb9c5b8b00 100644
--- a/pages/api/form-control-label.md
+++ b/pages/api/form-control-label.md
@@ -13,15 +13,15 @@ Use this component if you want to display an extra label.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| checked | union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component appears selected. |
-| classes | object |  | Useful to extend the style applied to components. |
-| control | element |  | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. |
-| disabled | bool |  | If `true`, the control will be disabled. |
-| inputRef | func |  | Use that property to pass a ref callback to the native input component. |
-| label | node |  | The text to be used in an enclosing label element. |
-| name | string |  |  |
-| onChange | func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
-| value | string |  | The value of the component. |
+| <span class="prop-name">checked</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component appears selected. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">control</span> | <span class="prop-type">element |  | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the control will be disabled. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |  | The text to be used in an enclosing label element. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  |  |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">value</span> | <span class="prop-type">string |  | The value of the component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/form-control.md b/pages/api/form-control.md
index 83cb3e0d43c5b9..b6fb3deed9219c 100644
--- a/pages/api/form-control.md
+++ b/pages/api/form-control.md
@@ -19,14 +19,14 @@ This context is used by the following components:
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The contents of the form control. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. |
-| error | bool | false | If `true`, the label should be displayed in an error state. |
-| fullWidth | bool | false | If `true`, the component will take up the full width of its container. |
-| margin | enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'normal'<br> | 'none' | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
-| required | bool | false | If `true`, the label will indicate that the input is required. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The contents of the form control. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label, input and helper text should be displayed in a disabled state. |
+| <span class="prop-name">error</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label should be displayed in an error state. |
+| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will take up the full width of its container. |
+| <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'normal'<br> | <span class="prop-default">'none'</span> | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| <span class="prop-name">required</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label will indicate that the input is required. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/form-group.md b/pages/api/form-group.md
index 26f92e4bee0666..90862776fc11fa 100644
--- a/pages/api/form-group.md
+++ b/pages/api/form-group.md
@@ -14,9 +14,9 @@ For the `Radio`, you should be using the `RadioGroup` component instead of this
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| row | bool | false | Display group of elements in a compact row. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">row</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Display group of elements in a compact row. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/form-helper-text.md b/pages/api/form-helper-text.md
index 71ba2848ba5144..58b7afe8643b0d 100644
--- a/pages/api/form-helper-text.md
+++ b/pages/api/form-helper-text.md
@@ -12,12 +12,12 @@ filename: /src/Form/FormHelperText.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'p' | The component used for the root node. Either a string to use a DOM element or a component. |
-| disabled | bool |  | If `true`, the helper text should be displayed in a disabled state. |
-| error | bool |  | If `true`, helper text should be displayed in an error state. |
-| margin | enum:&nbsp;'dense'<br> |  | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'p'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the helper text should be displayed in a disabled state. |
+| <span class="prop-name">error</span> | <span class="prop-type">bool |  | If `true`, helper text should be displayed in an error state. |
+| <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'<br> |  | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/form-label.md b/pages/api/form-label.md
index 27c7ef8c4a1704..ea6e17d4b7af13 100644
--- a/pages/api/form-label.md
+++ b/pages/api/form-label.md
@@ -12,13 +12,13 @@ filename: /src/Form/FormLabel.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'label' | The component used for the root node. Either a string to use a DOM element or a component. |
-| disabled | bool |  | If `true`, the label should be displayed in a disabled state. |
-| error | bool |  | If `true`, the label should be displayed in an error state. |
-| focused | bool |  | If `true`, the input of this label is focused (used by `FormGroup` components). |
-| required | bool |  | If `true`, the label will indicate that the input is required. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'label'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the label should be displayed in a disabled state. |
+| <span class="prop-name">error</span> | <span class="prop-type">bool |  | If `true`, the label should be displayed in an error state. |
+| <span class="prop-name">focused</span> | <span class="prop-type">bool |  | If `true`, the input of this label is focused (used by `FormGroup` components). |
+| <span class="prop-name">required</span> | <span class="prop-type">bool |  | If `true`, the label will indicate that the input is required. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/grid-list-tile-bar.md b/pages/api/grid-list-tile-bar.md
index 228cb8022f483f..b377fb9f8cdf21 100644
--- a/pages/api/grid-list-tile-bar.md
+++ b/pages/api/grid-list-tile-bar.md
@@ -12,12 +12,12 @@ filename: /src/GridList/GridListTileBar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| actionIcon | node |  | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
-| actionPosition | enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'<br> | 'right' | Position of secondary action IconButton. |
-| classes | object |  | Useful to extend the style applied to components. |
-| subtitle | node |  | String or element serving as subtitle (support text). |
-| title | node |  | Title to be displayed on tile. |
-| titlePosition | enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'bottom'<br> | 'bottom' | Position of the title bar. |
+| <span class="prop-name">actionIcon</span> | <span class="prop-type">node |  | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
+| <span class="prop-name">actionPosition</span> | <span class="prop-type">enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'<br> | <span class="prop-default">'right'</span> | Position of secondary action IconButton. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">subtitle</span> | <span class="prop-type">node |  | String or element serving as subtitle (support text). |
+| <span class="prop-name">title</span> | <span class="prop-type">node |  | Title to be displayed on tile. |
+| <span class="prop-name">titlePosition</span> | <span class="prop-type">enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'bottom'<br> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/grid-list-tile.md b/pages/api/grid-list-tile.md
index ef57f36470e0e7..f9e10d9818a4bb 100644
--- a/pages/api/grid-list-tile.md
+++ b/pages/api/grid-list-tile.md
@@ -12,11 +12,11 @@ filename: /src/GridList/GridListTile.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
-| classes | object |  | Useful to extend the style applied to components. |
-| cols | number | 1 | Width of the tile in number of grid cells. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
-| rows | number | 1 | Height of the tile in number of grid cells. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number | <span class="prop-default">1</span> | Width of the tile in number of grid cells. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">rows</span> | <span class="prop-type">number | <span class="prop-default">1</span> | Height of the tile in number of grid cells. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/grid-list.md b/pages/api/grid-list.md
index c9fe04c733a8ce..4d80c67c71274b 100644
--- a/pages/api/grid-list.md
+++ b/pages/api/grid-list.md
@@ -12,12 +12,12 @@ filename: /src/GridList/GridList.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| cellHeight | union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
-| <span style="color: #31a148">children *</span> | node |  | Grid Tiles that will be in Grid List. |
-| classes | object |  | Useful to extend the style applied to components. |
-| cols | number | 2 | Number of columns. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. |
-| spacing | number | 4 | Number of px for the spacing between tiles. |
+| <span class="prop-name">cellHeight</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">180</span> | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | Grid Tiles that will be in Grid List. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number | <span class="prop-default">2</span> | Number of columns. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'ul'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">number | <span class="prop-default">4</span> | Number of px for the spacing between tiles. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/grid.md b/pages/api/grid.md
index 43f712af2a008f..23ab2f2d159a1f 100644
--- a/pages/api/grid.md
+++ b/pages/api/grid.md
@@ -12,24 +12,24 @@ filename: /src/Grid/Grid.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| alignContent | enum:&nbsp;'stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'<br> | 'stretch' | Defines the `align-content` style property. It's applied for all screen sizes. |
-| alignItems | enum:&nbsp;'flex-start', 'center', 'flex-end', 'stretch', 'baseline'<br> | 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
-| direction | enum:&nbsp;'row'&nbsp;&#124;<br>&nbsp;'row-reverse'&nbsp;&#124;<br>&nbsp;'column'&nbsp;&#124;<br>&nbsp;'column-reverse'<br> | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. |
-| hidden | object |  | If provided, will wrap with [Hidden](/api/hidden) component and given properties. |
-| item | bool | false | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
-| justify | enum:&nbsp;'flex-start', 'center', 'flex-end', 'space-between', 'space-around'<br> | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. |
-| lg | enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
-| md | enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
-| sm | enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
-| spacing | enum:&nbsp;0, 8, 16, 24, 40<br> | 16 | Defines the space between the type `item` component. It can only be used on a type `container` component. |
-| wrap | enum:&nbsp;'nowrap'&nbsp;&#124;<br>&nbsp;'wrap'&nbsp;&#124;<br>&nbsp;'wrap-reverse'<br> | 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
-| xl | enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
-| xs | enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
-| zeroMinWidth | bool | false | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. |
+| <span class="prop-name">alignContent</span> | <span class="prop-type">enum:&nbsp;'stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'<br> | <span class="prop-default">'stretch'</span> | Defines the `align-content` style property. It's applied for all screen sizes. |
+| <span class="prop-name">alignItems</span> | <span class="prop-type">enum:&nbsp;'flex-start', 'center', 'flex-end', 'stretch', 'baseline'<br> | <span class="prop-default">'stretch'</span> | Defines the `align-items` style property. It's applied for all screen sizes. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">container</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
+| <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'row'&nbsp;&#124;<br>&nbsp;'row-reverse'&nbsp;&#124;<br>&nbsp;'column'&nbsp;&#124;<br>&nbsp;'column-reverse'<br> | <span class="prop-default">'row'</span> | Defines the `flex-direction` style property. It is applied for all screen sizes. |
+| <span class="prop-name">hidden</span> | <span class="prop-type">object |  | If provided, will wrap with [Hidden](/api/hidden) component and given properties. |
+| <span class="prop-name">item</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
+| <span class="prop-name">justify</span> | <span class="prop-type">enum:&nbsp;'flex-start', 'center', 'flex-end', 'space-between', 'space-around'<br> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
+| <span class="prop-name">lg</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
+| <span class="prop-name">md</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
+| <span class="prop-name">sm</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 8, 16, 24, 40<br> | <span class="prop-default">16</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
+| <span class="prop-name">wrap</span> | <span class="prop-type">enum:&nbsp;'nowrap'&nbsp;&#124;<br>&nbsp;'wrap'&nbsp;&#124;<br>&nbsp;'wrap-reverse'<br> | <span class="prop-default">'wrap'</span> | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
+| <span class="prop-name">xl</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
+| <span class="prop-name">xs</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
+| <span class="prop-name">zeroMinWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/grow.md b/pages/api/grow.md
index 33d31717a41bc9..a2c577b7e95773 100644
--- a/pages/api/grow.md
+++ b/pages/api/grow.md
@@ -13,9 +13,9 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
-| in | bool |  | If `true`, show the component; triggers the enter or exit animation. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
+| <span class="prop-name">in</span> | <span class="prop-type">bool |  | If `true`, show the component; triggers the enter or exit animation. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/hidden.md b/pages/api/hidden.md
index cd38e210fdc630..db57aceae0de30 100644
--- a/pages/api/hidden.md
+++ b/pages/api/hidden.md
@@ -12,20 +12,20 @@ Responsively hides children based on the selected implementation.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| implementation | enum:&nbsp;'js'&nbsp;&#124;<br>&nbsp;'css'<br> | 'js' | Specify which implementation to use.  'js' is the default, 'css' works better for server side rendering. |
-| initialWidth | enum:&nbsp;'xs', 'sm', 'md', 'lg', 'xl'<br> |  | You can use this property when choosing the `js` implementation with server side rendering.<br>As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.<br>For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint |
-| lgDown | bool | false | If true, screens this size and down will be hidden. |
-| lgUp | bool | false | If true, screens this size and up will be hidden. |
-| mdDown | bool | false | If true, screens this size and down will be hidden. |
-| mdUp | bool | false | If true, screens this size and up will be hidden. |
-| only | union:&nbsp;enum:&nbsp;'xs', 'sm', 'md', 'lg', 'xl'<br>&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | Hide the given breakpoint(s). |
-| smDown | bool | false | If true, screens this size and down will be hidden. |
-| smUp | bool | false | If true, screens this size and up will be hidden. |
-| xlDown | bool | false | If true, screens this size and down will be hidden. |
-| xlUp | bool | false | If true, screens this size and up will be hidden. |
-| xsDown | bool | false | If true, screens this size and down will be hidden. |
-| xsUp | bool | false | If true, screens this size and up will be hidden. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">implementation</span> | <span class="prop-type">enum:&nbsp;'js'&nbsp;&#124;<br>&nbsp;'css'<br> | <span class="prop-default">'js'</span> | Specify which implementation to use.  'js' is the default, 'css' works better for server side rendering. |
+| <span class="prop-name">initialWidth</span> | <span class="prop-type">enum:&nbsp;'xs', 'sm', 'md', 'lg', 'xl'<br> |  | You can use this property when choosing the `js` implementation with server side rendering.<br>As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.<br>For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint |
+| <span class="prop-name">lgDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and down will be hidden. |
+| <span class="prop-name">lgUp</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and up will be hidden. |
+| <span class="prop-name">mdDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and down will be hidden. |
+| <span class="prop-name">mdUp</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and up will be hidden. |
+| <span class="prop-name">only</span> | <span class="prop-type">union:&nbsp;enum:&nbsp;'xs', 'sm', 'md', 'lg', 'xl'<br>&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | Hide the given breakpoint(s). |
+| <span class="prop-name">smDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and down will be hidden. |
+| <span class="prop-name">smUp</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and up will be hidden. |
+| <span class="prop-name">xlDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and down will be hidden. |
+| <span class="prop-name">xlUp</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and up will be hidden. |
+| <span class="prop-name">xsDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and down will be hidden. |
+| <span class="prop-name">xsUp</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, screens this size and up will be hidden. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md
index e24a400b7231fe..9db63823c7c04e 100644
--- a/pages/api/icon-button.md
+++ b/pages/api/icon-button.md
@@ -13,11 +13,11 @@ regarding the available icon options.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The icon element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool | false | If `true`, the button will be disabled. |
-| disableRipple | bool | false | If `true`, the ripple will be disabled. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The icon element. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple will be disabled. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/icon.md b/pages/api/icon.md
index 96039839f25557..90db0c6b4346e0 100644
--- a/pages/api/icon.md
+++ b/pages/api/icon.md
@@ -12,10 +12,10 @@ filename: /src/Icon/Icon.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The name of the icon font ligature. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'inherit', 'secondary', 'action', 'disabled', 'error', 'primary'<br> | 'inherit' | The color of the component. It supports those theme colors that make sense for this component. |
-| fontSize | bool | false | If `true`, the icon size will be determined by the font-size. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The name of the icon font ligature. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'secondary', 'action', 'disabled', 'error', 'primary'<br> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">fontSize</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the icon size will be determined by the font-size. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/input-adornment.md b/pages/api/input-adornment.md
index b9b30ada57f10f..114ff1b65b9234 100644
--- a/pages/api/input-adornment.md
+++ b/pages/api/input-adornment.md
@@ -12,11 +12,11 @@ filename: /src/Input/InputAdornment.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component, normally an `IconButton` or string. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| disableTypography | bool | false | If children is a string then disable wrapping in a Typography component. |
-| position | enum:&nbsp;'start'&nbsp;&#124;<br>&nbsp;'end'<br> |  | The position this adornment should appear relative to the `Input`. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component, normally an `IconButton` or string. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disableTypography</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If children is a string then disable wrapping in a Typography component. |
+| <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'start'&nbsp;&#124;<br>&nbsp;'end'<br> |  | The position this adornment should appear relative to the `Input`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/input-label.md b/pages/api/input-label.md
index 3e348f1d1ed1f8..20f9fbf7954f2f 100644
--- a/pages/api/input-label.md
+++ b/pages/api/input-label.md
@@ -12,16 +12,16 @@ filename: /src/Input/InputLabel.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The contents of the `InputLabel`. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableAnimation | bool | false | If `true`, the transition animation is disabled. |
-| disabled | bool | false | If `true`, apply disabled class. |
-| error | bool |  | If `true`, the label will be displayed in an error state. |
-| focused | bool |  | If `true`, the input of this label is focused. |
-| FormControlClasses | object |  | `classes` property applied to the `FormControl` element. |
-| margin | enum:&nbsp;'dense'<br> |  | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
-| required | bool |  | if `true`, the label will indicate that the input is required. |
-| shrink | bool |  | If `true`, the label is shrunk. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The contents of the `InputLabel`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableAnimation</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the transition animation is disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, apply disabled class. |
+| <span class="prop-name">error</span> | <span class="prop-type">bool |  | If `true`, the label will be displayed in an error state. |
+| <span class="prop-name">focused</span> | <span class="prop-type">bool |  | If `true`, the input of this label is focused. |
+| <span class="prop-name">FormControlClasses</span> | <span class="prop-type">object |  | `classes` property applied to the `FormControl` element. |
+| <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'<br> |  | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
+| <span class="prop-name">required</span> | <span class="prop-type">bool |  | if `true`, the label will indicate that the input is required. |
+| <span class="prop-name">shrink</span> | <span class="prop-type">bool |  | If `true`, the label is shrunk. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/input.md b/pages/api/input.md
index c9d2cff93ab880..43c2a1117c9508 100644
--- a/pages/api/input.md
+++ b/pages/api/input.md
@@ -12,32 +12,32 @@ filename: /src/Input/Input.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| autoComplete | string |  | This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill |
-| autoFocus | bool |  | If `true`, the input will be focused during the first mount. |
-| classes | object |  | Useful to extend the style applied to components. |
-| className | string |  | The CSS class name of the wrapper element. |
-| defaultValue | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | The default input value, useful when not controlling the component. |
-| disabled | bool |  | If `true`, the input will be disabled. |
-| disableUnderline | bool | false | If `true`, the input will not have an underline. |
-| endAdornment | node |  | End `InputAdornment` for this component. |
-| error | bool |  | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. |
-| fullWidth | bool | false | If `true`, the input will take up the full width of its container. |
-| id | string |  | The id of the `input` element. |
-| inputComponent | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the native input. Either a string to use a DOM element or a component. |
-| inputProps | object |  | Properties applied to the `input` element. |
-| inputRef | func |  | Use that property to pass a ref callback to the native input component. |
-| margin | enum:&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> |  | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
-| multiline | bool | false | If `true`, a textarea element will be rendered. |
-| name | string |  | Name attribute of the `input` element. |
-| onChange | func |  | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| onClean | func |  | TODO |
-| onDirty | func |  | TODO |
-| placeholder | string |  | The short hint displayed in the input before the user enters a value. |
-| rows | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Number of rows to display when multiline option is set to true. |
-| rowsMax | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Maximum number of rows to display when multiline option is set to true. |
-| startAdornment | node |  | Start `InputAdornment` for this component. |
-| type | string | 'text' | Type of the input element. It should be a valid HTML5 input type. |
-| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
+| <span class="prop-name">autoComplete</span> | <span class="prop-type">string |  | This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill |
+| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool |  | If `true`, the input will be focused during the first mount. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">className</span> | <span class="prop-type">string |  | The CSS class name of the wrapper element. |
+| <span class="prop-name">defaultValue</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | The default input value, useful when not controlling the component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the input will be disabled. |
+| <span class="prop-name">disableUnderline</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the input will not have an underline. |
+| <span class="prop-name">endAdornment</span> | <span class="prop-type">node |  | End `InputAdornment` for this component. |
+| <span class="prop-name">error</span> | <span class="prop-type">bool |  | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. |
+| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the input will take up the full width of its container. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The id of the `input` element. |
+| <span class="prop-name">inputComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the native input. Either a string to use a DOM element or a component. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> |  | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
+| <span class="prop-name">multiline</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, a textarea element will be rendered. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  | Name attribute of the `input` element. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">onClean</span> | <span class="prop-type">func |  | TODO |
+| <span class="prop-name">onDirty</span> | <span class="prop-type">func |  | TODO |
+| <span class="prop-name">placeholder</span> | <span class="prop-type">string |  | The short hint displayed in the input before the user enters a value. |
+| <span class="prop-name">rows</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Number of rows to display when multiline option is set to true. |
+| <span class="prop-name">rowsMax</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Maximum number of rows to display when multiline option is set to true. |
+| <span class="prop-name">startAdornment</span> | <span class="prop-type">node |  | Start `InputAdornment` for this component. |
+| <span class="prop-name">type</span> | <span class="prop-type">string | <span class="prop-default">'text'</span> | Type of the input element. It should be a valid HTML5 input type. |
+| <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/linear-progress.md b/pages/api/linear-progress.md
index 953a1917bdb3a7..15a128630496b9 100644
--- a/pages/api/linear-progress.md
+++ b/pages/api/linear-progress.md
@@ -16,11 +16,11 @@ attribute to `true` on that region until it has finished loading.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
-| value | number |  | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. |
-| valueBuffer | number |  | The value for the buffer variant. Value between 0 and 100. |
-| variant | enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'buffer'&nbsp;&#124;<br>&nbsp;'query'<br> | 'indeterminate' | The variant of progress indicator. Use indeterminate or query when there is no progress value. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">value</span> | <span class="prop-type">number |  | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. |
+| <span class="prop-name">valueBuffer</span> | <span class="prop-type">number |  | The value for the buffer variant. Value between 0 and 100. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'buffer'&nbsp;&#124;<br>&nbsp;'query'<br> | <span class="prop-default">'indeterminate'</span> | The variant of progress indicator. Use indeterminate or query when there is no progress value. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md
index c5c9ca501ffeac..c9606d705d8c1d 100644
--- a/pages/api/list-item-avatar.md
+++ b/pages/api/list-item-avatar.md
@@ -12,8 +12,8 @@ It's a simple wrapper to apply the `dense` mode styles to `Avatar`.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | element |  | The content of the component, normally `Avatar`. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">element |  | The content of the component, normally `Avatar`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list-item-icon.md b/pages/api/list-item-icon.md
index 1a1ef5d9401b16..8381d8509a0c91 100644
--- a/pages/api/list-item-icon.md
+++ b/pages/api/list-item-icon.md
@@ -12,8 +12,8 @@ A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | element |  | The content of the component, normally `Icon`, `SvgIcon`, or a `material-ui-icons` SVG icon component. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">element |  | The content of the component, normally `Icon`, `SvgIcon`, or a `material-ui-icons` SVG icon component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list-item-secondary-action.md b/pages/api/list-item-secondary-action.md
index bd6bcb03ebf085..c55f7812020758 100644
--- a/pages/api/list-item-secondary-action.md
+++ b/pages/api/list-item-secondary-action.md
@@ -12,8 +12,8 @@ filename: /src/List/ListItemSecondaryAction.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component, normally an `IconButton` or selection control. |
-| classes | object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component, normally an `IconButton` or selection control. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md
index 0fbd6112423c71..99adcf6c65464b 100644
--- a/pages/api/list-item-text.md
+++ b/pages/api/list-item-text.md
@@ -12,11 +12,11 @@ filename: /src/List/ListItemText.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, that can be useful to can render an h4 instead of a |
-| inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. |
-| primary | node | false |  |
-| secondary | node | false |  |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableTypography</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the children won't be wrapped by a typography component. For instance, that can be useful to can render an h4 instead of a |
+| <span class="prop-name">inset</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. |
+| <span class="prop-name">primary</span> | <span class="prop-type">node | <span class="prop-default">false</span> |  |
+| <span class="prop-name">secondary</span> | <span class="prop-type">node | <span class="prop-default">false</span> |  |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list-item.md b/pages/api/list-item.md
index cd19a25ce1a3c8..1e0ce696bae375 100644
--- a/pages/api/list-item.md
+++ b/pages/api/list-item.md
@@ -12,15 +12,15 @@ filename: /src/List/ListItem.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| button | bool | false | If `true`, the list item will be a button (using `ButtonBase`). |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
-| ContainerComponent | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'li' | The container component. Useful when a `ListItemSecondaryAction` is rendered. |
-| ContainerProps | object |  | Properties applied to the container element when the component is used to display a `ListItemSecondaryAction`. |
-| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
-| disableGutters | bool | false | If `true`, the left and right padding is removed. |
-| divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. |
+| <span class="prop-name">button</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the list item will be a button (using `ButtonBase`). |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
+| <span class="prop-name">ContainerComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'li'</span> | The container component. Useful when a `ListItemSecondaryAction` is rendered. |
+| <span class="prop-name">ContainerProps</span> | <span class="prop-type">object |  | Properties applied to the container element when the component is used to display a `ListItemSecondaryAction`. |
+| <span class="prop-name">dense</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
+| <span class="prop-name">disableGutters</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the left and right padding is removed. |
+| <span class="prop-name">divider</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, a 1px light border is added to the bottom of the list item. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md
index 14fa2e91d3b2ba..db80645d410ede 100644
--- a/pages/api/list-subheader.md
+++ b/pages/api/list-subheader.md
@@ -12,12 +12,12 @@ filename: /src/List/ListSubheader.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
-| disableSticky | bool | false | If `true`, the List Subheader will not stick to the top during scroll. |
-| inset | bool | false | If `true`, the List Subheader will be indented. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disableSticky</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the List Subheader will not stick to the top during scroll. |
+| <span class="prop-name">inset</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the List Subheader will be indented. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/list.md b/pages/api/list.md
index 155f8b8f035107..6ed2212c065232 100644
--- a/pages/api/list.md
+++ b/pages/api/list.md
@@ -12,12 +12,12 @@ filename: /src/List/List.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. |
-| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The property is available to descendant components as the `dense` context. |
-| disablePadding | bool | false | If `true`, vertical padding will be removed from the list. |
-| subheader | node |  | The content of the subheader, normally `ListSubheader`. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'ul'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">dense</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The property is available to descendant components as the `dense` context. |
+| <span class="prop-name">disablePadding</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, vertical padding will be removed from the list. |
+| <span class="prop-name">subheader</span> | <span class="prop-type">node |  | The content of the subheader, normally `ListSubheader`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/menu-item.md b/pages/api/menu-item.md
index 785cb74ca3ed1f..08c5fbf574c7e4 100644
--- a/pages/api/menu-item.md
+++ b/pages/api/menu-item.md
@@ -12,10 +12,10 @@ filename: /src/Menu/MenuItem.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Menu item contents. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
-| selected | bool | false | Use to apply selected styling. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Menu item contents. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">selected</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Use to apply selected styling. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/menu-list.md b/pages/api/menu-list.md
index 754ff6df80d6ef..497b60b3112d71 100644
--- a/pages/api/menu-list.md
+++ b/pages/api/menu-list.md
@@ -12,7 +12,7 @@ filename: /src/Menu/MenuList.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | MenuList contents, normally `MenuItem`s. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | MenuList contents, normally `MenuItem`s. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/menu.md b/pages/api/menu.md
index ca10e48a14aea7..efe6cd1015e143 100644
--- a/pages/api/menu.md
+++ b/pages/api/menu.md
@@ -12,20 +12,20 @@ filename: /src/Menu/Menu.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| anchorEl | object |  | The DOM element used to set the position of the menu. |
-| children | node |  | Menu contents, normally `MenuItem`s. |
-| classes | object |  | Useful to extend the style applied to components. |
-| MenuListProps | object |  | Properties applied to the `MenuList` element. |
-| onClose | func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| onEnter | func |  | Callback fired before the Menu enters. |
-| onEntered | func |  | Callback fired when the Menu has entered. |
-| onEntering | func |  | Callback fired when the Menu is entering. |
-| onExit | func |  | Callback fired before the Menu exits. |
-| onExited | func |  | Callback fired when the Menu has exited. |
-| onExiting | func |  | Callback fired when the Menu is exiting. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the menu is visible. |
-| PopoverClasses | object |  | `classes` property applied to the `Popover` element. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | The length of the transition in `ms`, or 'auto' |
+| <span class="prop-name">anchorEl</span> | <span class="prop-type">object |  | The DOM element used to set the position of the menu. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Menu contents, normally `MenuItem`s. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">MenuListProps</span> | <span class="prop-type">object |  | Properties applied to the `MenuList` element. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">onEnter</span> | <span class="prop-type">func |  | Callback fired before the Menu enters. |
+| <span class="prop-name">onEntered</span> | <span class="prop-type">func |  | Callback fired when the Menu has entered. |
+| <span class="prop-name">onEntering</span> | <span class="prop-type">func |  | Callback fired when the Menu is entering. |
+| <span class="prop-name">onExit</span> | <span class="prop-type">func |  | Callback fired before the Menu exits. |
+| <span class="prop-name">onExited</span> | <span class="prop-type">func |  | Callback fired when the Menu has exited. |
+| <span class="prop-name">onExiting</span> | <span class="prop-type">func |  | Callback fired when the Menu is exiting. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the menu is visible. |
+| <span class="prop-name">PopoverClasses</span> | <span class="prop-type">object |  | `classes` property applied to the `Popover` element. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | The length of the transition in `ms`, or 'auto' |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/mobile-stepper.md b/pages/api/mobile-stepper.md
index aa71398a63938c..224871dfcaad8e 100644
--- a/pages/api/mobile-stepper.md
+++ b/pages/api/mobile-stepper.md
@@ -12,13 +12,13 @@ filename: /src/MobileStepper/MobileStepper.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| activeStep | number | 0 | Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'. |
-| backButton | node |  | A back button element. For instance, it can be be a `Button` or a `IconButton`. |
-| classes | object |  | Useful to extend the style applied to components. |
-| nextButton | node |  | A next button element. For instance, it can be be a `Button` or a `IconButton`. |
-| position | enum:&nbsp;'bottom'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'static'<br> | 'bottom' | Set the positioning type. |
-| <span style="color: #31a148">steps *</span> | number |  | The total steps. |
-| variant | enum:&nbsp;'text'&nbsp;&#124;<br>&nbsp;'dots'&nbsp;&#124;<br>&nbsp;'progress'<br> | 'dots' | The type of mobile stepper to use. |
+| <span class="prop-name">activeStep</span> | <span class="prop-type">number | <span class="prop-default">0</span> | Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'. |
+| <span class="prop-name">backButton</span> | <span class="prop-type">node |  | A back button element. For instance, it can be be a `Button` or a `IconButton`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">nextButton</span> | <span class="prop-type">node |  | A next button element. For instance, it can be be a `Button` or a `IconButton`. |
+| <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'bottom'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'bottom'</span> | Set the positioning type. |
+| <span class="prop-name required">steps *</span> | <span class="prop-type">number |  | The total steps. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text'&nbsp;&#124;<br>&nbsp;'dots'&nbsp;&#124;<br>&nbsp;'progress'<br> | <span class="prop-default">'dots'</span> | The type of mobile stepper to use. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/modal.md b/pages/api/modal.md
index c3157b14ad9fae..cabdec428e40e5 100644
--- a/pages/api/modal.md
+++ b/pages/api/modal.md
@@ -12,24 +12,24 @@ filename: /src/Modal/Modal.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| BackdropComponent | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Backdrop | A backdrop component. Useful for custom backdrop rendering. |
-| BackdropProps | object |  | Properties applied to the `Backdrop` element. |
-| children | element |  | A single child content element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. |
-| disableAutoFocus | bool | false | If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
-| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire any callback. |
-| disableEnforceFocus | bool | false | If `true`, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
-| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire any callback. |
-| disableRestoreFocus | bool | false | If `true`, the modal will not restore focus to previously focused element once modal is hidden. |
-| hideBackdrop | bool | false | If `true`, the backdrop is not rendered. |
-| keepMounted | bool | false | Always keep the children in the DOM. This property can be useful in SEO situation or when you want to maximize the responsiveness of the Modal. |
-| manager | object | new ModalManager() | A modal manager used to track and manage the state of open Modals. Useful when customizing how modals interact within a container. |
-| onBackdropClick | func |  | Callback fired when the backdrop is clicked. |
-| onClose | func |  | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback<br>*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` |
-| onEscapeKeyDown | func |  | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. |
-| onRendered | func |  | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` property took effect. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the modal is open. |
+| <span class="prop-name">BackdropComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">Backdrop</span> | A backdrop component. Useful for custom backdrop rendering. |
+| <span class="prop-name">BackdropProps</span> | <span class="prop-type">object |  | Properties applied to the `Backdrop` element. |
+| <span class="prop-name">children</span> | <span class="prop-type">element |  | A single child content element. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">container</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. |
+| <span class="prop-name">disableAutoFocus</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
+| <span class="prop-name">disableBackdropClick</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, clicking the backdrop will not fire any callback. |
+| <span class="prop-name">disableEnforceFocus</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
+| <span class="prop-name">disableEscapeKeyDown</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, hitting escape will not fire any callback. |
+| <span class="prop-name">disableRestoreFocus</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the modal will not restore focus to previously focused element once modal is hidden. |
+| <span class="prop-name">hideBackdrop</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the backdrop is not rendered. |
+| <span class="prop-name">keepMounted</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Always keep the children in the DOM. This property can be useful in SEO situation or when you want to maximize the responsiveness of the Modal. |
+| <span class="prop-name">manager</span> | <span class="prop-type">object | <span class="prop-default">new ModalManager()</span> | A modal manager used to track and manage the state of open Modals. Useful when customizing how modals interact within a container. |
+| <span class="prop-name">onBackdropClick</span> | <span class="prop-type">func |  | Callback fired when the backdrop is clicked. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback<br>*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` |
+| <span class="prop-name">onEscapeKeyDown</span> | <span class="prop-type">func |  | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. |
+| <span class="prop-name">onRendered</span> | <span class="prop-type">func |  | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` property took effect. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the modal is open. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/mui-theme-provider.md b/pages/api/mui-theme-provider.md
index 7051c8af51aff3..88482044387c21 100644
--- a/pages/api/mui-theme-provider.md
+++ b/pages/api/mui-theme-provider.md
@@ -14,10 +14,10 @@ This component should preferably be used at **the root of your component tree**.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | You can only provide a single element with react@15, a node with react@16. |
-| disableStylesGeneration | bool |  | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server side. You can significantly speed up the traversal with this property. |
-| sheetsManager | object |  | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. |
-| <span style="color: #31a148">theme *</span> | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A theme object. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | You can only provide a single element with react@15, a node with react@16. |
+| <span class="prop-name">disableStylesGeneration</span> | <span class="prop-type">bool |  | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server side. You can significantly speed up the traversal with this property. |
+| <span class="prop-name">sheetsManager</span> | <span class="prop-type">object |  | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. |
+| <span class="prop-name required">theme *</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A theme object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/paper.md b/pages/api/paper.md
index ef5728967f44a0..83be7e32a24fef 100644
--- a/pages/api/paper.md
+++ b/pages/api/paper.md
@@ -12,11 +12,11 @@ filename: /src/Paper/Paper.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| elevation | number | 2 | Shadow depth, corresponds to `dp` in the spec. It's accepting values between 0 and 24 inclusive. |
-| square | bool | false | If `true`, rounded corners are disabled. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">elevation</span> | <span class="prop-type">number | <span class="prop-default">2</span> | Shadow depth, corresponds to `dp` in the spec. It's accepting values between 0 and 24 inclusive. |
+| <span class="prop-name">square</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, rounded corners are disabled. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/popover.md b/pages/api/popover.md
index d3c4312725ae40..97631fa1c907dd 100644
--- a/pages/api/popover.md
+++ b/pages/api/popover.md
@@ -12,29 +12,29 @@ filename: /src/Popover/Popover.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| action | func |  | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions that can be triggered programmatically. |
-| anchorEl | object |  | This is the DOM element that may be used to set the position of the popover. |
-| anchorOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  vertical: 'top',  horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
-| anchorPosition | {top?: number, left?: number} |  | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
-| anchorReference | enum:&nbsp;'anchorEl'&nbsp;&#124;<br>&nbsp;'anchorPosition'<br> | 'anchorEl' |  |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it's using the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. |
-| elevation | number | 8 | The elevation of the popover. |
-| getContentAnchorEl | func |  | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` property. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. |
-| marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. |
-| onClose | func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
-| onEnter | func |  | Callback fired before the component is entering. |
-| onEntered | func |  | Callback fired when the component has entered. |
-| onEntering | func |  | Callback fired when the component is entering. |
-| onExit | func |  | Callback fired before the component is exiting. |
-| onExited | func |  | Callback fired when the component has exited. |
-| onExiting | func |  | Callback fired when the component is exiting. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the popover is visible. |
-| PaperProps | object |  | Properties applied to the `Paper` element. |
-| transformOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  vertical: 'top',  horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
-| transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Grow | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
+| <span class="prop-name">action</span> | <span class="prop-type">func |  | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all posible actions that can be triggered programmatically. |
+| <span class="prop-name">anchorEl</span> | <span class="prop-type">object |  | This is the DOM element that may be used to set the position of the popover. |
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | <span class="prop-default">{  vertical: 'top',  horizontal: 'left',}</span> | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.<br>Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
+| <span class="prop-name">anchorPosition</span> | <span class="prop-type">{top?: number, left?: number} |  | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. |
+| <span class="prop-name">anchorReference</span> | <span class="prop-type">enum:&nbsp;'anchorEl'&nbsp;&#124;<br>&nbsp;'anchorPosition'<br> | <span class="prop-default">'anchorEl'</span> |  |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">container</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it's using the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. |
+| <span class="prop-name">elevation</span> | <span class="prop-type">number | <span class="prop-default">8</span> | The elevation of the popover. |
+| <span class="prop-name">getContentAnchorEl</span> | <span class="prop-type">func |  | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` property. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. |
+| <span class="prop-name">marginThreshold</span> | <span class="prop-type">number | <span class="prop-default">16</span> | Specifies how close to the edge of the window the popover can appear. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
+| <span class="prop-name">onEnter</span> | <span class="prop-type">func |  | Callback fired before the component is entering. |
+| <span class="prop-name">onEntered</span> | <span class="prop-type">func |  | Callback fired when the component has entered. |
+| <span class="prop-name">onEntering</span> | <span class="prop-type">func |  | Callback fired when the component is entering. |
+| <span class="prop-name">onExit</span> | <span class="prop-type">func |  | Callback fired before the component is exiting. |
+| <span class="prop-name">onExited</span> | <span class="prop-type">func |  | Callback fired when the component has exited. |
+| <span class="prop-name">onExiting</span> | <span class="prop-type">func |  | Callback fired when the component is exiting. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the popover is visible. |
+| <span class="prop-name">PaperProps</span> | <span class="prop-type">object |  | Properties applied to the `Paper` element. |
+| <span class="prop-name">transformOrigin</span> | <span class="prop-type">{horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | <span class="prop-default">{  vertical: 'top',  horizontal: 'left',}</span> | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
+| <span class="prop-name">transition</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">Grow</span> | Transition component. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/portal.md b/pages/api/portal.md
index 7c2f2d3dd8f428..304f8e7a29d33b 100644
--- a/pages/api/portal.md
+++ b/pages/api/portal.md
@@ -15,9 +15,9 @@ and take the control of our destiny.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The children to render into the `container`. |
-| container | union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. By default, it's using the body of the top-level document object, so it's simply `document.body` most of the time. |
-| onRendered | func |  | Callback fired once the children has been mounted into the `container`. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The children to render into the `container`. |
+| <span class="prop-name">container</span> | <span class="prop-type">union:&nbsp;object&nbsp;&#124;<br>&nbsp;func<br> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. By default, it's using the body of the top-level document object, so it's simply `document.body` most of the time. |
+| <span class="prop-name">onRendered</span> | <span class="prop-type">func |  | Callback fired once the children has been mounted into the `container`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/radio-group.md b/pages/api/radio-group.md
index 6620ac29d78df8..9d0e50dad79179 100644
--- a/pages/api/radio-group.md
+++ b/pages/api/radio-group.md
@@ -12,10 +12,10 @@ filename: /src/Radio/RadioGroup.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component. |
-| name | string |  | The name used to reference the value of the control. |
-| onChange | func |  | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback<br>*value:* The `value` of the selected radio button |
-| value | string |  | Value of the selected radio button. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  | The name used to reference the value of the control. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback<br>*value:* The `value` of the selected radio button |
+| <span class="prop-name">value</span> | <span class="prop-type">string |  | Value of the selected radio button. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/radio.md b/pages/api/radio.md
index 7338a36b2246b0..d795f71fda7c96 100644
--- a/pages/api/radio.md
+++ b/pages/api/radio.md
@@ -12,20 +12,20 @@ filename: /src/Radio/Radio.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| checked | union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
-| checkedIcon | node |  | The icon to display when the component is checked. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool |  | If `true`, the switch will be disabled. |
-| disableRipple | bool |  | If `true`, the ripple effect will be disabled. |
-| icon | node |  | The icon to display when the component is unchecked. |
-| id | string |  | The id of the `input` element. |
-| inputProps | object |  | Properties applied to the `input` element. |
-| inputRef | func |  | Use that property to pass a ref callback to the native input component. |
-| name | string |  |  |
-| onChange | func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
-| type | string |  | The input component property `type`. |
-| value | string |  | The value of the component. |
+| <span class="prop-name">checked</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
+| <span class="prop-name">checkedIcon</span> | <span class="prop-type">node |  | The icon to display when the component is checked. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool |  | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon to display when the component is unchecked. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The id of the `input` element. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  |  |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">type</span> | <span class="prop-type">string |  | The input component property `type`. |
+| <span class="prop-name">value</span> | <span class="prop-type">string |  | The value of the component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/reboot.md b/pages/api/reboot.md
index cfa51cbfc7ba86..29cbba6c4bd1fa 100644
--- a/pages/api/reboot.md
+++ b/pages/api/reboot.md
@@ -12,7 +12,7 @@ Kickstart an elegant, consistent, and simple baseline to build upon.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node | null | You can only provide a single element with react@15, a node with react@16. |
+| <span class="prop-name">children</span> | <span class="prop-type">node | <span class="prop-default">null</span> | You can only provide a single element with react@15, a node with react@16. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/select.md b/pages/api/select.md
index fe47fcfa71a3d8..8be6f95e4ded1d 100644
--- a/pages/api/select.md
+++ b/pages/api/select.md
@@ -12,21 +12,21 @@ filename: /src/Select/Select.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| autoWidth | bool | false | If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input. |
-| children | node |  | The option elements to populate the select with. Can be some `MenuItem` when `native` is false and `option` when `native` is true. |
-| classes | object |  | Useful to extend the style applied to components. |
-| displayEmpty | bool | false | If `true`, the selected item is displayed even if its value is empty. You can only use it when the `native` property is `false` (default). |
-| input | element | &lt;Input /> | An `Input` element; does not have to be a material-ui specific `Input`. |
-| inputProps | object |  | Properties applied to the `input` element. When `native` is `true`, the properties are applied on the `select` element. |
-| MenuProps | object |  | Properties applied to the `Menu` element. |
-| multiple | bool | false | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). |
-| native | bool | false | If `true`, the component will be using a native `select` element. |
-| onChange | func |  | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object, child: object) => void`<br>*event:* The event source of the callback<br>*child:* The react element that was selected |
-| onClose | func |  | Callback fired when the component requests to be closed. Useful in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| onOpen | func |  | Callback fired when the component requests to be opened. Useful in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| open | bool |  | Control `select` open state. You can only use it when the `native` property is `false` (default). |
-| renderValue | func |  | Render the selected value. You can only use it when the `native` property is `false` (default). |
-| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
+| <span class="prop-name">autoWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The option elements to populate the select with. Can be some `MenuItem` when `native` is false and `option` when `native` is true. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">displayEmpty</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the selected item is displayed even if its value is empty. You can only use it when the `native` property is `false` (default). |
+| <span class="prop-name">input</span> | <span class="prop-type">element | <span class="prop-default">&lt;Input /></span> | An `Input` element; does not have to be a material-ui specific `Input`. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. When `native` is `true`, the properties are applied on the `select` element. |
+| <span class="prop-name">MenuProps</span> | <span class="prop-type">object |  | Properties applied to the `Menu` element. |
+| <span class="prop-name">multiple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). |
+| <span class="prop-name">native</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will be using a native `select` element. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object, child: object) => void`<br>*event:* The event source of the callback<br>*child:* The react element that was selected |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed. Useful in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">onOpen</span> | <span class="prop-type">func |  | Callback fired when the component requests to be opened. Useful in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">open</span> | <span class="prop-type">bool |  | Control `select` open state. You can only use it when the `native` property is `false` (default). |
+| <span class="prop-name">renderValue</span> | <span class="prop-type">func |  | Render the selected value. You can only use it when the `native` property is `false` (default). |
+| <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/slide.md b/pages/api/slide.md
index 4478a55a297ee0..0070e1cd82d219 100644
--- a/pages/api/slide.md
+++ b/pages/api/slide.md
@@ -13,10 +13,10 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
-| direction | enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'&nbsp;&#124;<br>&nbsp;'up'&nbsp;&#124;<br>&nbsp;'down'<br> | 'down' | Direction the child node will enter from. |
-| in | bool |  | If `true`, show the component; triggers the enter or exit animation. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
+| <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'&nbsp;&#124;<br>&nbsp;'up'&nbsp;&#124;<br>&nbsp;'down'<br> | <span class="prop-default">'down'</span> | Direction the child node will enter from. |
+| <span class="prop-name">in</span> | <span class="prop-type">bool |  | If `true`, show the component; triggers the enter or exit animation. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/snackbar-content.md b/pages/api/snackbar-content.md
index d0f5f5d74baa94..66480936ec1f7c 100644
--- a/pages/api/snackbar-content.md
+++ b/pages/api/snackbar-content.md
@@ -12,9 +12,9 @@ filename: /src/Snackbar/SnackbarContent.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| action | node |  | The action to display. |
-| classes | object |  | Useful to extend the style applied to components. |
-| message | node |  | The message to display. |
+| <span class="prop-name">action</span> | <span class="prop-type">node |  | The action to display. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">message</span> | <span class="prop-type">node |  | The message to display. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md
index b7c3e079bcc553..924a17b4eaefa2 100644
--- a/pages/api/snackbar.md
+++ b/pages/api/snackbar.md
@@ -12,26 +12,26 @@ filename: /src/Snackbar/Snackbar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| action | node |  | The action to display. |
-| anchorOrigin | {horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | {  vertical: 'bottom',  horizontal: 'center',} | The anchor of the `Snackbar`. |
-| autoHideDuration | number |  | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
-| children | element |  | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableWindowBlurListener | bool | false | If `true`, the `autoHideDuration` timer will expire even if the window is not focused. |
-| key | any |  | When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/>, add the key property to ensure independent treatment of each message. e.g. &lt;Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. |
-| message | node |  | The message to display. |
-| onClose | func |  | Callback fired when the component requests to be closed. Typically `onClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop. The `reason` parameter can optionally be used to control the response to `onClose`, for example ignoring `clickaway`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback<br>*reason:* Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` |
-| onEnter | func |  | Callback fired before the transition is entering. |
-| onEntered | func |  | Callback fired when the transition has entered. |
-| onEntering | func |  | Callback fired when the transition is entering. |
-| onExit | func |  | Callback fired before the transition is exiting. |
-| onExited | func |  | Callback fired when the transition has exited. |
-| onExiting | func |  | Callback fired when the transition is exiting. |
-| open | bool |  | If true, `Snackbar` is open. |
-| resumeHideDuration | number |  | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
-| SnackbarContentProps | object |  | Properties applied to the `SnackbarContent` element. |
-| transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Slide | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">action</span> | <span class="prop-type">node |  | The action to display. |
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{horizontal?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'left'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'right'<br><br>, vertical?: union:&nbsp;number&nbsp;&#124;<br>&nbsp;enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'center'&nbsp;&#124;<br>&nbsp;'bottom'<br><br>} | <span class="prop-default">{  vertical: 'bottom',  horizontal: 'center',}</span> | The anchor of the `Snackbar`. |
+| <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number |  | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
+| <span class="prop-name">children</span> | <span class="prop-type">element |  | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableWindowBlurListener</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the `autoHideDuration` timer will expire even if the window is not focused. |
+| <span class="prop-name">key</span> | <span class="prop-type">any |  | When displaying multiple consecutive Snackbars from a parent rendering a single &lt;Snackbar/>, add the key property to ensure independent treatment of each message. e.g. &lt;Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. |
+| <span class="prop-name">message</span> | <span class="prop-type">node |  | The message to display. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed. Typically `onClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop. The `reason` parameter can optionally be used to control the response to `onClose`, for example ignoring `clickaway`.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback<br>*reason:* Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` |
+| <span class="prop-name">onEnter</span> | <span class="prop-type">func |  | Callback fired before the transition is entering. |
+| <span class="prop-name">onEntered</span> | <span class="prop-type">func |  | Callback fired when the transition has entered. |
+| <span class="prop-name">onEntering</span> | <span class="prop-type">func |  | Callback fired when the transition is entering. |
+| <span class="prop-name">onExit</span> | <span class="prop-type">func |  | Callback fired before the transition is exiting. |
+| <span class="prop-name">onExited</span> | <span class="prop-type">func |  | Callback fired when the transition has exited. |
+| <span class="prop-name">onExiting</span> | <span class="prop-type">func |  | Callback fired when the transition is exiting. |
+| <span class="prop-name">open</span> | <span class="prop-type">bool |  | If true, `Snackbar` is open. |
+| <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number |  | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
+| <span class="prop-name">SnackbarContentProps</span> | <span class="prop-type">object |  | Properties applied to the `SnackbarContent` element. |
+| <span class="prop-name">transition</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">Slide</span> | Transition component. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/step-button.md b/pages/api/step-button.md
index 7364468b6497ef..3669c174a50827 100644
--- a/pages/api/step-button.md
+++ b/pages/api/step-button.md
@@ -12,9 +12,9 @@ filename: /src/Stepper/StepButton.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Can be a `StepLabel` or a node to place inside `StepLabel` as children. |
-| icon | node |  | The icon displayed by the step label. |
-| optional | node |  | The optional node to display. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Can be a `StepLabel` or a node to place inside `StepLabel` as children. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon displayed by the step label. |
+| <span class="prop-name">optional</span> | <span class="prop-type">node |  | The optional node to display. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/step-content.md b/pages/api/step-content.md
index 662c4eefc45ef2..e8983dd22cdfee 100644
--- a/pages/api/step-content.md
+++ b/pages/api/step-content.md
@@ -12,9 +12,9 @@ filename: /src/Stepper/StepContent.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Step content. |
-| transition | func | Collapse | Collapse component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | 'auto' | Adjust the duration of the content expand transition. Passed as a property to the transition component.<br>Set to 'auto' to automatically calculate transition time based on height. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Step content. |
+| <span class="prop-name">transition</span> | <span class="prop-type">func | <span class="prop-default">Collapse</span> | Collapse component. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | Adjust the duration of the content expand transition. Passed as a property to the transition component.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/step-icon.md b/pages/api/step-icon.md
index 4585140fa523ad..4d8f34866824cd 100644
--- a/pages/api/step-icon.md
+++ b/pages/api/step-icon.md
@@ -12,10 +12,10 @@ filename: /src/Stepper/StepIcon.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| active | bool | false | Whether this step is active. |
-| classes | object |  | Classses for component style customizations. |
-| completed | bool | false | Mark the step as completed. Is passed to child components. |
-| <span style="color: #31a148">icon *</span> | node |  | The icon displayed by the step label. |
+| <span class="prop-name">active</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Whether this step is active. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Classses for component style customizations. |
+| <span class="prop-name">completed</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Mark the step as completed. Is passed to child components. |
+| <span class="prop-name required">icon *</span> | <span class="prop-type">node |  | The icon displayed by the step label. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/step-label.md b/pages/api/step-label.md
index 3a5f25324d1794..4e6c284f944aa2 100644
--- a/pages/api/step-label.md
+++ b/pages/api/step-label.md
@@ -12,11 +12,11 @@ filename: /src/Stepper/StepLabel.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | In most cases will simply be a string containing a title for the label. |
-| classes | object |  | Custom styles for component. |
-| disabled | bool | false | Mark the step as disabled, will also disable the button if `StepLabelButton` is a child of `StepLabel`. Is passed to child components. |
-| icon | node |  | Override the default icon. |
-| optional | node |  | The optional node to display. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | In most cases will simply be a string containing a title for the label. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Custom styles for component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Mark the step as disabled, will also disable the button if `StepLabelButton` is a child of `StepLabel`. Is passed to child components. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | Override the default icon. |
+| <span class="prop-name">optional</span> | <span class="prop-type">node |  | The optional node to display. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/step.md b/pages/api/step.md
index 5d8be53c0c4560..972b0547edaa59 100644
--- a/pages/api/step.md
+++ b/pages/api/step.md
@@ -12,10 +12,10 @@ filename: /src/Stepper/Step.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| active | bool | false | Sets the step as active. Is passed to child components. |
-| children | node |  | Should be `Step` sub-components such as `StepLabel`, `StepContent`. |
-| completed | bool | false | Mark the step as completed. Is passed to child components. |
-| disabled | bool | false | Mark the step as disabled, will also disable the button if `StepButton` is a child of `Step`. Is passed to child components. |
+| <span class="prop-name">active</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Sets the step as active. Is passed to child components. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Should be `Step` sub-components such as `StepLabel`, `StepContent`. |
+| <span class="prop-name">completed</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Mark the step as completed. Is passed to child components. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Mark the step as disabled, will also disable the button if `StepButton` is a child of `Step`. Is passed to child components. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/stepper.md b/pages/api/stepper.md
index 9570e498372a56..c705ff8f768535 100644
--- a/pages/api/stepper.md
+++ b/pages/api/stepper.md
@@ -12,13 +12,13 @@ filename: /src/Stepper/Stepper.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| activeStep | number | 0 | Set the active step (zero based index). |
-| alternativeLabel | bool | false | If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon. |
-| <span style="color: #31a148">children *</span> | node |  | Two or more `&lt;Step />` components. |
-| classes | object |  | Useful to extend the style applied to components. |
-| connector | element | &lt;StepConnector /> | A component to be placed between each step. |
-| nonLinear | bool | false | If set the `Stepper` will not assist in controlling steps for linear flow. |
-| orientation | enum:&nbsp;'horizontal'&nbsp;&#124;<br>&nbsp;'vertical'<br> | 'horizontal' | The stepper orientation (layout flow direction). |
+| <span class="prop-name">activeStep</span> | <span class="prop-type">number | <span class="prop-default">0</span> | Set the active step (zero based index). |
+| <span class="prop-name">alternativeLabel</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | Two or more `&lt;Step />` components. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">connector</span> | <span class="prop-type">element | <span class="prop-default">&lt;StepConnector /></span> | A component to be placed between each step. |
+| <span class="prop-name">nonLinear</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If set the `Stepper` will not assist in controlling steps for linear flow. |
+| <span class="prop-name">orientation</span> | <span class="prop-type">enum:&nbsp;'horizontal'&nbsp;&#124;<br>&nbsp;'vertical'<br> | <span class="prop-default">'horizontal'</span> | The stepper orientation (layout flow direction). |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md
index b583f0502eec8a..0da579343c4a78 100644
--- a/pages/api/svg-icon.md
+++ b/pages/api/svg-icon.md
@@ -12,13 +12,13 @@ filename: /src/SvgIcon/SvgIcon.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | Node passed into the SVG element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'action', 'disabled', 'error', 'inherit', 'primary', 'secondary'<br> | 'inherit' | The color of the component. It supports those theme colors that make sense for this component. You can use the `nativeColor` property to apply a color attribute to the SVG element. |
-| fontSize | bool | false | If `true`, the icon size will be determined by the font-size. |
-| nativeColor | string |  | Applies a color attribute to the SVG element. |
-| titleAccess | string |  | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
-| viewBox | string | '0 0 24 24' | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | Node passed into the SVG element. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'action', 'disabled', 'error', 'inherit', 'primary', 'secondary'<br> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. You can use the `nativeColor` property to apply a color attribute to the SVG element. |
+| <span class="prop-name">fontSize</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the icon size will be determined by the font-size. |
+| <span class="prop-name">nativeColor</span> | <span class="prop-type">string |  | Applies a color attribute to the SVG element. |
+| <span class="prop-name">titleAccess</span> | <span class="prop-type">string |  | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
+| <span class="prop-name">viewBox</span> | <span class="prop-type">string | <span class="prop-default">'0 0 24 24'</span> | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/switch.md b/pages/api/switch.md
index f5476587a530e0..0a3ac64d3a20b2 100644
--- a/pages/api/switch.md
+++ b/pages/api/switch.md
@@ -12,20 +12,20 @@ filename: /src/Switch/Switch.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| checked | union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
-| checkedIcon | node |  | The icon to display when the component is checked. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool |  | If `true`, the switch will be disabled. |
-| disableRipple | bool |  | If `true`, the ripple effect will be disabled. |
-| icon | node |  | The icon to display when the component is unchecked. |
-| id | string |  | The id of the `input` element. |
-| inputProps | object |  | Properties applied to the `input` element. |
-| inputRef | func |  | Use that property to pass a ref callback to the native input component. |
-| name | string |  |  |
-| onChange | func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
-| type | string |  | The input component property `type`. |
-| value | string |  | The value of the component. |
+| <span class="prop-name">checked</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;string<br> |  | If `true`, the component is checked. |
+| <span class="prop-name">checkedIcon</span> | <span class="prop-type">node |  | The icon to display when the component is checked. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool |  | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon to display when the component is unchecked. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The id of the `input` element. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the `input` element. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  |  |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
+| <span class="prop-name">type</span> | <span class="prop-type">string |  | The input component property `type`. |
+| <span class="prop-name">value</span> | <span class="prop-type">string |  | The value of the component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/tab.md b/pages/api/tab.md
index 4b1defbbfa7014..8297c4227cc584 100644
--- a/pages/api/tab.md
+++ b/pages/api/tab.md
@@ -12,11 +12,11 @@ filename: /src/Tabs/Tab.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| disabled | bool | false | If `true`, the tab will be disabled. |
-| icon | node |  | The icon element. |
-| label | node |  | The label element. |
-| value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the tab will be disabled. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon element. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |  | The label element. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-body.md b/pages/api/table-body.md
index 79f8978d74bf94..de7bda05393c0e 100644
--- a/pages/api/table-body.md
+++ b/pages/api/table-body.md
@@ -12,8 +12,8 @@ filename: /src/Table/TableBody.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component, normally `TableRow`. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'tbody' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component, normally `TableRow`. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'tbody'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-cell.md b/pages/api/table-cell.md
index 74812ec1f07372..9aeb269b13bafe 100644
--- a/pages/api/table-cell.md
+++ b/pages/api/table-cell.md
@@ -12,14 +12,14 @@ filename: /src/Table/TableCell.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The table cell contents. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. |
-| numeric | bool | false | If `true`, content will align to the right. |
-| padding | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> | 'default' | Sets the padding applied to the cell. |
-| scope | string |  | Set scope attribute. |
-| sortDirection | enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'&nbsp;&#124;<br>&nbsp;false<br> |  | Set aria-sort direction. |
-| variant | enum:&nbsp;'head'&nbsp;&#124;<br>&nbsp;'body'&nbsp;&#124;<br>&nbsp;'footer'<br> |  | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The table cell contents. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">numeric</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, content will align to the right. |
+| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> | <span class="prop-default">'default'</span> | Sets the padding applied to the cell. |
+| <span class="prop-name">scope</span> | <span class="prop-type">string |  | Set scope attribute. |
+| <span class="prop-name">sortDirection</span> | <span class="prop-type">enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'&nbsp;&#124;<br>&nbsp;false<br> |  | Set aria-sort direction. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'head'&nbsp;&#124;<br>&nbsp;'body'&nbsp;&#124;<br>&nbsp;'footer'<br> |  | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md
index 0e7647c47277f7..8068317b66f56c 100644
--- a/pages/api/table-footer.md
+++ b/pages/api/table-footer.md
@@ -12,8 +12,8 @@ filename: /src/Table/TableFooter.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content of the component, normally `TableRow`. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'tfoot' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component, normally `TableRow`. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'tfoot'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-head.md b/pages/api/table-head.md
index e1ce0ae689a3bd..bef625705e1955 100644
--- a/pages/api/table-head.md
+++ b/pages/api/table-head.md
@@ -12,8 +12,8 @@ filename: /src/Table/TableHead.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component, normally `TableRow`. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'thead' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component, normally `TableRow`. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'thead'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md
index 87df6a6e41efe5..4d4f3aacb0b4dd 100644
--- a/pages/api/table-pagination.md
+++ b/pages/api/table-pagination.md
@@ -12,19 +12,19 @@ A `TableCell` based component for placing inside `TableFooter` for pagination.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| Actions | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | TablePaginationActions | The component used for displaying the actions. Either a string to use a DOM element or a component. |
-| backIconButtonProps | object |  | Properties applied to the back arrow `IconButton` component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | TableCell | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span style="color: #31a148">count *</span> | number |  | The total number of rows. |
-| labelDisplayedRows | func | ({ from, to, count }) => `${from}-${to} of ${count}` | Useful to customize the displayed rows label. |
-| labelRowsPerPage | node | 'Rows per page:' | Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }` object. |
-| nextIconButtonProps | object |  | Properties applied to the next arrow `IconButton` component. |
-| <span style="color: #31a148">onChangePage *</span> | func |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback<br>*page:* The page selected |
-| onChangeRowsPerPage | func |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| <span style="color: #31a148">page *</span> | number |  | The zero-based index of the current page. |
-| <span style="color: #31a148">rowsPerPage *</span> | number |  | The number of rows per page. |
-| rowsPerPageOptions | array | [5, 10, 25] | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
+| <span class="prop-name">Actions</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">TablePaginationActions</span> | The component used for displaying the actions. Either a string to use a DOM element or a component. |
+| <span class="prop-name">backIconButtonProps</span> | <span class="prop-type">object |  | Properties applied to the back arrow `IconButton` component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name required">count *</span> | <span class="prop-type">number |  | The total number of rows. |
+| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func | <span class="prop-default">({ from, to, count }) => `${from}-${to} of ${count}`</span> | Useful to customize the displayed rows label. |
+| <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node | <span class="prop-default">'Rows per page:'</span> | Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }` object. |
+| <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object |  | Properties applied to the next arrow `IconButton` component. |
+| <span class="prop-name required">onChangePage *</span> | <span class="prop-type">func |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback<br>*page:* The page selected |
+| <span class="prop-name">onChangeRowsPerPage</span> | <span class="prop-type">func |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name required">page *</span> | <span class="prop-type">number |  | The zero-based index of the current page. |
+| <span class="prop-name required">rowsPerPage *</span> | <span class="prop-type">number |  | The number of rows per page. |
+| <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">array | <span class="prop-default">[5, 10, 25]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-row.md b/pages/api/table-row.md
index 4708aa8b39fd6c..37f7aca46a2dfa 100644
--- a/pages/api/table-row.md
+++ b/pages/api/table-row.md
@@ -13,11 +13,11 @@ based on the material table element parent (head, body, etc).
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Should be valid `&lt;tr>` children such as `TableCell`. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'tr' | The component used for the root node. Either a string to use a DOM element or a component. |
-| hover | bool | false | If `true`, the table row will shade on hover. |
-| selected | bool | false | If `true`, the table row will have the selected shading. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Should be valid `&lt;tr>` children such as `TableCell`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'tr'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">hover</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the table row will shade on hover. |
+| <span class="prop-name">selected</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the table row will have the selected shading. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table-sort-label.md b/pages/api/table-sort-label.md
index c05e8f7b68a8ca..619577f9494145 100644
--- a/pages/api/table-sort-label.md
+++ b/pages/api/table-sort-label.md
@@ -12,10 +12,10 @@ A button based label for placing inside `TableCell` for column sorting.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| active | bool | false | If `true`, the label will have the active styling (should be true for the sorted column). |
-| children | node |  | Label contents, the arrow will be appended automatically. |
-| classes | object |  | Useful to extend the style applied to components. |
-| direction | enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'<br> | 'desc' | The current sort direction. |
+| <span class="prop-name">active</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label will have the active styling (should be true for the sorted column). |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Label contents, the arrow will be appended automatically. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'<br> | <span class="prop-default">'desc'</span> | The current sort direction. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/table.md b/pages/api/table.md
index d10c66426e4e7c..0a3e6401cd366c 100644
--- a/pages/api/table.md
+++ b/pages/api/table.md
@@ -12,9 +12,9 @@ filename: /src/Table/Table.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the table, normally `TableHeader` and `TableBody`. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'table' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the table, normally `TableHeader` and `TableBody`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/tabs.md b/pages/api/tabs.md
index 401c99ebf9012c..968456f36e64c7 100644
--- a/pages/api/tabs.md
+++ b/pages/api/tabs.md
@@ -12,20 +12,20 @@ filename: /src/Tabs/Tabs.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| action | func |  | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions that can be triggered programmatically. |
-| buttonClassName | string |  | The CSS class name of the scroll button elements. |
-| centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| fullWidth | bool | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views, like on mobile. |
-| indicatorClassName | string |  | The CSS class name of the indicator element. |
-| indicatorColor | union:&nbsp;string&nbsp;&#124;<br>&nbsp;enum:&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'primary'<br><br> | 'secondary' | Determines the color of the indicator. |
-| onChange | func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
-| scrollable | bool | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. |
-| scrollButtons | enum:&nbsp;'auto'&nbsp;&#124;<br>&nbsp;'on'&nbsp;&#124;<br>&nbsp;'off'<br> | 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them |
-| TabScrollButton | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | TabScrollButton | The component used to render the scroll buttons. |
-| textColor | enum:&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | 'inherit' | Determines the color of the `Tab`. |
-| value | any |  | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |
+| <span class="prop-name">action</span> | <span class="prop-type">func |  | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.<br><br>**Signature:**<br>`function(actions: object) => void`<br>*actions:* This object contains all possible actions that can be triggered programmatically. |
+| <span class="prop-name">buttonClassName</span> | <span class="prop-type">string |  | The CSS class name of the scroll button elements. |
+| <span class="prop-name">centered</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the tabs will be centered. This property is intended for large views. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the tabs will grow to use all the available space. This property is intended for small views, like on mobile. |
+| <span class="prop-name">indicatorClassName</span> | <span class="prop-type">string |  | The CSS class name of the indicator element. |
+| <span class="prop-name">indicatorColor</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;enum:&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'primary'<br><br> | <span class="prop-default">'secondary'</span> | Determines the color of the indicator. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
+| <span class="prop-name">scrollable</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. |
+| <span class="prop-name">scrollButtons</span> | <span class="prop-type">enum:&nbsp;'auto'&nbsp;&#124;<br>&nbsp;'on'&nbsp;&#124;<br>&nbsp;'off'<br> | <span class="prop-default">'auto'</span> | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them |
+| <span class="prop-name">TabScrollButton</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">TabScrollButton</span> | The component used to render the scroll buttons. |
+| <span class="prop-name">textColor</span> | <span class="prop-type">enum:&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | <span class="prop-default">'inherit'</span> | Determines the color of the `Tab`. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |  | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/text-field.md b/pages/api/text-field.md
index 5a1bcf89a667a6..3bffb79babed83 100644
--- a/pages/api/text-field.md
+++ b/pages/api/text-field.md
@@ -37,34 +37,34 @@ For advanced cases, please look at the source of TextField by clicking on the
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| autoComplete | string |  | This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill |
-| autoFocus | bool |  | If `true`, the input will be focused during the first mount. |
-| defaultValue | string |  | The default value of the `Input` element. |
-| disabled | bool |  | If `true`, the input will be disabled. |
-| error | bool |  | If `true`, the label will be displayed in an error state. |
-| FormHelperTextProps | object |  | Properties applied to the `FormHelperText` element. |
-| fullWidth | bool |  | If `true`, the input will take up the full width of its container. |
-| helperText | node |  | The helper text content. |
-| helperTextClassName | string |  | The CSS class name of the helper text element. |
-| id | string |  | The id of the `input` element. Use that property to make `label` and `helperText` accessible for screen readers. |
-| InputLabelProps | object |  | Properties applied to the `InputLabel` element. |
-| InputProps | object |  | Properties applied to the `Input` element. |
-| inputProps | object |  | Properties applied to the native `input` element. |
-| inputRef | func |  | Use that property to pass a ref callback to the native input component. |
-| label | node |  | The label content. |
-| labelClassName | string |  | The CSS class name of the label element. |
-| margin | enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'normal'<br> |  | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
-| multiline | bool |  | If `true`, a textarea element will be rendered instead of an input. |
-| name | string |  | Name attribute of the `input` element. |
-| onChange | func |  | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| placeholder | string |  | The short hint displayed in the input before the user enters a value. |
-| required | bool | false | If `true`, the label is displayed as required. |
-| rows | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Number of rows to display when multiline option is set to true. |
-| rowsMax | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Maximum number of rows to display when multiline option is set to true. |
-| select | bool | false | Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. If this option is set you must pass the options of the select as children. |
-| SelectProps | object |  | Properties applied to the `Select` element. |
-| type | string |  | Type attribute of the `Input` element. It should be a valid HTML5 input type. |
-| value | union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The value of the `Input` element, required for a controlled component. |
+| <span class="prop-name">autoComplete</span> | <span class="prop-type">string |  | This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill |
+| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool |  | If `true`, the input will be focused during the first mount. |
+| <span class="prop-name">defaultValue</span> | <span class="prop-type">string |  | The default value of the `Input` element. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the input will be disabled. |
+| <span class="prop-name">error</span> | <span class="prop-type">bool |  | If `true`, the label will be displayed in an error state. |
+| <span class="prop-name">FormHelperTextProps</span> | <span class="prop-type">object |  | Properties applied to the `FormHelperText` element. |
+| <span class="prop-name">fullWidth</span> | <span class="prop-type">bool |  | If `true`, the input will take up the full width of its container. |
+| <span class="prop-name">helperText</span> | <span class="prop-type">node |  | The helper text content. |
+| <span class="prop-name">helperTextClassName</span> | <span class="prop-type">string |  | The CSS class name of the helper text element. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The id of the `input` element. Use that property to make `label` and `helperText` accessible for screen readers. |
+| <span class="prop-name">InputLabelProps</span> | <span class="prop-type">object |  | Properties applied to the `InputLabel` element. |
+| <span class="prop-name">InputProps</span> | <span class="prop-type">object |  | Properties applied to the `Input` element. |
+| <span class="prop-name">inputProps</span> | <span class="prop-type">object |  | Properties applied to the native `input` element. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |  | The label content. |
+| <span class="prop-name">labelClassName</span> | <span class="prop-type">string |  | The CSS class name of the label element. |
+| <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'normal'<br> |  | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| <span class="prop-name">multiline</span> | <span class="prop-type">bool |  | If `true`, a textarea element will be rendered instead of an input. |
+| <span class="prop-name">name</span> | <span class="prop-type">string |  | Name attribute of the `input` element. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the value is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">placeholder</span> | <span class="prop-type">string |  | The short hint displayed in the input before the user enters a value. |
+| <span class="prop-name">required</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the label is displayed as required. |
+| <span class="prop-name">rows</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Number of rows to display when multiline option is set to true. |
+| <span class="prop-name">rowsMax</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br> |  | Maximum number of rows to display when multiline option is set to true. |
+| <span class="prop-name">select</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. If this option is set you must pass the options of the select as children. |
+| <span class="prop-name">SelectProps</span> | <span class="prop-type">object |  | Properties applied to the `Select` element. |
+| <span class="prop-name">type</span> | <span class="prop-type">string |  | Type attribute of the `Input` element. It should be a valid HTML5 input type. |
+| <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;arrayOf<br> |  | The value of the `Input` element, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/toolbar.md b/pages/api/toolbar.md
index f6349dbc660721..410418352db298 100644
--- a/pages/api/toolbar.md
+++ b/pages/api/toolbar.md
@@ -12,9 +12,9 @@ filename: /src/Toolbar/Toolbar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableGutters | bool | false | If `true`, disables gutter padding. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableGutters</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, disables gutter padding. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/tooltip.md b/pages/api/tooltip.md
index e29fa81a146bf4..24868ba33ba059 100644
--- a/pages/api/tooltip.md
+++ b/pages/api/tooltip.md
@@ -12,20 +12,20 @@ filename: /src/Tooltip/Tooltip.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | element |  | Tooltip reference element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| disableTriggerFocus | bool | false | Do not respond to focus events. |
-| disableTriggerHover | bool | false | Do not respond to hover events. |
-| disableTriggerTouch | bool | false | Do not respond to long press touch events. |
-| enterDelay | number | 0 | The number of milliseconds to wait before showing the tooltip. |
-| id | string |  | The relationship between the tooltip and the wrapper component is not clear from the DOM. By providing this property, we can use aria-describedby to solve the accessibility issue. |
-| leaveDelay | number | 0 | The number of milliseconds to wait before hidding the tooltip. |
-| onClose | func |  | Callback fired when the tooltip requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| onOpen | func |  | Callback fired when the tooltip requests to be open.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
-| open | bool |  | If `true`, the tooltip is shown. |
-| placement | enum:&nbsp;'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'<br> | 'bottom' | Tooltip placement |
-| PopperProps | object |  | Properties applied to the `Popper` element. |
-| <span style="color: #31a148">title *</span> | node |  | Tooltip title. Zero-length titles string are never displayed. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">element |  | Tooltip reference element. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">disableTriggerFocus</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Do not respond to focus events. |
+| <span class="prop-name">disableTriggerHover</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Do not respond to hover events. |
+| <span class="prop-name">disableTriggerTouch</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | Do not respond to long press touch events. |
+| <span class="prop-name">enterDelay</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The number of milliseconds to wait before showing the tooltip. |
+| <span class="prop-name">id</span> | <span class="prop-type">string |  | The relationship between the tooltip and the wrapper component is not clear from the DOM. By providing this property, we can use aria-describedby to solve the accessibility issue. |
+| <span class="prop-name">leaveDelay</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The number of milliseconds to wait before hidding the tooltip. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the tooltip requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">onOpen</span> | <span class="prop-type">func |  | Callback fired when the tooltip requests to be open.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| <span class="prop-name">open</span> | <span class="prop-type">bool |  | If `true`, the tooltip is shown. |
+| <span class="prop-name">placement</span> | <span class="prop-type">enum:&nbsp;'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'<br> | <span class="prop-default">'bottom'</span> | Tooltip placement |
+| <span class="prop-name">PopperProps</span> | <span class="prop-type">object |  | Properties applied to the `Popper` element. |
+| <span class="prop-name required">title *</span> | <span class="prop-type">node |  | Tooltip title. Zero-length titles string are never displayed. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/typography.md b/pages/api/typography.md
index f22b800a319d6e..cf4cfb6df29a23 100644
--- a/pages/api/typography.md
+++ b/pages/api/typography.md
@@ -12,16 +12,16 @@ filename: /src/Typography/Typography.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| align | enum:&nbsp;'inherit', 'left', 'center', 'right', 'justify'<br> | 'inherit' | Set the text-align on the component. |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
-| gutterBottom | bool | false | If `true`, the text will have a bottom margin. |
-| headlineMapping | object | {  display4: 'h1',  display3: 'h1',  display2: 'h1',  display1: 'h1',  headline: 'h1',  title: 'h2',  subheading: 'h3',  body2: 'aside',  body1: 'p',} | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
-| noWrap | bool | false | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
-| paragraph | bool | false | If `true`, the text will have a bottom margin. |
-| variant | enum:&nbsp;'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'<br> | 'body1' | Applies the theme typography styles. |
+| <span class="prop-name">align</span> | <span class="prop-type">enum:&nbsp;'inherit', 'left', 'center', 'right', 'justify'<br> | <span class="prop-default">'inherit'</span> | Set the text-align on the component. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
+| <span class="prop-name">gutterBottom</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
+| <span class="prop-name">headlineMapping</span> | <span class="prop-type">object | <span class="prop-default">{  display4: 'h1',  display3: 'h1',  display2: 'h1',  display1: 'h1',  headline: 'h1',  title: 'h2',  subheading: 'h3',  body2: 'aside',  body1: 'p',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
+| <span class="prop-name">noWrap</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
+| <span class="prop-name">paragraph</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'<br> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/api/zoom.md b/pages/api/zoom.md
index c30cb1e8bbf5a5..d3df81cb87bc77 100644
--- a/pages/api/zoom.md
+++ b/pages/api/zoom.md
@@ -14,9 +14,9 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
-| in | bool |  | If `true`, the component will transition in. |
-| timeout | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">children</span> | <span class="prop-type">union:&nbsp;element&nbsp;&#124;<br>&nbsp;func<br> |  | A single child content element. |
+| <span class="prop-name">in</span> | <span class="prop-type">bool |  | If `true`, the component will transition in. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/lab/api/speed-dial-action.md b/pages/lab/api/speed-dial-action.md
index 9c01b3b2c9aacc..068c7bbbe3431a 100644
--- a/pages/lab/api/speed-dial-action.md
+++ b/pages/lab/api/speed-dial-action.md
@@ -12,11 +12,11 @@ filename: /packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| ButtonProps | object |  | Properties applied to the `Button` component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| delay | number | 0 | Adds a transition delay, to allow a series of SpeedDialActions to be animated. |
-| <span style="color: #31a148">icon *</span> | node |  | The Icon to display in the SpeedDial Floating Action Button. |
-| tooltipTitle | node |  | Label to display in the tooltip. |
+| <span class="prop-name">ButtonProps</span> | <span class="prop-type">object |  | Properties applied to the `Button` component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">delay</span> | <span class="prop-type">number | <span class="prop-default">0</span> | Adds a transition delay, to allow a series of SpeedDialActions to be animated. |
+| <span class="prop-name required">icon *</span> | <span class="prop-type">node |  | The Icon to display in the SpeedDial Floating Action Button. |
+| <span class="prop-name">tooltipTitle</span> | <span class="prop-type">node |  | Label to display in the tooltip. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/lab/api/speed-dial-icon.md b/pages/lab/api/speed-dial-icon.md
index 891b55ac73b6f7..8c73960e882d3e 100644
--- a/pages/lab/api/speed-dial-icon.md
+++ b/pages/lab/api/speed-dial-icon.md
@@ -12,9 +12,9 @@ filename: /packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| icon | node |  | The icon to display in the SpeedDial Floating Action Button. |
-| openIcon | node |  | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon to display in the SpeedDial Floating Action Button. |
+| <span class="prop-name">openIcon</span> | <span class="prop-type">node |  | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md
index 57c73299211a9d..6452ee607e526a 100644
--- a/pages/lab/api/speed-dial.md
+++ b/pages/lab/api/speed-dial.md
@@ -12,17 +12,17 @@ filename: /packages/material-ui-lab/src/SpeedDial/SpeedDial.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">ariaLabel *</span> | string |  | The aria-label of the `Button` element. Also used to provide the `id` for the `SpeedDial` element and its children. |
-| ButtonProps | object |  | Properties applied to the `Button` element. |
-| <span style="color: #31a148">children *</span> | node |  | SpeedDialActions to display when the SpeedDial is `open`. |
-| classes | object |  | Useful to extend the style applied to components. |
-| hidden | bool | false | If `true`, the SpeedDial will be hidden. |
-| <span style="color: #31a148">icon *</span> | element |  | The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation. |
-| onClose | func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, key: string) => void`<br>*event:* The event source of the callback<br>*key:* The key pressed |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the SpeedDial is open. |
-| openIcon | node |  | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. |
-| transition | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | Zoom | Transition component. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | {  enter: duration.enteringScreen,  exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name required">ariaLabel *</span> | <span class="prop-type">string |  | The aria-label of the `Button` element. Also used to provide the `id` for the `SpeedDial` element and its children. |
+| <span class="prop-name">ButtonProps</span> | <span class="prop-type">object |  | Properties applied to the `Button` element. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | SpeedDialActions to display when the SpeedDial is `open`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">hidden</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the SpeedDial will be hidden. |
+| <span class="prop-name required">icon *</span> | <span class="prop-type">element |  | The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, key: string) => void`<br>*event:* The event source of the callback<br>*key:* The key pressed |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the SpeedDial is open. |
+| <span class="prop-name">openIcon</span> | <span class="prop-type">node |  | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. |
+| <span class="prop-name">transition</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">Zoom</span> | Transition component. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
diff --git a/src/Grid/Grid.js b/src/Grid/Grid.js
index 28c59544b54383..3c6c958c79402e 100644
--- a/src/Grid/Grid.js
+++ b/src/Grid/Grid.js
@@ -41,7 +41,7 @@ function generateGrid(globalStyles, theme, breakpoint) {
 
     /* eslint-disable max-len */
     // Close to the bootstrap implementation:
-    // https://github.com/twbs/bootstrap/blob/b0508a975d711d6b24c01f57dd5445c22699fac4/scss/mixins/_grid.scss#L69
+    // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
     /* eslint-enable max-len */
     styles[`grid-${breakpoint}-${size}`] = {
       flexBasis: width,