diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index 224ede7925..a30746c387 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -97,7 +97,7 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="ion-activated">
+      <IonItem href="#" className="ion-activated">
         <IonIcon name="wifi" slot="start" />
         <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
@@ -107,7 +107,7 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="ion-activated">
+      <IonItem className="ion-activated">
         <IonIcon name="warning" slot="start" />
         <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
diff --git a/core/src/components/card/usage/react.md b/core/src/components/card/usage/react.md
index 2c0b112413..0ac950432a 100644
--- a/core/src/components/card/usage/react.md
+++ b/core/src/components/card/usage/react.md
@@ -30,7 +30,7 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="ion-activated">
+      <IonItem href="#" className="ion-activated">
         <IonIcon name="wifi" slot="start" />
         <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
@@ -40,7 +40,7 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="ion-activated">
+      <IonItem className="ion-activated">
         <IonIcon name="warning" slot="start" />
         <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index cc6ca47a4d..7809da7f6c 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -250,9 +250,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol class="ion-align-self-start">ion-col start</IonCol>
-        <IonCol class="ion-align-self-center">ion-col center</IonCol>
-        <IonCol class="ion-align-self-end">ion-col end</IonCol>
+        <IonCol className="ion-align-self-start">ion-col start</IonCol>
+        <IonCol className="ion-align-self-center">ion-col center</IonCol>
+        <IonCol className="ion-align-self-end">ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -260,10 +260,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-start">
+      <IonRow className="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol class="ion-align-self-end">start ion-col end</IonCol>
+        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -271,7 +271,7 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-center">
+      <IonRow className="ion-align-items-center">
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
@@ -282,9 +282,9 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-end">
+      <IonRow className="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
+        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col
diff --git a/core/src/components/grid/usage/react.md b/core/src/components/grid/usage/react.md
index 04397a8558..6b4c695090 100644
--- a/core/src/components/grid/usage/react.md
+++ b/core/src/components/grid/usage/react.md
@@ -51,9 +51,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol class="ion-align-self-start">ion-col start</IonCol>
-        <IonCol class="ion-align-self-center">ion-col center</IonCol>
-        <IonCol class="ion-align-self-end">ion-col end</IonCol>
+        <IonCol className="ion-align-self-start">ion-col start</IonCol>
+        <IonCol className="ion-align-self-center">ion-col center</IonCol>
+        <IonCol className="ion-align-self-end">ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -61,10 +61,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-start">
+      <IonRow className="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol class="ion-align-self-end">start ion-col end</IonCol>
+        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -72,7 +72,7 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-center">
+      <IonRow className="ion-align-items-center">
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
@@ -83,9 +83,9 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow class="ion-align-items-end">
+      <IonRow className="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
+        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 5330fd32cb..2d08cd4639 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -778,14 +778,14 @@ const Example: React.FC<{}> = () => (
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
           <IonText color="primary">
             <h3>H3 Primary Title</h3>
           </IonText>
diff --git a/core/src/components/item/usage/react.md b/core/src/components/item/usage/react.md
index beb1393847..976bc7b11e 100644
--- a/core/src/components/item/usage/react.md
+++ b/core/src/components/item/usage/react.md
@@ -67,14 +67,14 @@ const Example: React.FC<{}> = () => (
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
+        <IonLabel className="ion-text-wrap">
           <IonText color="primary">
             <h3>H3 Primary Title</h3>
           </IonText>
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index 047fbc2905..0f12dfeabe 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -90,7 +90,7 @@ export const LabelExample: React.FC = () => (
     </IonItem>
 
     <IonItem>
-      <IonLabel class="ion-text-wrap">
+      <IonLabel className="ion-text-wrap">
         Multi-line text that should wrap when it is too long
         to fit on one line in the item.
       </IonLabel>
diff --git a/core/src/components/label/usage/react.md b/core/src/components/label/usage/react.md
index 0c88c96097..9188f94414 100644
--- a/core/src/components/label/usage/react.md
+++ b/core/src/components/label/usage/react.md
@@ -20,7 +20,7 @@ export const LabelExample: React.FC = () => (
     </IonItem>
 
     <IonItem>
-      <IonLabel class="ion-text-wrap">
+      <IonLabel className="ion-text-wrap">
         Multi-line text that should wrap when it is too long
         to fit on one line in the item.
       </IonLabel>
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index 560429d9b1..a15ef885cb 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -228,7 +228,7 @@ export const MenuExample: React.FC = () => (
       </IonContent>
     </IonMenu>
 
-    <IonMenu side="start" menuId="custom" class="my-custom-menu">
+    <IonMenu side="start" menuId="custom" className="my-custom-menu">
       <IonHeader>
         <IonToolbar color="tertiary">
           <IonTitle>Custom Menu</IonTitle>
diff --git a/core/src/components/menu/usage/react.md b/core/src/components/menu/usage/react.md
index 681290598b..0cca2c05df 100644
--- a/core/src/components/menu/usage/react.md
+++ b/core/src/components/menu/usage/react.md
@@ -21,7 +21,7 @@ export const MenuExample: React.FC = () => (
       </IonContent>
     </IonMenu>
 
-    <IonMenu side="start" menuId="custom" class="my-custom-menu">
+    <IonMenu side="start" menuId="custom" className="my-custom-menu">
       <IonHeader>
         <IonToolbar color="tertiary">
           <IonTitle>Custom Menu</IonTitle>