diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModal.md b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
index c4e14b8ae6c..0f7470df817 100644
--- a/packages/react-core/src/components/AboutModal/examples/AboutModal.md
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModal.md
@@ -9,235 +9,17 @@ import bgImg from './patternfly-orb.svg';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.svg';
-
-class SimpleAboutModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show about modal
-        </Button>
-        <AboutModal
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          trademark="Trademark and copyright information here"
-          brandImageSrc={brandImg}
-          brandImageAlt="Patternfly Logo"
-          productName="Product Name"
-        >
-          <TextContent>
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-              <TextListItem component="dt">Cloudforms Version</TextListItem>
-              <TextListItem component="dd">4.1</TextListItem>
-              <TextListItem component="dt">Server Name</TextListItem>
-              <TextListItem component="dd">40DemoMaster</TextListItem>
-              <TextListItem component="dt">User Name</TextListItem>
-              <TextListItem component="dd">Administrator</TextListItem>
-              <TextListItem component="dt">User Role</TextListItem>
-              <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-              <TextListItem component="dt">Browser Version</TextListItem>
-              <TextListItem component="dd">601.2</TextListItem>
-              <TextListItem component="dt">Browser OS</TextListItem>
-              <TextListItem component="dd">Mac</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AboutModalBasic.tsx"
 ```
 
 ### Without product name
-```js
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.svg';
-
-class SimpleAboutModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show about modal
-        </Button>
-        <AboutModal
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          trademark="Trademark and copyright information here"
-          brandImageSrc={brandImg}
-          brandImageAlt="Patternfly Logo"
-        >
-          <TextContent>
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-              <TextListItem component="dt">Cloudforms Version</TextListItem>
-              <TextListItem component="dd">4.1</TextListItem>
-              <TextListItem component="dt">Server Name</TextListItem>
-              <TextListItem component="dd">40DemoMaster</TextListItem>
-              <TextListItem component="dt">User Name</TextListItem>
-              <TextListItem component="dd">Administrator</TextListItem>
-              <TextListItem component="dt">User Role</TextListItem>
-              <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-              <TextListItem component="dt">Browser Version</TextListItem>
-              <TextListItem component="dd">601.2</TextListItem>
-              <TextListItem component="dt">Browser OS</TextListItem>
-              <TextListItem component="dd">Mac</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AboutModalWithoutProductName.tsx"
 ```
 
 ### Complex user positioned content
-```js
-import React from 'react';
-import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.svg';
-
-class ContentRichAboutModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show about modal
-        </Button>
-        <AboutModal
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          trademark="Trademark and copyright information here"
-          brandImageSrc={brandImg}
-          brandImageAlt="Patternfly Logo"
-          noAboutModalBoxContentContainer={true}
-          productName="Product Name"
-        >
-          <TextContent id="test1" className="pf-u-py-xl">
-            <h4>About</h4>
-            <p>Content here</p>
-          </TextContent>
-          <Alert variant="info" title="Updates available" />
-          <TextContent id="test2" className="pf-u-py-xl">
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-              <TextListItem component="dt">Cloudforms Version</TextListItem>
-              <TextListItem component="dd">4.1</TextListItem>
-              <TextListItem component="dt">Server Name</TextListItem>
-              <TextListItem component="dd">40DemoMaster</TextListItem>
-              <TextListItem component="dt">User Name</TextListItem>
-              <TextListItem component="dd">Administrator</TextListItem>
-              <TextListItem component="dt">User Role</TextListItem>
-              <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-              <TextListItem component="dt">Browser Version</TextListItem>
-              <TextListItem component="dd">601.2</TextListItem>
-              <TextListItem component="dt">Browser OS</TextListItem>
-              <TextListItem component="dd">Mac</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AboutModalComplexUserPositionedContent.tsx"
 ```
 
 ### Custom background image
-```js
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './examples/brandImg.svg';
-import bgImg from './examples/patternfly-orb.svg';
-
-class SimpleAboutModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show about modal
-        </Button>
-        <AboutModal
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          trademark="Trademark and copyright information here"
-          brandImageSrc={brandImg}
-          brandImageAlt="Patternfly Logo"
-          backgroundImageSrc={bgImg}
-        >
-          <TextContent>
-            <TextList component="dl">
-              <TextListItem component="dt">CFME Version</TextListItem>
-              <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            </TextList>
-          </TextContent>
-        </AboutModal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./AboutModalCustomBackgroundImage.tsx"
 ```
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
new file mode 100644
index 00000000000..3a20a8743d0
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+
+export const AboutModalBasic: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+        productName="Product Name"
+      >
+        <TextContent>
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dd">4.1</TextListItem>
+            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dd">40DemoMaster</TextListItem>
+            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dd">Administrator</TextListItem>
+            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
+            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dd">601.2</TextListItem>
+            <TextListItem component="dt">Browser OS</TextListItem>
+            <TextListItem component="dd">Mac</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
new file mode 100644
index 00000000000..916b5ed322f
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+
+export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+        noAboutModalBoxContentContainer={true}
+        productName="Product Name"
+      >
+        <TextContent id="test1" className="pf-u-py-xl">
+          <h4>About</h4>
+          <p>Content here</p>
+        </TextContent>
+        <Alert variant="info" title="Updates available" />
+        <TextContent id="test2" className="pf-u-py-xl">
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dd">4.1</TextListItem>
+            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dd">40DemoMaster</TextListItem>
+            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dd">Administrator</TextListItem>
+            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
+            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dd">601.2</TextListItem>
+            <TextListItem component="dt">Browser OS</TextListItem>
+            <TextListItem component="dd">Mac</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
new file mode 100644
index 00000000000..3bcc7ed013d
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+import bgImg from './patternfly-orb.svg';
+
+export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+        backgroundImageSrc={bgImg}
+      >
+        <TextContent>
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
new file mode 100644
index 00000000000..1870c112617
--- /dev/null
+++ b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import brandImg from './brandImg.svg';
+
+export const AboutModalWithoutProductName: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={toggleModal}>
+        Show about modal
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        trademark="Trademark and copyright information here"
+        brandImageSrc={brandImg}
+        brandImageAlt="Patternfly Logo"
+      >
+        <TextContent>
+          <TextList component="dl">
+            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
+            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dd">4.1</TextListItem>
+            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dd">40DemoMaster</TextListItem>
+            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dd">Administrator</TextListItem>
+            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
+            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dd">601.2</TextListItem>
+            <TextListItem component="dt">Browser OS</TextListItem>
+            <TextListItem component="dd">Mac</TextListItem>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </React.Fragment>
+  );
+};