diff --git a/src/ActionBar/ActionBar.test.js b/src/ActionBar/ActionBar.test.js
index d2d1d73bd..debb28f45 100644
--- a/src/ActionBar/ActionBar.test.js
+++ b/src/ActionBar/ActionBar.test.js
@@ -74,6 +74,20 @@ describe('<ActionBar />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('ActionBar Header', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(
+                <ActionBar.Header
+                    description=''
+                    headingLevel={2}
+                    title='' />
+            );
+            expect(
+                element.find('.fd-action-bar__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the ActionBar component', () => {
             const element = mount(<ActionBar data-sample='Sample' />);
@@ -121,7 +135,7 @@ describe('<ActionBar />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
+        test('should allow props to be spread to the ActionBarHeader component\'s heading element', () => {
             const element = mount(
                 <ActionBar.Header
                     description=''
@@ -130,7 +144,7 @@ describe('<ActionBar />', () => {
             );
 
             expect(
-                element.find('h1').getDOMNode().attributes['data-sample'].value
+                element.find('h3').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
diff --git a/src/ActionBar/_ActionBarHeader.js b/src/ActionBar/_ActionBarHeader.js
index fe8e29ea4..d8792a889 100644
--- a/src/ActionBar/_ActionBarHeader.js
+++ b/src/ActionBar/_ActionBarHeader.js
@@ -1,18 +1,21 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const ActionBarHeader = ({ className, description, descriptionProps, title, titleProps, ...props }) => {
+const ActionBarHeader = ({ className, description, descriptionProps, headingLevel, title, titleProps, ...props }) => {
     const actionBarHeaderClasses = classnames(
         'fd-action-bar__header',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...props} className={actionBarHeaderClasses}>
-            <h1
+            <HeadingTag
                 {...titleProps}
-                className='fd-action-bar__title'>{title}</h1>
+                className='fd-action-bar__title'>{title}</HeadingTag>
             {description &&
                 <p
                     {...descriptionProps}
@@ -29,12 +32,18 @@ ActionBarHeader.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
     descriptionProps: PropTypes.object,
+    headingLevel: CustomPropTypes.range(1, 6),
     titleProps: PropTypes.object
 };
 
+ActionBarHeader.defaultProps = {
+    headingLevel: 3
+};
+
 ActionBarHeader.propDescriptions = {
     description: 'Localized text for the description.',
-    descriptionProps: 'Additional props to be spread to the description\'s `<p>` element.'
+    descriptionProps: 'Additional props to be spread to the description\'s `<p>` element.',
+    headingLevel: 'Heading level. `<h1>` is reserved for the page title.'
 };
 
 export default ActionBarHeader;
diff --git a/src/ActionBar/__snapshots__/ActionBar.test.js.snap b/src/ActionBar/__snapshots__/ActionBar.test.js.snap
index 33da7a377..633b954b1 100644
--- a/src/ActionBar/__snapshots__/ActionBar.test.js.snap
+++ b/src/ActionBar/__snapshots__/ActionBar.test.js.snap
@@ -14,11 +14,11 @@ exports[`<ActionBar /> create basic Action Bar 1`] = `
   <div
     className="fd-action-bar__header blue"
   >
-    <h1
+    <h3
       className="fd-action-bar__title"
     >
       Page Title
-    </h1>
+    </h3>
     <p
       className="fd-action-bar__description"
     >
@@ -49,11 +49,11 @@ exports[`<ActionBar /> create basic Action Bar 2`] = `
   <div
     className="fd-action-bar__header blue"
   >
-    <h1
+    <h3
       className="fd-action-bar__title"
     >
       Page Title
-    </h1>
+    </h3>
     <p
       className="fd-action-bar__description"
     >
@@ -91,11 +91,11 @@ exports[`<ActionBar /> create basic mobile Action Bar 1`] = `
     <div
       className="fd-action-bar__header"
     >
-      <h1
+      <h3
         className="fd-action-bar__title"
       >
         Page Title
-      </h1>
+      </h3>
       <p
         className="fd-action-bar__description"
       >
@@ -134,11 +134,11 @@ exports[`<ActionBar /> create basic mobile Action Bar 2`] = `
     <div
       className="fd-action-bar__header"
     >
-      <h1
+      <h3
         className="fd-action-bar__title"
       >
         Page Title
-      </h1>
+      </h3>
       <p
         className="fd-action-bar__description"
       >
diff --git a/src/Menu/Menu.test.js b/src/Menu/Menu.test.js
index c87253031..5aa05331b 100644
--- a/src/Menu/Menu.test.js
+++ b/src/Menu/Menu.test.js
@@ -131,6 +131,16 @@ describe('<Menu />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('MenuGroup', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(<Menu.Group headingLevel={2} title='Sample' />);
+
+            expect(
+                element.find('.fd-menu__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Menu component', () => {
             const element = mount(<Menu data-sample='Sample' />);
@@ -221,11 +231,11 @@ describe('<Menu />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the MenuGroup h1 component', () => {
+        test('should allow props to be spread to the MenuGroup heading component', () => {
             const element = mount(<Menu.Group title='Sample' titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
-                element.find('h1').getDOMNode().attributes['data-sample'].value
+                element.find('h3').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
     });
diff --git a/src/Menu/_MenuGroup.js b/src/Menu/_MenuGroup.js
index 750d535c7..ac067fad8 100644
--- a/src/Menu/_MenuGroup.js
+++ b/src/Menu/_MenuGroup.js
@@ -1,16 +1,19 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const MenuGroup = ({ title, children, className, titleProps, ...props }) => {
+const MenuGroup = ({ title, children, className, headingLevel, titleProps, ...props }) => {
     const menuGroupClasses = classnames(
         'fd-menu__group',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...props} className={menuGroupClasses}>
-            <h1 {...titleProps} className='fd-menu__title'>{title}</h1>
+            <HeadingTag {...titleProps} className='fd-menu__title'>{title}</HeadingTag>
             {children}
         </div>
     );
@@ -21,7 +24,12 @@ MenuGroup.displayName = 'Menu.Group';
 MenuGroup.propTypes = {
     title: PropTypes.string.isRequired,
     className: PropTypes.string,
+    headingLevel: CustomPropTypes.range(2, 6),
     titleProps: PropTypes.object
 };
 
+MenuGroup.defaultProps = {
+    headingLevel: 3
+};
+
 export default MenuGroup;
diff --git a/src/Menu/__snapshots__/Menu.test.js.snap b/src/Menu/__snapshots__/Menu.test.js.snap
index f866fae19..6bb13bc0e 100644
--- a/src/Menu/__snapshots__/Menu.test.js.snap
+++ b/src/Menu/__snapshots__/Menu.test.js.snap
@@ -144,11 +144,11 @@ exports[`<Menu /> create menu group component 1`] = `
   <div
     className="fd-menu__group blue"
   >
-    <h1
+    <h3
       className="fd-menu__title"
     >
       Group Header
-    </h1>
+    </h3>
     <ul
       className="fd-menu__list"
     >
@@ -184,11 +184,11 @@ exports[`<Menu /> create menu group component 1`] = `
   <div
     className="fd-menu__group"
   >
-    <h1
+    <h3
       className="fd-menu__title"
     >
       Group Header 2
-    </h1>
+    </h3>
     <ul
       className="fd-menu__list"
     >
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index 502b44f6c..fd0bb3de3 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -30,7 +30,7 @@ class Modal extends Component {
     }
 
     render() {
-        const { localizedText, children, title, actions, className, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;
+        const { localizedText, children, title, actions, className, headingLevel, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;
 
         const modalClasses = classnames(
             'fd-ui__overlay',
@@ -39,6 +39,8 @@ class Modal extends Component {
             className
         );
 
+        const HeadingTag = `h${headingLevel}`;
+
         if (!show) {
             return null;
         }
@@ -63,9 +65,9 @@ class Modal extends Component {
                                 className='fd-modal__content'
                                 role='document'>
                                 <div {...headerProps} className='fd-modal__header'>
-                                    <h1 {...titleProps} className='fd-modal__title'>
+                                    <HeadingTag {...titleProps} className='fd-modal__title'>
                                         {title}
-                                    </h1>
+                                    </HeadingTag>
                                     <button
                                         {...closeProps}
                                         aria-label={localizedText.closeButton}
@@ -106,6 +108,7 @@ Modal.propTypes = {
     contentProps: PropTypes.object,
     footerProps: PropTypes.object,
     headerProps: PropTypes.object,
+    headingLevel: CustomPropTypes.range(2, 6),
     localizedText: CustomPropTypes.i18n({
         closeButton: PropTypes.string
     }),
@@ -114,6 +117,7 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
+    headingLevel: 3,
     localizedText: {
         closeButton: 'Close'
     }
diff --git a/src/Modal/Modal.test.js b/src/Modal/Modal.test.js
index 132ca9418..69f883926 100644
--- a/src/Modal/Modal.test.js
+++ b/src/Modal/Modal.test.js
@@ -90,7 +90,7 @@ describe('<Modal />', () => {
 
     test('create information modal', () => {
         component = mount(infoModal);
-        expect(component.find('h1.fd-modal__title').text()).toEqual(modalInfoTitle);
+        expect(component.find('.fd-modal__title').text()).toEqual(modalInfoTitle);
 
         // close modal
         component.find('button.fd-button--light.fd-modal__close').simulate('click');
@@ -114,19 +114,32 @@ describe('<Modal />', () => {
 
     test('create confirm modal', () => {
         component = mount(confirmModal);
-        expect(component.find('h1.fd-modal__title').text()).toEqual(
+        expect(component.find('.fd-modal__title').text()).toEqual(
             modalConfirmTitle
         );
     });
 
     test('create form modal', () => {
         component = mount(formModal);
-        expect(component.find('h1.fd-modal__title').text()).toEqual(modalFormTitle);
+        expect(component.find('.fd-modal__title').text()).toEqual(modalFormTitle);
     });
 
     test('do not show info modal', () => {
         component = mount(infoNoShowModal);
-        expect(component.find('h1.fd-modal__title').exists()).toBeFalsy();
+        expect(component.find('.fd-modal__title').exists()).toBeFalsy();
+    });
+
+    describe('Modal Headings', () => {
+        test('should allow customization of header level', () => {
+            component = mount(
+                <Modal headingLevel={2}
+                    show
+                    title='Sample' />);
+
+            expect(
+                component.find('.fd-modal__title').type()
+            ).toBe('h2');
+        });
     });
 
     describe('Prop spreading', () => {
@@ -171,7 +184,7 @@ describe('<Modal />', () => {
             ).toBe('Sample Title');
         });
 
-        test('should allow props to be spread to the Modal component\'s h1 element', () => {
+        test('should allow props to be spread to the Modal component\'s header element', () => {
             component = mount(
                 <Modal
                     show
@@ -180,7 +193,7 @@ describe('<Modal />', () => {
             );
 
             expect(
-                component.find('h1').getDOMNode().attributes['data-sample']
+                component.find('.fd-modal__title').getDOMNode().attributes['data-sample']
                     .value
             ).toBe('Sample Title');
         });
diff --git a/src/Panel/Panel.test.js b/src/Panel/Panel.test.js
index 1ed7c2507..555c43c36 100644
--- a/src/Panel/Panel.test.js
+++ b/src/Panel/Panel.test.js
@@ -140,6 +140,16 @@ describe('<Panel />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('PanelHead', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(<Panel.Head headingLevel={2} title='Sample' />);
+
+            expect(
+                element.find('.fd-panel__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Panel component', () => {
             const element = mount(<Panel data-sample='Sample' />);
@@ -181,7 +191,7 @@ describe('<Panel />', () => {
             ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the PanelHead component\'s h1 element', () => {
+        xtest('should allow props to be spread to the PanelHead component\'s heading element', () => {
             // TODO: placeholder for this test description once that functionality is built
         });
 
diff --git a/src/Panel/_PanelHead.js b/src/Panel/_PanelHead.js
index 3076f677e..3a087afb0 100644
--- a/src/Panel/_PanelHead.js
+++ b/src/Panel/_PanelHead.js
@@ -1,18 +1,21 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 const PanelHead = props => {
-    const { title, description, className, ...rest } = props;
+    const { title, description, className, headingLevel, ...rest } = props;
 
     const panelHeadClasses = classnames(
         'fd-panel__head',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...rest} className={panelHeadClasses}>
-            {title ? <h1 className='fd-panel__title'>{title}</h1> : null}
+            {title ? <HeadingTag className='fd-panel__title'>{title}</HeadingTag> : null}
             {description ? <p className='fd-panel__description'>{description}</p> : null}
         </div>
     );
@@ -23,9 +26,14 @@ PanelHead.displayName = 'Panel.Head';
 PanelHead.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
+    headingLevel: CustomPropTypes.range(2, 6),
     title: PropTypes.string
 };
 
+PanelHead.defaultProps = {
+    headingLevel: 3
+};
+
 PanelHead.propDescriptions = {
     description: 'Localized text for the description of the panel.',
     title: 'Localized text for the title of the panel.'
diff --git a/src/Panel/__snapshots__/Panel.test.js.snap b/src/Panel/__snapshots__/Panel.test.js.snap
index fb6268537..3cede033a 100644
--- a/src/Panel/__snapshots__/Panel.test.js.snap
+++ b/src/Panel/__snapshots__/Panel.test.js.snap
@@ -10,11 +10,11 @@ exports[`<Panel /> create panels 1`] = `
     <div
       className="fd-panel__head"
     >
-      <h1
+      <h3
         className="fd-panel__title"
       >
         Panel Header with Actions
-      </h1>
+      </h3>
       <p
         className="fd-panel__description"
       >
@@ -64,11 +64,11 @@ exports[`<Panel /> create panels 2`] = `
     <div
       className="fd-panel__head"
     >
-      <h1
+      <h3
         className="fd-panel__title"
       >
         Panel Header with Actions
-      </h1>
+      </h3>
     </div>
     <div
       className="fd-panel__body"
@@ -137,11 +137,11 @@ exports[`<Panel /> create panels 3`] = `
     <div
       className="fd-panel__head blue"
     >
-      <h1
+      <h3
         className="fd-panel__title"
       >
         Panel Header with Actions
-      </h1>
+      </h3>
       <p
         className="fd-panel__description"
       >
diff --git a/src/SideNavigation/SideNav.test.js b/src/SideNavigation/SideNav.test.js
index 2d5f5dd94..c8294094f 100644
--- a/src/SideNavigation/SideNav.test.js
+++ b/src/SideNavigation/SideNav.test.js
@@ -326,6 +326,16 @@ describe('<SideNav />', () => {
         expect(wrapper.state('selectedId')).toEqual('subitem_25');
     });
 
+    describe('SideNavList', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(<SideNav.List headingLevel={2} title='test' />);
+
+            expect(
+                element.find('.fd-side-nav__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the SideNav component', () => {
             const element = mount(<SideNav data-sample='Sample' />);
@@ -356,11 +366,11 @@ describe('<SideNav />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the SideNavList\'s h1 element', () => {
+        test('should allow props to be spread to the SideNavList\'s heading element', () => {
             const element = mount(<SideNav.List title='test' titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
-                element.find('h1').getDOMNode().attributes['data-sample'].value
+                element.find('.fd-side-nav__title').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
     });
diff --git a/src/SideNavigation/_SideNavList.js b/src/SideNavigation/_SideNavList.js
index 31bcc60ef..0c38510ab 100644
--- a/src/SideNavigation/_SideNavList.js
+++ b/src/SideNavigation/_SideNavList.js
@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -8,7 +9,7 @@ class SideNavList extends React.Component {
     }
 
     render() {
-        const { children, className, hasParent, onItemSelect, open, selectedId, title, titleProps, ...rest } = this.props;
+        const { children, className, hasParent, headingLevel, onItemSelect, open, selectedId, title, titleProps, ...rest } = this.props;
         const sideNavListClasses = classnames({
             'fd-side-nav__list': !hasParent,
             'fd-side-nav__sublist': hasParent
@@ -21,6 +22,8 @@ class SideNavList extends React.Component {
             className
         );
 
+        const HeadingTag = `h${headingLevel}`;
+
         const sideNavList = (
             <ul
                 {...rest}
@@ -46,9 +49,9 @@ class SideNavList extends React.Component {
             return (
                 <div
                     className={sideNavHeaderlasses}>
-                    <h1 {...titleProps} className='fd-side-nav__title'>
+                    <HeadingTag {...titleProps} className='fd-side-nav__title'>
                         {title}
-                    </h1>
+                    </HeadingTag>
                     {sideNavList}
                 </div>
             );
@@ -62,6 +65,7 @@ SideNavList.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     hasParent: PropTypes.bool,
+    headingLevel: CustomPropTypes.range(2, 6),
     open: PropTypes.bool,
     selectedId: PropTypes.string,
     title: PropTypes.string,
@@ -69,6 +73,10 @@ SideNavList.propTypes = {
     onItemSelect: PropTypes.func
 };
 
+SideNavList.defaultProps = {
+    headingLevel: 3
+};
+
 SideNavList.propDescriptions = {
     hasParent: '_INTERNAL USE ONLY._',
     open: '_INTERNAL USE ONLY._',
diff --git a/src/SideNavigation/__snapshots__/SideNav.test.js.snap b/src/SideNavigation/__snapshots__/SideNav.test.js.snap
index bfacc1fba..7c61159fd 100644
--- a/src/SideNavigation/__snapshots__/SideNav.test.js.snap
+++ b/src/SideNavigation/__snapshots__/SideNav.test.js.snap
@@ -73,11 +73,11 @@ exports[`<SideNav /> create side navigation 2`] = `
   <div
     className="fd-side-nav__group blue"
   >
-    <h1
+    <h3
       className="fd-side-nav__title"
     >
       Group Title
-    </h1>
+    </h3>
     <ul
       className="fd-side-nav__list blue"
     >
@@ -141,11 +141,11 @@ exports[`<SideNav /> create side navigation 2`] = `
   <div
     className="fd-side-nav__group"
   >
-    <h1
+    <h3
       className="fd-side-nav__title"
     >
       Group Title
-    </h1>
+    </h3>
     <ul
       className="fd-side-nav__list"
     >
diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js
index 53c5a166c..0a29dd4f2 100644
--- a/src/Tile/Tile.test.js
+++ b/src/Tile/Tile.test.js
@@ -183,6 +183,26 @@ describe('<Tile />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('ProductTileContent', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(
+                <ProductTile.Content headingLevel={2} title='Tile Title' /> );
+            expect(
+                element.find('.fd-product-tile__title').type()
+            ).toBe('h2');
+        });
+    });
+
+    describe('TileContent', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(
+                <Tile.Content headingLevel={2} title='Tile Title' /> );
+            expect(
+                element.find('.fd-tile__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Tile component', () => {
             const element = mount(<Tile data-sample='Sample' />);
@@ -200,11 +220,11 @@ describe('<Tile />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the TileContent component\'s h2 element', () => {
+        test('should allow props to be spread to the TileContent component\'s header element', () => {
             const element = mount(<Tile.Content title='Sample' titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
-                element.find('h2').getDOMNode().attributes['data-sample'].value
+                element.find('.fd-tile__title').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
@@ -240,11 +260,11 @@ describe('<Tile />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the ProductTileContent component\'s h2 element', () => {
+        test('should allow props to be spread to the ProductTileContent component\'s heading element', () => {
             const element = mount(<ProductTile.Content titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
-                element.find('h2').getDOMNode().attributes['data-sample'].value
+                element.find('.fd-product-tile__title').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
diff --git a/src/Tile/_ProductTileContent.js b/src/Tile/_ProductTileContent.js
index aebe664f4..c6f632e5e 100644
--- a/src/Tile/_ProductTileContent.js
+++ b/src/Tile/_ProductTileContent.js
@@ -1,18 +1,21 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 const ProductTileContent = props => {
-    const { title, children, className, titleProps, ...rest } = props;
+    const { title, children, className, headingLevel, titleProps, ...rest } = props;
 
     const tileProductContentClasses = classnames(
         'fd-product-tile__content',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...rest} className={tileProductContentClasses}>
-            <h2 {...titleProps} className='fd-product-tile__title'>{title}</h2>
+            <HeadingTag {...titleProps} className='fd-product-tile__title'>{title}</HeadingTag>
             {children}
         </div>
     );
@@ -22,8 +25,13 @@ ProductTileContent.displayName = 'ProductTile.Content';
 
 ProductTileContent.propTypes = {
     className: PropTypes.string,
+    headingLevel: CustomPropTypes.range(2, 6),
     title: PropTypes.string,
     titleProps: PropTypes.object
 };
 
+ProductTileContent.defaultProps = {
+    headingLevel: 3
+};
+
 export default ProductTileContent;
diff --git a/src/Tile/_TileContent.js b/src/Tile/_TileContent.js
index b5efc5535..771cfa9e5 100644
--- a/src/Tile/_TileContent.js
+++ b/src/Tile/_TileContent.js
@@ -1,18 +1,21 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 const TileContent = props => {
-    const { title, children, className, titleProps, ...rest } = props;
+    const { title, children, className, headingLevel, titleProps, ...rest } = props;
 
     const tileContentClasses = classnames(
         'fd-tile__content',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...rest} className={tileContentClasses}>
-            <h2 {...titleProps} className='fd-tile__title'>{title}</h2>
+            <HeadingTag {...titleProps} className='fd-tile__title'>{title}</HeadingTag>
             {children}
         </div>
     );
@@ -23,7 +26,12 @@ TileContent.displayName = 'Tile.Content';
 TileContent.propTypes = {
     title: PropTypes.string.isRequired,
     className: PropTypes.string,
+    headingLevel: CustomPropTypes.range(2, 6),
     titleProps: PropTypes.object
 };
 
+TileContent.defaultProps = {
+    headingLevel: 3
+};
+
 export default TileContent;
diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
index 1b74dbbeb..758a5454a 100644
--- a/src/Tile/__snapshots__/Tile.test.js.snap
+++ b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -7,11 +7,11 @@ exports[`<Tile /> create tile component 1`] = `
   <div
     className="fd-tile__content red"
   >
-    <h2
+    <h3
       className="fd-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
     <p>
       Tile Description
     </p>
@@ -26,11 +26,11 @@ exports[`<Tile /> create tile component 2`] = `
   <div
     className="fd-tile__content"
   >
-    <h2
+    <h3
       className="fd-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
     <p>
       Tile Description
     </p>
@@ -54,11 +54,11 @@ exports[`<Tile /> create tile component 3`] = `
   <div
     className="fd-tile__content"
   >
-    <h2
+    <h3
       className="fd-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
     <p>
       Tile Description
     </p>
@@ -73,11 +73,11 @@ exports[`<Tile /> create tile component 4`] = `
   <div
     className="fd-tile__content"
   >
-    <h2
+    <h3
       className="fd-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
   </div>
   <div
     className="fd-tile__actions yellow"
@@ -120,11 +120,11 @@ exports[`<Tile /> create tile component 5`] = `
   <div
     className="fd-tile__content"
   >
-    <h2
+    <h3
       className="fd-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
     <p>
       Tile Description
     </p>
@@ -139,11 +139,11 @@ exports[`<Tile /> create tile component 6`] = `
   <div
     className="fd-tile__content"
   >
-    <h2
+    <h3
       className="fd-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
   </div>
   <div
     className="fd-tile__actions"
@@ -186,11 +186,11 @@ exports[`<Tile /> create tile component 7`] = `
   <div
     className="fd-product-tile__content"
   >
-    <h2
+    <h3
       className="fd-product-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
     <p>
       Tile Description
     </p>
@@ -213,11 +213,11 @@ exports[`<Tile /> create tile component 8`] = `
   <div
     className="fd-product-tile__content blue"
   >
-    <h2
+    <h3
       className="fd-product-tile__title"
     >
       Tile Title
-    </h2>
+    </h3>
     <p>
       Tile Description
     </p>
@@ -235,11 +235,11 @@ exports[`<Tile /> create tile component 9`] = `
     <div
       className="fd-tile__content"
     >
-      <h2
+      <h3
         className="fd-tile__title"
       >
         Tile Title
-      </h2>
+      </h3>
       <p>
         Tile Description
       </p>
@@ -258,11 +258,11 @@ exports[`<Tile /> create tile component 10`] = `
     <div
       className="fd-tile__content"
     >
-      <h2
+      <h3
         className="fd-tile__title"
       >
         Tile Title
-      </h2>
+      </h3>
       <p>
         Tile Description
       </p>
diff --git a/src/_playground/documentation/Properties/defaults.js b/src/_playground/documentation/Properties/defaults.js
index ad2643cff..d0685d5cd 100644
--- a/src/_playground/documentation/Properties/defaults.js
+++ b/src/_playground/documentation/Properties/defaults.js
@@ -8,6 +8,7 @@ export const defaultPropDescriptions = {
     id: 'Value for the `id` attribute on the element.',
     inputProps: 'Additional props to be spread to the `<input>` element.',
     labelProps: 'Additional props to be spread to the `<label>` element.',
+    headingLevel: 'Heading level. `<h1>` is reserved for the page title. It should not appear in components.',
     listProps: 'Additional props to be spread to the `<ul>` element.',
     localizedText: 'Localized text to be updated based on location/language.',
     modifier: 'Sets a style variation for a modified appearance.',