diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md
index d8b8b0acdaa..ec085e306b7 100644
--- a/packages/react-core/src/components/Text/examples/Text.md
+++ b/packages/react-core/src/components/Text/examples/Text.md
@@ -9,201 +9,32 @@ propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
### Headings
-```js
-import React from 'react';
-import {
- TextContent,
- Text,
- TextVariants,
- TextList,
- TextListVariants,
- TextListItem,
- TextListItemVariants
-} from '@patternfly/react-core';
-
-
- Hello World
- Second level
- Third level
- Fourth level
- Fifth level
- Sixth level
-;
+```ts file="./TextHeadings.tsx"
```
### Body
-```js
-import React from 'react';
-import {
- TextContent,
- Text,
- TextVariants,
- TextList,
- TextListVariants,
- TextListItem,
- TextListItemVariants
-} from '@patternfly/react-core';
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc
- varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel,
- interdum mattis neque. Sub works as well!
-
-
- Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
-
- non ante
-
- . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
-
-
- Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
- turpis.
-
- Sometimes you need small text to display things like date created
-;
+```ts file="./TextBody.tsx"
```
Text components such as Text, TextList, TextListItem need to be placed within a TextContent
### Unordered list
-```js
-import React from 'react';
-import {
- TextContent,
- Text,
- TextVariants,
- TextList,
- TextListVariants,
- TextListItem,
- TextListItemVariants
-} from '@patternfly/react-core';
-
-
-
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
-
- Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
-
-
- Ut non enim metus.
-
-;
+```ts file="./TextUnorderedList.tsx"
```
### Ordered list
-```js
-import React from 'react';
-import {
- TextContent,
- Text,
- TextVariants,
- TextList,
- TextListVariants,
- TextListItem,
- TextListItemVariants
-} from '@patternfly/react-core';
-
-
-
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Integer in volutpat libero.
- Donec a diam tellus.
- Aenean nec tortor orci.
- Quisque aliquam cursus urna, non bibendum massa viverra eget.
- Vivamus maximus ultricies pulvinar.
-
-;
+```ts file="./TextOrderedList.tsx"
```
### Description list
-```js
-import React from 'react';
-import {
- TextContent,
- Text,
- TextVariants,
- TextList,
- TextListVariants,
- TextListItem,
- TextListItemVariants
-} from '@patternfly/react-core';
-
-
-
- Web
-
- The part of the Internet that contains websites and web pages
-
- HTML
- A markup language for creating web pages
- CSS
- A technology to make HTML look better
-
-;
+```ts file="./TextDescriptionList.tsx"
```
### Visited
-```js
-import React from 'react';
-import {
- TextContent,
- Text,
- TextVariants
-} from '@patternfly/react-core';
-
-TextVisited = () => {
- return (
- <>
-
- Visited link example
-
-
- Visited link
-
-
-
-
-
- Visited content example
-
-
- content link 1
-
-
-
-
- content link 2
-
-
-
-
- content link 3
-
-
-
-
- );
-
-};
+```ts file="./TextVisited.tsx"
```
diff --git a/packages/react-core/src/components/Text/examples/TextBody.tsx b/packages/react-core/src/components/Text/examples/TextBody.tsx
new file mode 100644
index 00000000000..ea72f431c62
--- /dev/null
+++ b/packages/react-core/src/components/Text/examples/TextBody.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextBody: React.FunctionComponent = () => (
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+ nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+ erat vel, interdum mattis neque. Sub works as well!
+
+
+ Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
+
+ non ante
+
+ . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+
+
+ Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
+ turpis.
+
+ Sometimes you need small text to display things like date created
+
+);
diff --git a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx
new file mode 100644
index 00000000000..454d6b7a5a2
--- /dev/null
+++ b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
+
+export const TextDescriptionList: React.FunctionComponent = () => (
+
+
+ Web
+
+ The part of the Internet that contains websites and web pages
+
+ HTML
+ A markup language for creating web pages
+ CSS
+ A technology to make HTML look better
+
+
+);
diff --git a/packages/react-core/src/components/Text/examples/TextHeadings.tsx b/packages/react-core/src/components/Text/examples/TextHeadings.tsx
new file mode 100644
index 00000000000..bd104a9e9b1
--- /dev/null
+++ b/packages/react-core/src/components/Text/examples/TextHeadings.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextHeadings: React.FunctionComponent = () => (
+
+ Hello World
+ Second level
+ Third level
+ Fourth level
+ Fifth level
+ Sixth level
+
+);
diff --git a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx
new file mode 100644
index 00000000000..7c92b5a1c71
--- /dev/null
+++ b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+
+export const TextOrderedList: React.FunctionComponent = () => (
+
+
+ Donec blandit a lorem id convallis.
+ Cras gravida arcu at diam gravida gravida.
+ Integer in volutpat libero.
+ Donec a diam tellus.
+ Aenean nec tortor orci.
+ Quisque aliquam cursus urna, non bibendum massa viverra eget.
+ Vivamus maximus ultricies pulvinar.
+
+
+);
diff --git a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx
new file mode 100644
index 00000000000..4ce3dda71b9
--- /dev/null
+++ b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextContent, TextList, TextListItem } from '@patternfly/react-core';
+
+export const TextUnorderedList: React.FunctionComponent = () => (
+
+
+ In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+ Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
+ Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
+ In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+ Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
+
+ Ut non enim metus.
+
+
+);
diff --git a/packages/react-core/src/components/Text/examples/TextVisited.tsx b/packages/react-core/src/components/Text/examples/TextVisited.tsx
new file mode 100644
index 00000000000..80ef36f002a
--- /dev/null
+++ b/packages/react-core/src/components/Text/examples/TextVisited.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextVisited: React.FunctionComponent = () => (
+ <>
+
+ Visited link example
+
+
+ Visited link
+
+
+
+
+
+ Visited content example
+
+
+ content link 1
+
+
+
+
+ content link 2
+
+
+
+
+ content link 3
+
+
+
+
+);