diff --git a/docs/api/text.md b/docs/api/text.md
index f2cf72570cc..e52f85142fb 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -1,12 +1,6 @@
---
title: "ion-text"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/text/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/text/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
import Props from '@site/static/auto-generated/text/props.md';
import Events from '@site/static/auto-generated/text/events.md';
import Methods from '@site/static/auto-generated/text/methods.md';
@@ -20,56 +14,21 @@ import Slots from '@site/static/auto-generated/text/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
The text component is a simple component that can be used to style the text color of any element. The `ion-text` element should wrap the element in order to change the text color of that element.
+## Basic Usage
+import Basic from '@site/static/usage/text/basic/index.md';
+
-## Usage
-
-```html
-
-
H1: The quick brown fox jumps over the lazy dog
-
-
-
-
H2: The quick brown fox jumps over the lazy dog
-
-
-
-
H3: The quick brown fox jumps over the lazy dog
-
-
-
-
H4: The quick brown fox jumps over the lazy dog
-
-
-
H5: The quick brown fox jumps over the lazy dog
-
+## Theming
-
- I saw a werewolf with a Chinese menu in his hand.
- Walking through the streets of Soho in the rain.
- He was looking for a place called Lee Ho Fook's.
- Gonna get a big dish of beef chow mein.
-
-
-```
+The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
## Properties
@@ -87,4 +46,4 @@ The text component is a simple component that can be used to style the text colo
## Slots
-
\ No newline at end of file
+
diff --git a/static/usage/text/basic/angular.md b/static/usage/text/basic/angular.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/text/basic/angular.md
@@ -0,0 +1,21 @@
+```html
+
+
H1: The quick brown fox jumps over the lazy dog
+
+
+
+
H2: The quick brown fox jumps over the lazy dog
+
+
+
+
H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+
+
+
+
+
diff --git a/static/usage/text/basic/index.md b/static/usage/text/basic/index.md
new file mode 100644
index 00000000000..6c9ef54be7c
--- /dev/null
+++ b/static/usage/text/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+
diff --git a/static/usage/text/basic/javascript.md b/static/usage/text/basic/javascript.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/text/basic/javascript.md
@@ -0,0 +1,21 @@
+```html
+
+
H1: The quick brown fox jumps over the lazy dog
+
+
+
+
H2: The quick brown fox jumps over the lazy dog
+
+
+
+
H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+```
diff --git a/static/usage/text/basic/react.md b/static/usage/text/basic/react.md
new file mode 100644
index 00000000000..dac54e84471
--- /dev/null
+++ b/static/usage/text/basic/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonText, IonIcon } from '@ionic/react';
+import { warning } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
H1: The quick brown fox jumps over the lazy dog
+
+
+
+
H2: The quick brown fox jumps over the lazy dog
+
+
+
+
H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+