diff --git a/packages/core/src/components/Alert/Alert.jsx b/packages/core/src/components/Alert/Alert.jsx
index 242e6e35cc..22f80e9ba4 100644
--- a/packages/core/src/components/Alert/Alert.jsx
+++ b/packages/core/src/components/Alert/Alert.jsx
@@ -19,11 +19,12 @@ export class Alert extends React.PureComponent {
   }
 
   heading() {
+    const Heading = `h${this.props.headingLevel}` || `h3`;
     if (this.props.heading) {
       return (
-        <h3 className="ds-c-alert__heading" id={this.headingId}>
+        <Heading className="ds-c-alert__heading" id={this.headingId}>
           {this.props.heading}
-        </h3>
+        </Heading>
       );
     }
   }
@@ -51,7 +52,8 @@ export class Alert extends React.PureComponent {
   }
 }
 Alert.defaultProps = {
-  role: 'region'
+  role: 'region',
+  headingLevel: '3'
 };
 Alert.propTypes = {
   /**
@@ -66,6 +68,10 @@ Alert.propTypes = {
    * Optional id used to link the `aria-labelledby` attribute to the heading. If not provided, a unique id will be automatically generated and used.
    */
   headingId: PropTypes.string,
+  /**
+   * Heading type to override default `<h3>`.
+   */
+  headingLevel: PropTypes.oneOf(['1', '2', '3', '4', '5']),
   /**
    * Boolean to hide the `Alert` icon
    */
diff --git a/packages/core/src/components/Dialog/Dialog.example.jsx b/packages/core/src/components/Dialog/Dialog.example.jsx
index 616dade938..3ea57b0e2e 100644
--- a/packages/core/src/components/Dialog/Dialog.example.jsx
+++ b/packages/core/src/components/Dialog/Dialog.example.jsx
@@ -31,7 +31,7 @@ class Example extends React.PureComponent {
           <Dialog
             onExit={() => this.hideModal()}
             getApplicationNode={() => document.getElementById('App')}
-            title="Dialog title"
+            heading="Dialog heading"
             actions={[
               <button className="ds-c-button ds-c-button--primary" key="primary">
                 Dialog action
diff --git a/packages/core/src/components/Dialog/Dialog.jsx b/packages/core/src/components/Dialog/Dialog.jsx
index 9e57f394da..5381fe381c 100644
--- a/packages/core/src/components/Dialog/Dialog.jsx
+++ b/packages/core/src/components/Dialog/Dialog.jsx
@@ -16,12 +16,21 @@ export const Dialog = function(props) {
     closeText,
     escapeExitDisabled,
     headerClassName,
+    heading,
     onExit,
     size,
     title,
     ...modalProps
   } = props;
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (props.title) {
+      console.warn(
+        `[Deprecated]: Please remove the 'title' prop in <Button>, use 'heading' instead. This prop has been renamed and will be removed in a future release.`
+      );
+    }
+  }
+
   const dialogClassNames = classNames(
     'ds-c-dialog',
     'ds-base',
@@ -44,9 +53,10 @@ export const Dialog = function(props) {
     >
       <div role="document">
         <header className={headerClassNames} role="banner">
-          {title && (
+          {// TODO: make heading required after removing title
+          (title || heading) && (
             <h1 className="ds-h2" id="dialog-title">
-              {title}
+              {heading}
             </h1>
           )}
           <Button
@@ -144,10 +154,14 @@ Dialog.propTypes = {
    */
   getApplicationNode: PropTypes.func,
   /**
-   * Additional classes to be added to the header, which wraps the title and
+   * Additional classes to be added to the header, which wraps the heading and
    * close button.
    */
   headerClassName: PropTypes.string,
+  /**
+   * The Dialog's heading, to be rendered in the header alongside the close button.
+   */
+  heading: PropTypes.node,
   /**
    * A method to handle the state change of exiting (or deactivating)
    * the modal. It will be invoked when the user presses Escape, or clicks outside
@@ -156,7 +170,7 @@ Dialog.propTypes = {
   onExit: PropTypes.func,
   size: PropTypes.oneOf(['narrow', 'wide', 'full']),
   /**
-   * The Dialog's title, to be rendered in the header alongside the close button.
+   * @hide-prop [Deprecated] This prop has been renamed to `heading`.
    */
   title: PropTypes.node,
   /**
diff --git a/packages/core/src/components/Dialog/Dialog.test.jsx b/packages/core/src/components/Dialog/Dialog.test.jsx
index cdb6b3ac2d..079ee4f4f2 100644
--- a/packages/core/src/components/Dialog/Dialog.test.jsx
+++ b/packages/core/src/components/Dialog/Dialog.test.jsx
@@ -27,7 +27,7 @@ describe('Dialog', function() {
     // https://github.com/reactjs/react-modal/issues/553
     expect(
       mount(
-        <Dialog getApplicationNode={jest.fn()} onExit={jest.fn()} title="Foo">
+        <Dialog getApplicationNode={jest.fn()} onExit={jest.fn()} heading="Foo">
           Bar
         </Dialog>
       )
diff --git a/packages/core/src/components/Dialog/ThirdPartyLink.example.jsx b/packages/core/src/components/Dialog/ThirdPartyLink.example.jsx
index cfb77d8e5e..f04ca44f5c 100644
--- a/packages/core/src/components/Dialog/ThirdPartyLink.example.jsx
+++ b/packages/core/src/components/Dialog/ThirdPartyLink.example.jsx
@@ -35,7 +35,7 @@ class Example extends React.PureComponent {
           <Dialog
             onExit={() => this.hideModal()}
             getApplicationNode={() => document.getElementById('App')}
-            title="You are leaving URL"
+            heading="You are leaving URL"
             actions={[
               <Button
                 className="ds-c-button ds-c-button--primary"
diff --git a/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap b/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap
index 7bf6241052..a9c9a68efe 100644
--- a/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap
+++ b/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap
@@ -55,8 +55,8 @@ exports[`Dialog renders react-aria-modal 1`] = `
       ],
     }
   }
+  heading="Foo"
   onExit={[MockFunction]}
-  title="Foo"
   underlayClickExits={false}
 >
   <Displaced
diff --git a/packages/core/src/components/Dialog/dialog-size.example.html b/packages/core/src/components/Dialog/dialog-size.example.html
index 1b4e37e51e..25d065c793 100644
--- a/packages/core/src/components/Dialog/dialog-size.example.html
+++ b/packages/core/src/components/Dialog/dialog-size.example.html
@@ -1,21 +1,21 @@
 <div data-demo="This div is for demo purposes only" style="min-height: 300px;">
   <button
     data-type="ds-c-dialog--narrow"
-    data-title="Narrow dialog"
+    data-heading="Narrow dialog"
     class="dialog-open-btn ds-c-button ds-c-button--success ds-c-button--big ds-u-display--block"
   >
     Click to show narrow dialog
   </button>
   <button
     data-type="ds-c-dialog--wide"
-    data-title="Wide dialog"
+    data-heading="Wide dialog"
     class="dialog-open-btn ds-c-button ds-c-button--success ds-c-button--big ds-u-display--block ds-u-margin-top--2"
   >
     Click to show wide dialog
   </button>
   <button
     data-type="ds-c-dialog--full"
-    data-title="Full page dialog"
+    data-heading="Full page dialog"
     class="dialog-open-btn ds-c-button ds-c-button--success ds-c-button--big ds-u-display--block ds-u-margin-top--2"
   >
     Click to show full page dialog
@@ -23,12 +23,12 @@
   <div
     id="dialog-wrap"
     class="ds-c-dialog-wrap ds-u-display--none"
-    aria-labelledby="dialog-title"
+    aria-labelledby="dialog-heading"
     role="dialog"
   >
     <div id="dialog" class="ds-c-dialog" role="document">
       <header class="ds-c-dialog__header" role="banner">
-        <h1 class="ds-h2" id="dialog-title">Dialog title</h1>
+        <h1 class="ds-h2" id="dialog-heading">Dialog heading</h1>
         <button
           class="dialog-close-btn ds-c-button ds-c-button--transparent ds-c-dialog__close"
           aria-label="Close modal dialog"
@@ -51,18 +51,18 @@ <h1 class="ds-h2" id="dialog-title">Dialog title</h1>
   </div>
 </div>
 <!--
-  const dialog = document.getElementById('dialog');
-  const dialogTitle = document.getElementById('dialog-title');
+const dialog = document.getElementById('dialog');
+  const dialogHeading = document.getElementById('dialog-heading');
   const dialogWrap = document.getElementById('dialog-wrap');
 
-  document.querySelectorAll('.dialog-open-btn').forEach((btn) => {
+  document.querySelectorAll('.dialog-open-btn').forEach(btn => {
     btn.addEventListener('click', () => {
       dialog.classList.add(btn.dataset.type);
-      dialogTitle.textContent = btn.dataset.title;
+      dialogHeading.textContent = btn.dataset.heading;
       dialogWrap.classList.remove('ds-u-display--none');
     });
   });
-  document.querySelectorAll('.dialog-close-btn').forEach((btn) => {
+  document.querySelectorAll('.dialog-close-btn').forEach(btn => {
     btn.addEventListener('click', () => {
       dialog.className = 'ds-c-dialog';
       dialogWrap.classList.add('ds-u-display--none');
diff --git a/packages/core/src/components/Dialog/dialog.example.html b/packages/core/src/components/Dialog/dialog.example.html
index 6efaa93cb8..1fac219131 100644
--- a/packages/core/src/components/Dialog/dialog.example.html
+++ b/packages/core/src/components/Dialog/dialog.example.html
@@ -1,8 +1,8 @@
 <div data-demo="This div is for demo purposes only" style="min-height: 300px;">
-  <div class="ds-c-dialog-wrap" aria-labelledby="dialog-title" role="dialog">
+  <div class="ds-c-dialog-wrap" aria-labelledby="dialog-heading" role="dialog">
     <div class="ds-c-dialog {{modifier}}" role="document">
       <header class="ds-c-dialog__header" role="banner">
-        <h1 class="ds-h2" id="dialog-title">Dialog title</h1>
+        <h1 class="ds-h2" id="dialog-heading">Dialog heading</h1>
         <button
           class="ds-c-button ds-c-button--transparent ds-c-dialog__close"
           aria-label="Close modal dialog"
diff --git a/packages/core/src/components/HelpDrawer/HelpDrawer.example.jsx b/packages/core/src/components/HelpDrawer/HelpDrawer.example.jsx
index 88f5568067..3585f21a57 100644
--- a/packages/core/src/components/HelpDrawer/HelpDrawer.example.jsx
+++ b/packages/core/src/components/HelpDrawer/HelpDrawer.example.jsx
@@ -41,7 +41,7 @@ class HelpDrawerExample extends React.PureComponent {
           <HelpDrawer
             footerTitle="Footer Title"
             footerBody={<p className="ds-text ds-u-margin--0">Footer content</p>}
-            title="Help Drawer Title"
+            heading="Help Drawer Heading"
             onCloseClick={() => this.handleDrawerClose()}
           >
             <strong>An Explanation</strong>
diff --git a/packages/core/src/components/HelpDrawer/HelpDrawer.jsx b/packages/core/src/components/HelpDrawer/HelpDrawer.jsx
index eb8d7f803e..553d7079e0 100644
--- a/packages/core/src/components/HelpDrawer/HelpDrawer.jsx
+++ b/packages/core/src/components/HelpDrawer/HelpDrawer.jsx
@@ -5,11 +5,24 @@ import React from 'react';
 export class HelpDrawer extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.titleRef = null;
+    this.headingRef = null;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.title) {
+        console.warn(
+          `[Deprecated]: Please remove the 'title' prop in <Button>, use 'heading' instead. This prop has been renamed and will be removed in a future release.`
+        );
+      }
+      if (!props.title && !props.heading) {
+        console.warn(
+          `The 'heading' prop in <Button>, use 'heading' instead. This prop has been renamed and will be removed in a future release.`
+        );
+      }
+    }
   }
 
   componentDidMount() {
-    if (this.titleRef) this.titleRef.focus();
+    if (this.headingRef) this.headingRef.focus();
   }
 
   render() {
@@ -19,9 +32,12 @@ export class HelpDrawer extends React.PureComponent {
       title,
       children,
       onCloseClick,
+      heading,
       footerBody,
       footerTitle
     } = this.props;
+    const Heading = `h${this.props.headingLevel}` || `h3`;
+
     /* eslint-disable jsx-a11y/no-noninteractive-tabindex, react/no-danger */
     return (
       <div className="ds-c-help-drawer">
@@ -31,13 +47,14 @@ export class HelpDrawer extends React.PureComponent {
            * so things display as expected when the body content overflows
            */}
           <div className="ds-u-fill--gray-lightest ds-u-padding--2 ds-u-display--flex ds-u-align-items--start">
-            <h3
-              ref={el => (this.titleRef = el)}
+            <Heading
+              ref={el => (this.headingRef = el)}
               tabIndex="0"
               className="ds-u-text--lead ds-u-margin-y--0 ds-u-margin-right--2"
             >
-              {title}
-            </h3>
+              {// TODO: make heading required after removing title
+              title || heading}
+            </Heading>
             <Button
               aria-label={ariaLabel}
               className="ds-u-margin-left--auto ds-c-help-drawer__close-button"
@@ -64,18 +81,31 @@ export class HelpDrawer extends React.PureComponent {
 
 HelpDrawer.defaultProps = {
   ariaLabel: 'Close help drawer',
-  closeButtonText: 'Close'
+  closeButtonText: 'Close',
+  headingLevel: '3'
 };
 HelpDrawer.propTypes = {
-  /** Helps give more context to screen readers on the button that closes the Help Drawer */
+  /**
+   * Helps give more context to screen readers on the button that closes the Help Drawer
+   */
   ariaLabel: PropTypes.string,
   closeButtonText: PropTypes.string,
   children: PropTypes.node.isRequired,
   footerBody: PropTypes.node,
   footerTitle: PropTypes.string,
+  /**
+   * Text for the HelpDrawer title. Required because the `heading` will be focused on mount.
+   */
+  heading: PropTypes.string,
+  /**
+   * Heading type to override default `<h3>`
+   */
+  headingLevel: PropTypes.oneOf(['1', '2', '3', '4', '5']),
   onCloseClick: PropTypes.func.isRequired,
-  /** Required because the title is what gets focused on mount */
-  title: PropTypes.string.isRequired
+  /**
+   * @hide-prop [Deprecated] This prop has been renamed to `heading`.
+   */
+  title: PropTypes.string
 };
 
 export default HelpDrawer;
diff --git a/packages/core/src/components/HelpDrawer/help-drawer.example.html b/packages/core/src/components/HelpDrawer/help-drawer.example.html
index 3a34f40f30..b4103a01fc 100644
--- a/packages/core/src/components/HelpDrawer/help-drawer.example.html
+++ b/packages/core/src/components/HelpDrawer/help-drawer.example.html
@@ -19,7 +19,7 @@
         class="ds-u-fill--gray-lightest ds-u-padding--2 ds-u-display--flex ds-u-align-items--start"
       >
         <h3 tabindex="0" class="ds-u-text--lead ds-u-margin-y--0 ds-u-margin-right--2">
-          Help Drawer Title
+          Help Drawer Heading
         </h3>
         <button
           class="ds-c-button ds-c-button--secondary ds-c-button--small ds-u-margin-left--auto"
diff --git a/packages/core/src/components/Review/Review.jsx b/packages/core/src/components/Review/Review.jsx
index bd9e478e6d..8195e593f1 100644
--- a/packages/core/src/components/Review/Review.jsx
+++ b/packages/core/src/components/Review/Review.jsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 export class Review extends React.PureComponent {
   heading() {
-    const Heading = this.props.headingLevel ? `h${this.props.headingLevel}` : `h3`;
+    const Heading = `h${this.props.headingLevel}` || `h3`;
     if (this.props.heading) {
       return (
         <Heading className="ds-c-review__heading ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
@@ -47,7 +47,8 @@ export class Review extends React.PureComponent {
 }
 
 Review.defaultProps = {
-  editText: 'Edit'
+  editText: 'Edit',
+  headingLevel: '3'
 };
 
 Review.propTypes = {
@@ -74,7 +75,7 @@ Review.propTypes = {
   /**
    * Heading type to override default `<h3>`.
    */
-  headingLevel: PropTypes.number,
+  headingLevel: PropTypes.oneOf(['1', '2', '3', '4', '5']),
   /**
    * An optional function that is executed on edit link click. The event and
    * props.editHref value are passed to this function.
diff --git a/packages/core/src/components/StepList/Step.jsx b/packages/core/src/components/StepList/Step.jsx
index fd2cd8b262..1c95b42e29 100644
--- a/packages/core/src/components/StepList/Step.jsx
+++ b/packages/core/src/components/StepList/Step.jsx
@@ -6,6 +6,20 @@ import classNames from 'classnames';
 import { stepShape } from './StepList';
 
 export const Step = ({ step, ...props }) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (step.title) {
+      console.warn(
+        `[Deprecated]: Please remove the 'title' prop the <StepList> step object, use 'heading' instead. This prop has been renamed and will be removed in a future release.`
+      );
+    }
+    if (!step.title && !step.heading) {
+      console.warn(
+        `The 'heading' prop the <StepList> step object, use 'heading' instead. This prop has been renamed and will be removed in a future release.`
+      );
+    }
+  }
+
+  const Heading = `h${step.headingLevel || '2'}`;
   const start = step.isNextStep;
   const resume = step.started && !step.completed;
   const className = classNames('ds-c-step', {
@@ -16,9 +30,9 @@ export const Step = ({ step, ...props }) => {
     'ds-c-step__content--with-content': step.description || step.steps
   });
   const { actionsLabelText, substepsLabelText, descriptionLabelText } = props;
-  const actionsLabel = actionsLabelText.replace('%{step}', step.title);
-  const substepsLabel = substepsLabelText.replace('%{step}', step.title);
-  const descriptionLabel = descriptionLabelText.replace('%{step}', step.title);
+  const actionsLabel = actionsLabelText.replace('%{step}', step.heading || step.title);
+  const substepsLabel = substepsLabelText.replace('%{step}', step.heading || step.title);
+  const descriptionLabel = descriptionLabelText.replace('%{step}', step.heading || step.title);
 
   let linkLabel;
   if (step.completed && !step.steps) {
@@ -34,10 +48,11 @@ export const Step = ({ step, ...props }) => {
     linkClassName = 'ds-c-button ds-c-button--primary';
   }
 
+  // TODO: make heading required after removing title
   return (
     <li className={className}>
       <div className={contentClassName}>
-        <h2 className="ds-c-step__title">{step.title}</h2>
+        <Heading className="ds-c-step__heading">{step.heading || step.title}</Heading>
         {step.description && (
           <div className="ds-c-step__description" aria-label={descriptionLabel}>
             {step.description}
@@ -62,7 +77,7 @@ export const Step = ({ step, ...props }) => {
             component={step.component}
             href={step.href}
             stepId={step.id}
-            screenReaderText={`"${step.title}"`}
+            screenReaderText={`"${step.heading || step.title}"`}
             onClick={step.onClick || props.onStepLinkClick}
             className={linkClassName}
           >
diff --git a/packages/core/src/components/StepList/Step.test.jsx b/packages/core/src/components/StepList/Step.test.jsx
index 1d025b5a72..7c16bdbea0 100644
--- a/packages/core/src/components/StepList/Step.test.jsx
+++ b/packages/core/src/components/StepList/Step.test.jsx
@@ -66,7 +66,7 @@ describe('Step', () => {
   it('renders basic incomplete, unstarted step', () => {
     const { wrapper } = renderStep();
 
-    const title = wrapper.find('.ds-c-step__title');
+    const title = wrapper.find('.ds-c-step__heading');
     expect(title.length).toEqual(1);
     expect(title.text()).toEqual('Do something!');
 
@@ -83,7 +83,7 @@ describe('Step', () => {
     const spy = jest.fn();
     const { wrapper, step } = renderStep({ completed: true }, { onStepLinkClick: spy });
 
-    const title = wrapper.find('.ds-c-step__title');
+    const title = wrapper.find('.ds-c-step__heading');
     expect(title.length).toEqual(1);
     expect(title.text()).toEqual('Do something!');
 
diff --git a/packages/core/src/components/StepList/StepList.example.jsx b/packages/core/src/components/StepList/StepList.example.jsx
index d4accdb569..32b77c21d9 100644
--- a/packages/core/src/components/StepList/StepList.example.jsx
+++ b/packages/core/src/components/StepList/StepList.example.jsx
@@ -23,14 +23,14 @@ ReactDOM.render(
       steps={[
         {
           id: 'taxYear',
-          title: 'Choose a tax year',
+          heading: 'Choose a tax year',
           href: '#step-1',
           started: true,
           completed: true
         },
         {
           id: 'household',
-          title: 'Enter household details',
+          heading: 'Enter household details',
           description:
             'Answer questions about who in your household qualifies for a premium tax credit and information on each person, including date of birth, location(s) they lived in for the year, and months of marketplace coverage.',
           href: '#step-2',
@@ -40,21 +40,21 @@ ReactDOM.render(
           steps: [
             {
               id: 'household.overall',
-              title: 'Overall household',
+              heading: 'Overall household',
               href: '#step-2a',
               started: true,
               completed: true
             },
             {
               id: 'household.bob',
-              title: "Bob's information",
+              heading: "Bob's information",
               href: '#step-2b',
               started: false,
               completed: false
             },
             {
               id: 'household.barb',
-              title: "Barb's information",
+              heading: "Barb's information",
               href: '#step-2c',
               started: false,
               completed: false
@@ -63,14 +63,14 @@ ReactDOM.render(
         },
         {
           id: 'review',
-          title: 'Review your information',
+          heading: 'Review your information',
           href: '#step-3',
           started: false,
           completed: false
         },
         {
           id: 'finish',
-          title: 'View premium results',
+          heading: 'View premium results',
           href: '#step-4',
           started: false,
           completed: false
diff --git a/packages/core/src/components/StepList/StepList.jsx b/packages/core/src/components/StepList/StepList.jsx
index 5f423d8102..06873b1a88 100644
--- a/packages/core/src/components/StepList/StepList.jsx
+++ b/packages/core/src/components/StepList/StepList.jsx
@@ -20,7 +20,9 @@ export const StepList = ({ steps, ...props }) => (
 export const stepShape = {
   id: PropTypes.string,
   href: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired, // [Deprecated]
+  heading: PropTypes.string.isRequired,
+  headingLevel: PropTypes.oneOf(['1', '2', '3', '4', '5']),
   description: PropTypes.string,
   linkText: PropTypes.string,
   completed: PropTypes.bool,
@@ -71,17 +73,17 @@ StepList.propTypes = {
   startText: PropTypes.string.isRequired,
   /**
    * A template string for the aria-label describing a step's actions where
-   * the substring `%{step}` is replaced with that step's `title`.
+   * the substring `%{step}` is replaced with that step's `heading`.
    */
   actionsLabelText: PropTypes.string.isRequired,
   /**
    * A template string for the aria-label for a step's description where
-   * the substring `%{step}` is replaced with that step's `title`.
+   * the substring `%{step}` is replaced with that step's `heading`.
    */
   descriptionLabelText: PropTypes.string.isRequired,
   /**
    * A template string for the aria-label describing a step's substeps where
-   * the substring `%{step}` is replaced with that step's `title`.
+   * the substring `%{step}` is replaced with that step's `heading`.
    */
   substepsLabelText: PropTypes.string.isRequired
 };
diff --git a/packages/core/src/components/StepList/StepList.scss b/packages/core/src/components/StepList/StepList.scss
index 1388662a2e..3353f573e8 100644
--- a/packages/core/src/components/StepList/StepList.scss
+++ b/packages/core/src/components/StepList/StepList.scss
@@ -88,7 +88,7 @@ $current-step-color: $color-primary !default;
 }
 
 .ds-c-step--current {
-  .ds-c-step__title {
+  .ds-c-step__heading {
     color: $current-step-color;
   }
 
@@ -98,7 +98,7 @@ $current-step-color: $color-primary !default;
 }
 
 .ds-c-step--completed {
-  .ds-c-step__title {
+  .ds-c-step__heading {
     color: $color-base;
   }
 
@@ -117,7 +117,7 @@ $current-step-color: $color-primary !default;
   }
 }
 
-.ds-c-step__title {
+.ds-c-step__heading {
   font-size: $h5-font-size;
   line-height: $step-button-height;
   margin: 0;
@@ -204,7 +204,7 @@ $current-step-color: $color-primary !default;
   }
 }
 
-.ds-c-substep__title {
+.ds-c-substep__heading {
   display: inline-block;
   margin-right: $spacer-1;
 }
diff --git a/packages/core/src/components/StepList/SubStep.jsx b/packages/core/src/components/StepList/SubStep.jsx
index 120399f415..b3c0a66771 100644
--- a/packages/core/src/components/StepList/SubStep.jsx
+++ b/packages/core/src/components/StepList/SubStep.jsx
@@ -5,7 +5,7 @@ import { stepShape } from './StepList';
 
 export const SubStep = ({ step, ...props }) => (
   <li className="ds-c-substep">
-    <div className="ds-c-substep__title">{step.title}</div>
+    <div className="ds-c-substep__heading">{step.title}</div>
     {step.completed && (
       <StepLink
         component={step.component}
diff --git a/packages/core/src/components/StepList/SubStep.test.jsx b/packages/core/src/components/StepList/SubStep.test.jsx
index 943d5806bf..fbc5adfbc4 100644
--- a/packages/core/src/components/StepList/SubStep.test.jsx
+++ b/packages/core/src/components/StepList/SubStep.test.jsx
@@ -15,7 +15,7 @@ describe('SubStep', () => {
     const wrapper = shallow(
       <SubStep step={generateStep()} onStepLinkClick={noop} editText="Edit" />
     );
-    const title = wrapper.find('.ds-c-substep__title');
+    const title = wrapper.find('.ds-c-substep__heading');
     expect(title.length).toEqual(1);
     expect(title.text()).toEqual('Do stuff');
     expect(wrapper.find('StepLink').length).toEqual(0);
@@ -26,7 +26,7 @@ describe('SubStep', () => {
     const spy = jest.fn();
     const wrapper = shallow(<SubStep step={step} onStepLinkClick={spy} editText="Edit" />);
 
-    const title = wrapper.find('.ds-c-substep__title');
+    const title = wrapper.find('.ds-c-substep__heading');
     expect(title.length).toEqual(1);
     expect(title.text()).toEqual('Do stuff');
 
@@ -65,7 +65,7 @@ describe('SubStep', () => {
       <SubStep step={step} onStepLinkClick={spy} showSubSubSteps editText="Edit" />
     );
 
-    const title = wrapper.find('.ds-c-substep__title');
+    const title = wrapper.find('.ds-c-substep__heading');
     expect(title.length).toEqual(1);
     expect(title.text()).toEqual('Do stuff');
 
diff --git a/packages/core/src/components/StepList/_StepList.docs.scss b/packages/core/src/components/StepList/_StepList.docs.scss
index e60129fe8b..a3d3e7865d 100644
--- a/packages/core/src/components/StepList/_StepList.docs.scss
+++ b/packages/core/src/components/StepList/_StepList.docs.scss
@@ -76,6 +76,25 @@ Step object
         <p>Additional text to display under (only rendered for top-level steps)</p>
       </td>
     </tr>
+    <tr>
+      <td>
+        <code class="ds-u-font-weight--bold">heading</code>
+        <p><span class="ds-c-badge ds-u-bg-gray-dark">Required</span></p>
+      </td>
+      <td><code>string</code></td>
+      <td>
+        <p>Text to display as the step heading</p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code class="ds-u-font-weight--bold">headingLevel</code>
+      </td>
+      <td><code>'1', '2', '3', '4', '5'</code></td>
+      <td>
+        <p>Heading type to override default <code>&lt;h2&gt;</code>.</p>
+      </td>
+    </tr>
     <tr>
       <td>
         <code class="ds-u-font-weight--bold">href</code>
@@ -128,16 +147,6 @@ Step object
         <p>Array of substeps</p>
       </td>
     </tr>
-    <tr>
-      <td>
-        <code class="ds-u-font-weight--bold">title</code>
-        <p><span class="ds-c-badge ds-u-bg-gray-dark">Required</span></p>
-      </td>
-      <td><code>string</code></td>
-      <td>
-        <p>Text to display as the step title</p>
-      </td>
-    </tr>
   </tbody>
 </table>
 
diff --git a/packages/core/src/components/StepList/steplist.example.html b/packages/core/src/components/StepList/steplist.example.html
index a6f7eb23be..6d452a1ac3 100644
--- a/packages/core/src/components/StepList/steplist.example.html
+++ b/packages/core/src/components/StepList/steplist.example.html
@@ -2,7 +2,7 @@
   <ol class="ds-c-step-list ds-u-margin-top--4">
     <li class="ds-c-step ds-c-step--completed">
       <div class="ds-c-step__content">
-        <h2 class="ds-c-step__title">Choose a tax year</h2>
+        <h2 class="ds-c-step__heading">Choose a tax year</h2>
       </div>
       <div class="ds-c-step__actions" aria-label="Primary actions for Choose a tax year">
         <div class="ds-c-step__completed-text">Completed</div>
@@ -15,7 +15,7 @@ <h2 class="ds-c-step__title">Choose a tax year</h2>
     </li>
     <li class="ds-c-step ds-c-step--current">
       <div class="ds-c-step__content ds-c-step__content--with-content">
-        <h2 class="ds-c-step__title">Enter household details</h2>
+        <h2 class="ds-c-step__heading">Enter household details</h2>
         <div class="ds-c-step__description" aria-label="Description for Enter household details">
           Answer questions about who in your household qualifies for a premium tax credit and
           information on each person, including date of birth, location(s) they lived in for the
@@ -23,7 +23,7 @@ <h2 class="ds-c-step__title">Enter household details</h2>
         </div>
         <ol class="ds-c-step__substeps" aria-label="Secondary actions for Enter household details">
           <li class="ds-c-substep">
-            <div class="ds-c-substep__title">Overall household</div>
+            <div class="ds-c-substep__heading">Overall household</div>
             <a href="#step-2a" class="ds-c-substep__edit">
               Edit<span class="ds-u-visibility--screen-reader">
                 {" "} "Overall household"
@@ -31,10 +31,10 @@ <h2 class="ds-c-step__title">Enter household details</h2>
             </a>
           </li>
           <li class="ds-c-substep">
-            <div class="ds-c-substep__title">Bob's information</div>
+            <div class="ds-c-substep__heading">Bob's information</div>
           </li>
           <li class="ds-c-substep">
-            <div class="ds-c-substep__title">Barb's information</div>
+            <div class="ds-c-substep__heading">Barb's information</div>
           </li>
         </ol>
       </div>
@@ -48,13 +48,13 @@ <h2 class="ds-c-step__title">Enter household details</h2>
     </li>
     <li class="ds-c-step">
       <div class="ds-c-step__content">
-        <h2 class="ds-c-step__title">Review your information</h2>
+        <h2 class="ds-c-step__heading">Review your information</h2>
       </div>
       <div class="ds-c-step__actions" aria-label="Primary actions for Review your information" />
     </li>
     <li class="ds-c-step">
       <div class="ds-c-step__content">
-        <h2 class="ds-c-step__title">View premium results</h2>
+        <h2 class="ds-c-step__heading">View premium results</h2>
       </div>
       <div class="ds-c-step__actions" aria-label="Primary actions for View premium results" />
     </li>
diff --git a/packages/docs/src/scripts/example.js b/packages/docs/src/scripts/example.js
index c3d4d801a7..3f6a3a3f8a 100644
--- a/packages/docs/src/scripts/example.js
+++ b/packages/docs/src/scripts/example.js
@@ -28,13 +28,13 @@ function setSwatchHexValues() {
 // Only used in the modal dialog size variant example
 function setModalExamples() {
   const dialog = document.getElementById('dialog');
-  const dialogTitle = document.getElementById('dialog-title');
+  const dialogHeading = document.getElementById('dialog-heading');
   const dialogWrap = document.getElementById('dialog-wrap');
 
   document.querySelectorAll('.dialog-open-btn').forEach(btn => {
     btn.addEventListener('click', () => {
       dialog.classList.add(btn.dataset.type);
-      dialogTitle.textContent = btn.dataset.title;
+      dialogHeading.textContent = btn.dataset.heading;
       dialogWrap.classList.remove('ds-u-display--none');
     });
   });