diff --git a/packages/core/src/common/_mixins.scss b/packages/core/src/common/_mixins.scss
index e00f41aefb..b0c1e2862a 100644
--- a/packages/core/src/common/_mixins.scss
+++ b/packages/core/src/common/_mixins.scss
@@ -51,7 +51,7 @@ $pt-dark-intent-text-colors: (
   color: $pt-heading-color;
   font-weight: 600;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-heading-color;
   }
 }
diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
index e3ef64fc11..6a5bd22f75 100644
--- a/packages/core/src/common/classes.ts
+++ b/packages/core/src/common/classes.ts
@@ -76,7 +76,6 @@ export const BUTTON_TEXT = `${BUTTON}-text`;
 
 export const CALLOUT = `${NS}-callout`;
 export const CALLOUT_ICON = `${CALLOUT}-icon`;
-export const CALLOUT_TITLE = `${CALLOUT}-title`;
 
 export const CARD = `${NS}-card`;
 
@@ -97,7 +96,6 @@ export const DIALOG_CLOSE_BUTTON = `${DIALOG}-close-button`;
 export const DIALOG_FOOTER = `${DIALOG}-footer`;
 export const DIALOG_FOOTER_ACTIONS = `${DIALOG}-footer-actions`;
 export const DIALOG_HEADER = `${DIALOG}-header`;
-export const DIALOG_HEADER_TITLE = `${DIALOG}-header-title`;
 
 export const EDITABLE_TEXT = `${NS}-editable-text`;
 export const EDITABLE_TEXT_CONTENT = `${EDITABLE_TEXT}-content`;
diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
index ddb6f979f7..4d485d536c 100644
--- a/packages/core/src/components/button/button.md
+++ b/packages/core/src/components/button/button.md
@@ -56,7 +56,7 @@ Blueprint class name. If you specify other attributes that the component provide
 for an `<AnchorButton>`, you'll overide the default value.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Interactions with disabled buttons</h4>
+    <h4 class="@ns-heading">Interactions with disabled buttons</h4>
     Use `AnchorButton` if you need mouse interaction events (such as hovering) on a disabled button.
     This is because `Button` and `AnchorButton` handle the `disabled` prop differently: `Button` uses
     the native `disabled` attribute on the `<button>` tag so the browser disables all interactions,
@@ -69,7 +69,7 @@ for an `<AnchorButton>`, you'll overide the default value.
 
 @### Anchor button
 
-```jsx
+```tsx
 <AnchorButton text="Click" />
 // renders:
 <a class="@ns-button" role="button" tabIndex={0}>Click</a>
@@ -77,7 +77,7 @@ for an `<AnchorButton>`, you'll overide the default value.
 
 @### Button
 
-```jsx
+```tsx
 <Button icon="refresh" />
 // renders:
 <button class="@ns-button @ns-icon-refresh" type="button"></button>
diff --git a/packages/core/src/components/callout/_callout.scss b/packages/core/src/components/callout/_callout.scss
index 3abdca0ece..970cc1223f 100644
--- a/packages/core/src/components/callout/_callout.scss
+++ b/packages/core/src/components/callout/_callout.scss
@@ -8,7 +8,7 @@ Callout
 
 Markup:
 <div class="#{$ns}-callout {{.modifier}}">
-  <h4 class="#{$ns}-callout-title">Callout Heading</h4>
+  <h4 class="#{$ns}-heading">Callout Heading</h4>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus!
 </div>
 
@@ -53,7 +53,7 @@ Styleguide callout
     }
   }
 
-  .#{$ns}-callout-title {
+  .#{$ns}-heading {
     margin-top: 0;
     margin-bottom: $pt-grid-size / 2;
     line-height: $pt-icon-size-large;
@@ -73,7 +73,7 @@ Styleguide callout
 
       &[class*="#{$ns}-icon-"]::before,
       .#{$ns}-icon,
-      .#{$ns}-callout-title {
+      .#{$ns}-heading {
         color: map-get($pt-intent-text-colors, $intent);
       }
 
@@ -82,7 +82,7 @@ Styleguide callout
 
         &[class*="#{$ns}-icon-"]::before,
         .#{$ns}-callout-icon,
-        .#{$ns}-callout-title {
+        .#{$ns}-heading {
           color: map-get($pt-dark-intent-text-colors, $intent);
         }
       }
