diff --git a/packages/react-core/src/components/Title/examples/Title.md b/packages/react-core/src/components/Title/examples/Title.md
index 676d2e87cc8..e2e3a78a020 100644
--- a/packages/react-core/src/components/Title/examples/Title.md
+++ b/packages/react-core/src/components/Title/examples/Title.md
@@ -6,56 +6,10 @@ propComponents: ['Title']
 ---
 
 ## Examples
-### Sizes
-```js
-import React from 'react';
-import { Title, TitleSizes } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Title headingLevel="h1" size={TitleSizes['4xl']}>
-    4xl Title
-  </Title>
-  <Title headingLevel="h2" size="3xl">
-    3xl Title
-  </Title>
-  <Title headingLevel="h3" size={TitleSizes['2xl']}>
-    2xl Title
-  </Title>
-  <Title headingLevel="h4" size="xl">
-    xl Title
-  </Title>
-  <Title headingLevel="h5" size={TitleSizes.lg}>
-    lg Title
-  </Title>
-  <Title headingLevel="h6" size="md">
-    md Title
-  </Title>
-</React.Fragment>
+### Default Sizes
+```ts file="./TitleDefaultSizes.tsx"
 ```
 
-### Default size mappings
-```js
-import React from 'react';
-import { Title } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Title headingLevel="h1">
-    h1 default to 2xl
-  </Title>
-  <Title headingLevel="h2">
-    h2 defaults to xl
-  </Title>
-  <Title headingLevel="h3">
-    h3 defaults to lg
-  </Title>
-  <Title headingLevel="h4">
-    h4 defaults to md
-  </Title>
-  <Title headingLevel="h5">
-    h5 defaults to md
-  </Title>
-  <Title headingLevel="h6">
-    h6 defaults to md
-  </Title>
-</React.Fragment>
+### Custom Sizes
+```ts file="./TitleCustomSizes.tsx"
 ```
diff --git a/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx b/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx
new file mode 100644
index 00000000000..2d1a89e775d
--- /dev/null
+++ b/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Title, TitleSizes } from '@patternfly/react-core';
+
+export const TitleCustomSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Title headingLevel="h1" size={TitleSizes['4xl']}>
+      h1 as 4xl
+    </Title>
+    <Title headingLevel="h2" size="3xl">
+      h2 as 3xl
+    </Title>
+    <Title headingLevel="h3" size={TitleSizes['2xl']}>
+      h3 as 2xl
+    </Title>
+    <Title headingLevel="h4" size="xl">
+      h4 as xl
+    </Title>
+    <Title headingLevel="h5" size={TitleSizes.lg}>
+      h5 as lg
+    </Title>
+    <Title headingLevel="h6" size="md">
+      h6 as md Title
+    </Title>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx b/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx
new file mode 100644
index 00000000000..f8a33d8db19
--- /dev/null
+++ b/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Title } from '@patternfly/react-core';
+
+export const TitleDefaultSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Title headingLevel="h1">h1 defaults to 2xl</Title>
+    <Title headingLevel="h2">h2 defaults to xl</Title>
+    <Title headingLevel="h3">h3 defaults to lg</Title>
+    <Title headingLevel="h4">h4 defaults to md</Title>
+    <Title headingLevel="h5">h5 defaults to md</Title>
+    <Title headingLevel="h6">h6 defaults to md</Title>
+  </React.Fragment>
+);