diff --git a/packages/core/src/components/callout/callout.md b/packages/core/src/components/callout/callout.md
index f4b1734a8c..427ed11be4 100644
--- a/packages/core/src/components/callout/callout.md
+++ b/packages/core/src/components/callout/callout.md
@@ -7,7 +7,7 @@ Callouts visually highlight important content for the user.
 @## CSS API
 
 Callouts use the same visual intent modifier classes as buttons. If you need a
-heading, use the `<h4>` element with a `.@ns-callout-title` class.
+heading, use the `<h4>` element with a `.@ns-heading` class.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Note that the title is entirely optional.
diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
index 3d832b574a..ab18ce6f5a 100644
--- a/packages/core/src/components/callout/callout.tsx
+++ b/packages/core/src/components/callout/callout.tsx
@@ -25,7 +25,7 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
      * String content of optional title element.
      *
      * Due to a conflict with the HTML prop types, to provide JSX content simply
-     * pass `<h4 className={Classes.CALLOUT_TITLE}>JSX title content<h4>` as
+     * pass `<h4 className={Classes.HEADING}>JSX title content<h4>` as
      * first `children` element instead of using this prop.
      */
     title?: string;
@@ -33,8 +33,8 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
 
 export class Callout extends React.PureComponent<ICalloutProps, {}> {
     public render() {
-        const { className, children, icon: _nospread, intent, title, ...htmlProps } = this.props;
-        const iconName = this.getIconName();
+        const { className, children, icon, intent, title, ...htmlProps } = this.props;
+        const iconName = this.getIconName(icon, intent);
         const classes = classNames(
             Classes.CALLOUT,
             Classes.intentClass(intent),
@@ -45,14 +45,13 @@ export class Callout extends React.PureComponent<ICalloutProps, {}> {
         return (
             <div className={classes} {...htmlProps}>
                 {iconName && <Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />}
-                {title && <h4 className={Classes.CALLOUT_TITLE}>{title}</h4>}
+                {title && <h4 className={Classes.HEADING}>{title}</h4>}
                 {children}
             </div>
         );
     }
 
-    private getIconName(): JSX.Element | IconName | undefined {
-        const { icon, intent } = this.props;
+    private getIconName(icon?: ICalloutProps["icon"], intent?: Intent): JSX.Element | IconName | undefined {
         // 1. no icon
         if (icon === null) {
             return undefined;
diff --git a/packages/core/src/components/dialog/_dialog.scss b/packages/core/src/components/dialog/_dialog.scss
index 1358eaa28f..25ead24e59 100644
--- a/packages/core/src/components/dialog/_dialog.scss
+++ b/packages/core/src/components/dialog/_dialog.scss
@@ -15,7 +15,7 @@ Markup:
   <div class="#{$ns}-dialog">
     <div class="#{$ns}-dialog-header">
       <span class="#{$ns}-icon-large #{$ns}-icon-inbox"></span>
-      <h4 class="#{$ns}-dialog-header-title">Dialog header</h4>
+      <h4 class="#{$ns}-heading">Dialog header</h4>
       <button aria-label="Close" class="#{$ns}-dialog-close-button #{$ns}-icon-small-cross"></button>
     </div>
     <div class="#{$ns}-dialog-body">
@@ -107,7 +107,7 @@ $dialog-padding: $pt-grid-size * 2 !default;
     color: $pt-icon-color;
   }
 
-  .#{$ns}-dialog-header-title {
+  .#{$ns}-heading {
     @include overflow-ellipsis();
     flex: 1 1 auto;
     margin: 0;
@@ -126,10 +126,6 @@ $dialog-padding: $pt-grid-size * 2 !default;
     .#{$ns}-icon {
       color: $pt-dark-icon-color;
     }
-
-    .#{$ns}-dialog-header-title {
-      color: $pt-dark-heading-color;
-    }
   }
 }
 
diff --git a/packages/core/src/components/dialog/dialog.md b/packages/core/src/components/dialog/dialog.md
index 7bb7a3ddd1..3d05dbc9c5 100644
--- a/packages/core/src/components/dialog/dialog.md
+++ b/packages/core/src/components/dialog/dialog.md
@@ -3,7 +3,7 @@
 Dialogs present content overlaid over other parts of the UI.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Terminology note</h4>
+    <h4 class="@ns-heading">Terminology note</h4>
     The term "modal" is sometimes used to mean "dialog," but this is a misnomer.
     _Modal_ is an adjective that describes parts of a UI.
     An element is considered modal if it
diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
index 10d1bfc2e3..0ebe8031e2 100644
--- a/packages/core/src/components/dialog/dialog.tsx
+++ b/packages/core/src/components/dialog/dialog.tsx
@@ -115,7 +115,7 @@ export class Dialog extends AbstractPureComponent<IDialogProps, {}> {
         return (
             <div className={Classes.DIALOG_HEADER}>
                 <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
-                <h4 className={Classes.DIALOG_HEADER_TITLE}>{title}</h4>
+                <h4 className={Classes.HEADING}>{title}</h4>
                 {this.maybeRenderCloseButton()}
             </div>
         );
diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index 5698f51ba4..32b507c63e 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -12,7 +12,7 @@ You should not use `EditableText` when a static always-editable `<input>` or
 `<textarea>` tag would suffice.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Centering the component</h4>
+    <h4 class="@ns-heading">Centering the component</h4>
     **Do not center this component** using `text-align: center`, as it will cause an infinite loop
     in the browser ([more details](https://github.com/JedWatson/react-select/issues/540)). Instead,
     you should center the component via flexbox or with `position` and `transform: translateX(-50%)`.
@@ -56,7 +56,7 @@ _vertically_ instead, based on the number of lines of text. You can use the `min
 `maxLines` props to constrain the vertical size of the component.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Multiline prop format</h4>
+    <h4 class="@ns-heading">Multiline prop format</h4>
     You should declare `multiline` as a valueless boolean prop, as in the example above
     (`<EditableText multiline ...>`). This prevents you from changing the value after declaring it,
     which would provide a sub-optimal experience for users (multiline text does not always render
diff --git a/packages/core/src/components/forms/control-group.md b/packages/core/src/components/forms/control-group.md
index 5069b3da5f..0873ec7f88 100644
--- a/packages/core/src/components/forms/control-group.md
+++ b/packages/core/src/components/forms/control-group.md
@@ -8,7 +8,7 @@ Note that `.@ns-control-group` does not cascade any modifiers to its children. F
 child must be marked individually as `.@ns-large` for uniform large appearance.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-comparison">
-    <h4 class="@ns-callout-title">Control group vs. input group</h4>
+    <h4 class="@ns-heading">Control group vs. input group</h4>
     <p>Both components group multiple elements into a single unit, but their usage patterns are
     different.</p>
     <p>Think of `.@ns-control-group` as a parent with multiple children, each of them a
diff --git a/packages/core/src/components/forms/file-input.md b/packages/core/src/components/forms/file-input.md
index 3deca31815..0d0c807309 100644
--- a/packages/core/src/components/forms/file-input.md
+++ b/packages/core/src/components/forms/file-input.md
@@ -4,7 +4,7 @@ Use the standard `input type="file"` along with a `span` with class `@ns-file-up
 Wrap that all in a `label` with class `@ns-file-input`.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Static file name</h4>
+    <h4 class="@ns-heading">Static file name</h4>
     File name does not update on file selection. To get this behavior,
     you must implement it separately in JS.
 </div>
diff --git a/packages/core/src/components/forms/input-group.md b/packages/core/src/components/forms/input-group.md
index 8f8192d1a7..f755dc934d 100644
--- a/packages/core/src/components/forms/input-group.md
+++ b/packages/core/src/components/forms/input-group.md
@@ -14,7 +14,7 @@ vice versa. You do not need to apply sizing classes to the children&mdash;they i
 the parent input.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Icons only</h4>
+    <h4 class="@ns-heading">Icons only</h4>
     <p>You cannot use buttons with text in the CSS API for input groups. The padding for text inputs
     in CSS cannot accomodate buttons whose width varies due to text content. You should use icons on
     buttons instead.</p>
diff --git a/packages/core/src/components/forms/label.md b/packages/core/src/components/forms/label.md
index 3fa0555424..1ea2ccf1ca 100644
--- a/packages/core/src/components/forms/label.md
+++ b/packages/core/src/components/forms/label.md
@@ -3,7 +3,7 @@
 Labels enhance the usability of your forms.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-comparison">
-    <h4 class="@ns-callout-title">Simple labels vs. form groups</h4>
+    <h4 class="@ns-heading">Simple labels vs. form groups</h4>
     <p>Blueprint provides two ways of connecting label text to control fields, depending on the complexity of the control.</p>
     <p>Simple labels are a basic way to connect a label with a single control.</p>
     <p>Form groups support more complex control layouts but require more markup to maintain consistent visuals.</p>
diff --git a/packages/core/src/components/icon/icon.md b/packages/core/src/components/icon/icon.md
index 93fd12a35f..4e8cb7c790 100644
--- a/packages/core/src/components/icon/icon.md
+++ b/packages/core/src/components/icon/icon.md
@@ -5,7 +5,7 @@
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">SVG icons in 2.0</h4>
+    <h4 class="@ns-heading">SVG icons in 2.0</h4>
     Blueprint 2.0 introduced SVG icon support and moved icon resources to a separate __@blueprintjs/icons__ package.
     The `Icon` component now renders SVG paths and the icon classes are no longer used by any Blueprint React component.
     Icon font support has been preserved but should be considered a legacy feature that will be removed in a
@@ -62,7 +62,7 @@ import { IconNames } from "@blueprintjs/icons";
 @## CSS API
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Icon fonts are legacy in 2.0</h4>
+    <h4 class="@ns-heading">Icon fonts are legacy in 2.0</h4>
     Blueprint's icon fonts should be considered a legacy feature and will be removed in a future major version.
     The SVGs rendered by the React component do not suffer from the blurriness of icon fonts, and browser
     support is equivalent.
@@ -84,7 +84,7 @@ Icon classes also support the four `.@ns-intent-*` modifiers to color the image.
 ```
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Non-standard sizes</h4>
+    <h4 class="@ns-heading">Non-standard sizes</h4>
     Generally, font icons should only be used at either 16px or 20px. However, if a non-standard size is
     necessary, set a `font-size` that is whole multiple of 16 or 20 with the relevant size class.
     You can instead use the class `@ns-icon` to make the icon inherit its size from surrounding text.
diff --git a/packages/core/src/components/menu/menu.md b/packages/core/src/components/menu/menu.md
index 93f3914c13..78685c98f0 100644
--- a/packages/core/src/components/menu/menu.md
+++ b/packages/core/src/components/menu/menu.md
@@ -82,7 +82,7 @@ there is not enough room to the right.
 ```
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">JavaScript only</h4>
+    <h4 class="@ns-heading">JavaScript only</h4>
     Submenus are only supported in the React components. They cannot be created with CSS alone because
     they rely on the [`Popover`](#core/components/popover) component for positioning and transitions.
 </div>
diff --git a/packages/core/src/components/navbar/navbar.md b/packages/core/src/components/navbar/navbar.md
index 19ec5e50fb..31b6c33150 100644
--- a/packages/core/src/components/navbar/navbar.md
+++ b/packages/core/src/components/navbar/navbar.md
@@ -25,7 +25,7 @@ screen as the user scrolls through the document.
 This modifier is not illustrated here because it breaks the documentation flow.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Body padding required</h4>
+    <h4 class="@ns-heading">Body padding required</h4>
     The fixed navbar will lie on top of your other content unless you add padding to the top of the
     `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable to
     access the height of the navbar (50px).
diff --git a/packages/core/src/components/overlay/overlay.md b/packages/core/src/components/overlay/overlay.md
index 0184838eff..1d21af9c0e 100644
--- a/packages/core/src/components/overlay/overlay.md
+++ b/packages/core/src/components/overlay/overlay.md
@@ -29,7 +29,7 @@ The `onClose` callback prop is invoked when user interaction causes the overlay
 but your application is responsible for updating the state that actually closes the overlay.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">A note about overlay content positioning</h4>
+    <h4 class="@ns-heading">A note about overlay content positioning</h4>
     When rendered inline, content will automatically be set to `position: absolute` to respect
     document flow. Otherwise, content will be set to `position: fixed` to cover the entire viewport.
 </div>
diff --git a/packages/core/src/components/popover/popover.md b/packages/core/src/components/popover/popover.md
index 45651eabf5..d38e9a997e 100644
--- a/packages/core/src/components/popover/popover.md
+++ b/packages/core/src/components/popover/popover.md
@@ -64,7 +64,7 @@ Internally, the provided target is wrapped in a `span.@ns-popover-target`. This
 ```
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Button targets</h4>
+    <h4 class="@ns-heading">Button targets</h4>
     Buttons make great popover targets, but the `disabled` attribute on a `<button>` blocks all
     events, which interferes with the popover functioning. If you need to disable a button that
     triggers a popover, you should use [`AnchorButton`](#core/components/button.anchor-button) instead.
@@ -163,7 +163,7 @@ in your application logic whether you should care about a particular invocation
 if the `nextOpenState` is not the same as the `Popover`'s current state).
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Disabling controlled popovers</h4>
+    <h4 class="@ns-heading">Disabling controlled popovers</h4>
     <p>If `disabled={true}`, a controlled popover will remain closed even if `isOpen={true}`.
     The popover will re-open when `disabled` is set to `false.</p>
 </div>
@@ -235,7 +235,7 @@ The __@blueprintjs/core__ package exports the above values in the `PopoverIntera
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Conditionally styling popover targets</h4>
+    <h4 class="@ns-heading">Conditionally styling popover targets</h4>
     When a popover is open, the target has a <code>.@ns-popover-open</code> class applied to it.
     You can use this to style the target differently when the popover is open.
 </div>
@@ -279,7 +279,7 @@ a translucent background color, like the backdrop for the [`Dialog`](#core/compo
 The backdrop element has the same opacity-fade transition as the `Dialog` backdrop.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Dangerous edge case</h4>
+    <h4 class="@ns-heading">Dangerous edge case</h4>
     Rendering a `<Popover isOpen={true} hasBackdrop={true}>` outside the viewport bounds can easily break
     your application by covering the UI with an invisible non-interactive backdrop. This edge case
     must be handled by your application code or simply avoided if possible.
diff --git a/packages/core/src/components/portal/portal.md b/packages/core/src/components/portal/portal.md
index e2a2688d86..cdaae116fd 100644
--- a/packages/core/src/components/portal/portal.md
+++ b/packages/core/src/components/portal/portal.md
@@ -17,7 +17,7 @@ The children of a `Portal` component are appended to the `<body>` element.
 application.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">A note about responsive layouts</h4>
+    <h4 class="@ns-heading">A note about responsive layouts</h4>
     For a single-page app, if the `<body>` is styled with `width: 100%` and `height: 100%`, a `Portal`
     may take up extra whitespace and cause the window to undesirably scroll. To fix this, instead
     apply `position: absolute` to the `<body>` tag.
diff --git a/packages/core/src/components/skeleton/skeleton.md b/packages/core/src/components/skeleton/skeleton.md
index 0d83e17803..6232c6ab1d 100644
--- a/packages/core/src/components/skeleton/skeleton.md
+++ b/packages/core/src/components/skeleton/skeleton.md
@@ -10,7 +10,7 @@ when using skeletons to show loading text, you should use some sort of placehold
 approximately the length of your expected text.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Manually disable focusable elements</h4>
+    <h4 class="@ns-heading">Manually disable focusable elements</h4>
     When using the `.@ns-skeleton` class on focusable elements such as inputs and buttons, be sure to
     disable the element, via either the `disabled` or `tabindex="-1"` attributes. Failing to do so
     will allow these skeleton elements to be focused when they shouldn't be.
diff --git a/packages/core/src/components/spinner/spinner.md b/packages/core/src/components/spinner/spinner.md
index 9f7f63143d..455b074964 100644
--- a/packages/core/src/components/spinner/spinner.md
+++ b/packages/core/src/components/spinner/spinner.md
@@ -25,7 +25,7 @@ Note that the CSS modifiers described in the [CSS API](#core/components/progress
 are supported via the `className` prop.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">IE11 compatibility note</h4>
+    <h4 class="@ns-heading">IE11 compatibility note</h4>
     IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known
     `value` will not smoothly transition as `value` changes. Indeterminate spinners still animate
     correctly because they rely on CSS animations, not transitions.
@@ -42,7 +42,7 @@ are supported via the `className` prop.
 Use the `SVGSpinner` component to render a spinner inside an SVG element.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Sizing note</h4>
+    <h4 class="@ns-heading">Sizing note</h4>
     Because of the way SVG elements are sized, you may need to manually scale the spinner inside your
     SVG to make it an appropriate size.
 </div>
diff --git a/packages/core/src/components/table/table-html.md b/packages/core/src/components/table/table-html.md
index 2cdf2ba52e..707c608525 100644
--- a/packages/core/src/components/table/table-html.md
+++ b/packages/core/src/components/table/table-html.md
@@ -3,7 +3,7 @@
 This component adds Blueprint styling to native HTML tables.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">This is not @blueprintjs/table</h4>
+    <h4 class="@ns-heading">This is not @blueprintjs/table</h4>
     This table component is a simple CSS-only skin for HTML `<table>` elements.
     It is ideal for basic static tables. If you're looking for more complex
     spreadsheet-like features, check out [**@blueprintjs/table**](#table).
diff --git a/packages/core/src/components/tag-input/tag-input.md b/packages/core/src/components/tag-input/tag-input.md
index d4771099fb..1b38e6e453 100644
--- a/packages/core/src/components/tag-input/tag-input.md
+++ b/packages/core/src/components/tag-input/tag-input.md
@@ -15,17 +15,17 @@ Tag inputs render [`Tag`](#core/components/tag)s inside an input, followed by an
 The `<input>` element can be controlled directly via the `inputValue` and `onInputChange` props. Additional properties (such as custom event handlers) can be applied to the input via `inputProps`.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Looking for a dropdown menu?</h4>
+    <h4 class="@ns-heading">Looking for a dropdown menu?</h4>
     [`MultiSelect`](#select/multi-select) from the **@blueprintjs/select** package composes this component with a dropdopwn menu of suggestions.
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Handling long words</h4>
+    <h4 class="@ns-heading">Handling long words</h4>
     Set an explicit `width` on `.@ns-tag-input` to cause long words to wrap onto multiple lines. Either supply a specific pixel value, or use `<TagInput className="@ns-fill">` to fill its container's width (try this in the example above).
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Disabling a tag input</h4>
+    <h4 class="@ns-heading">Disabling a tag input</h4>
     <p>Disabling this component requires setting the `disabled` prop to `true` and separately disabling the component's `rightElement` as appropriate (because `TagInput` accepts any `JSX.Element` as its `rightElement`).</p>
     <p>In the example below, when you slide the `Disabled` toggle switch on, the result becomes `<TagInput ... disabled={true} rightElement={<Button ... disabled={true} />} />`</p>
 </div>
diff --git a/packages/core/src/components/toast/toast.md b/packages/core/src/components/toast/toast.md
index 6170b30a52..48203798b0 100644
--- a/packages/core/src/components/toast/toast.md
+++ b/packages/core/src/components/toast/toast.md
@@ -39,13 +39,13 @@ There are three ways to use the `Toaster` component:
 1. `<Toaster ref={ref => ref.show({ ...toast })} />`: Render a `<Toaster>` element and use the `ref` prop to access its instance methods.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Working with multiple toasters</h4>
+    <h4 class="@ns-heading">Working with multiple toasters</h4>
     You can have multiple toasters in a single application, but you must ensure that each has a unique
     `position` to prevent overlap.
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Toaster focus</h4>
+    <h4 class="@ns-heading">Toaster focus</h4>
     `Toaster` always disables `Overlay`'s `enforceFocus` behavior (meaning that you're not blocked
     from accessing other parts of the application while a toast is active), and by default also
     disables `autoFocus` (meaning that focus will not switch to a toast when it appears). You can
diff --git a/packages/core/src/components/tooltip/tooltip.md b/packages/core/src/components/tooltip/tooltip.md
index 78acc2608d..605c245779 100644
--- a/packages/core/src/components/tooltip/tooltip.md
+++ b/packages/core/src/components/tooltip/tooltip.md
@@ -17,7 +17,7 @@ When creating a tooltip, you must specify both:
 The content will appear in a contrasting popover when the target is hovered over.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Button targets</h4>
+    <h4 class="@ns-heading">Button targets</h4>
     Buttons make great tooltip targets, but the `disabled` attribute will prevent all
     events so the enclosing `Tooltip` will not know when to respond.
     Use [`AnchorButton`](#core/components/button.anchor-button) instead;
diff --git a/packages/core/test/callout/calloutTests.tsx b/packages/core/test/callout/calloutTests.tsx
index d3e3284c8d..3c9bfe8973 100644
--- a/packages/core/test/callout/calloutTests.tsx
+++ b/packages/core/test/callout/calloutTests.tsx
@@ -13,7 +13,7 @@ import { Callout, Classes, Icon, Intent } from "../../src/index";
 describe("<Callout>", () => {
     it("supports className", () => {
         const wrapper = shallow(<Callout className="foo" />);
-        assert.isFalse(wrapper.find("h5").exists(), "expected no h5");
+        assert.isFalse(wrapper.find("h4").exists(), "expected no h4");
         assert.isTrue(wrapper.hasClass(Classes.CALLOUT));
         assert.isTrue(wrapper.hasClass("foo"));
     });
@@ -41,7 +41,7 @@ describe("<Callout>", () => {
     it("renders optional title element", () => {
         const title = "I am the title";
         const wrapper = shallow(<Callout title={title} />);
-        assert.strictEqual(wrapper.find(`.${Classes.CALLOUT_TITLE}`).text(), title);
+        assert.strictEqual(wrapper.find(`.${Classes.HEADING}`).text(), title);
         // NOTE: JSX cannot be passed through `title` prop due to conflict with HTML props
         // shallow(<Callout title={<em>typings fail</em>} />);
     });
diff --git a/packages/labs/src/index.md b/packages/labs/src/index.md
index ab3507d5ca..dce3b82ee3 100644
--- a/packages/labs/src/index.md
+++ b/packages/labs/src/index.md
@@ -5,7 +5,7 @@ reference: labs
 @# Labs
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Under construction</h4>
+    <h4 class="@ns-heading">Under construction</h4>
     The **[@blueprintjs/labs](https://www.npmjs.com/package/@blueprintjs/labs)** NPM package contains **unstable React components under active development by team members**. It is an incubator and staging area for components as we refine the API design; as such, this package will never reach 1.0.0, and every minor version should be considered breaking.
 </div>
 
diff --git a/packages/select/src/components/select/multi-select.md b/packages/select/src/components/select/multi-select.md
index 59f421dad9..9ad17ee706 100644
--- a/packages/select/src/components/select/multi-select.md
+++ b/packages/select/src/components/select/multi-select.md
@@ -3,7 +3,7 @@
 Use `MultiSelect<T>` for choosing multiple items in a list. The component renders a [`TagInput`](#core/components/tag-input) wrapped in a `Popover`. Similarly to [`Select`](#select/select-component), you can pass in a predicate to customize the filtering algorithm. Selection of a `MultiSelect<T>` is controlled: listen to changes with `onItemSelect`.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Generic components and custom filtering</h4>
+    <h4 class="@ns-heading">Generic components and custom filtering</h4>
     For more information on controlled usage, generic components and custom filtering, visit the documentation for [`Select<T>`](#select/select-component).
 </div>
 
diff --git a/packages/select/src/components/select/select-component.md b/packages/select/src/components/select/select-component.md
index a697da7eca..d904009c5d 100644
--- a/packages/select/src/components/select/select-component.md
+++ b/packages/select/src/components/select/select-component.md
@@ -3,7 +3,7 @@
 Use `Select<T>` for choosing one item from a list. The component's children will be wrapped in a [`Popover`](#labs/popover) that contains the list and an optional `InputGroup` to filter it. Provide a predicate to customize the filtering algorithm. The value of a `Select<T>` (the currently chosen item) is uncontrolled: listen to changes with `onItemSelect`.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Disabling a Select</h4>
+    <h4 class="@ns-heading">Disabling a Select</h4>
     <p>Disabling the component requires setting the `disabled` prop to `true`
     and separately disabling the component's children as appropriate (because `Select` accepts arbitrary children).</p>
     <p>For example, `<Select ... disabled={true}><Button ... disabled={true} /></Select>`</p>
diff --git a/packages/timezone/src/components/timezone-picker/timezone-picker.md b/packages/timezone/src/components/timezone-picker/timezone-picker.md
index c188a3da00..0bf3d4773b 100644
--- a/packages/timezone/src/components/timezone-picker/timezone-picker.md
+++ b/packages/timezone/src/components/timezone-picker/timezone-picker.md
@@ -25,7 +25,7 @@ Moment Timezone uses a similar [heuristic for guessing](http://momentjs.com/time
 the user's timezone.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Local timezone detection</h4>
+    <h4 class="@ns-heading">Local timezone detection</h4>
     We detect the local timezone when the `showLocalTimezone` prop is enabled and cannot guarantee correctness in all browsers.
     In supported browsers, the [i18n API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions) is used.
     In other browsers, `Date` methods and a population heuristic are used.