diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
index a36715cfc..260b2c446 100644
--- a/doc/colors/OverviewDoc.vue
+++ b/doc/colors/OverviewDoc.vue
@@ -3,7 +3,7 @@
         <p>Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>. Following is the list of general variables used in a theme.</p>
     </DocSectionText>
 
-    <div className="doc-tablewrapper">
+    <div class="doc-tablewrapper">
         <table class="doc-table">
             <thead>
                 <tr>
diff --git a/doc/inputmask/FloatLabelDoc.vue b/doc/inputmask/FloatLabelDoc.vue
index b22ee0ca4..94114ae4b 100644
--- a/doc/inputmask/FloatLabelDoc.vue
+++ b/doc/inputmask/FloatLabelDoc.vue
@@ -3,7 +3,7 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span className="p-float-label">
+        <span class="p-float-label">
             <label for="ssn">SSN</label>
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
         </span>
@@ -18,14 +18,14 @@ export default {
             value: '',
             code: {
                 basic: `
-<span className="p-float-label">
+<span class="p-float-label">
     <label for="ssn">SSN</label>
     <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
 </span>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span className="p-float-label">
+        <span class="p-float-label">
             <label for="ssn">SSN</label>
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
         </span>
@@ -45,7 +45,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span className="p-float-label">
+        <span class="p-float-label">
             <label for="ssn">SSN</label>
             <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
         </span>
diff --git a/doc/inputtext/BasicDoc.vue b/doc/inputtext/BasicDoc.vue
index 0cbbda7e9..a989a9de5 100644
--- a/doc/inputtext/BasicDoc.vue
+++ b/doc/inputtext/BasicDoc.vue
@@ -18,7 +18,7 @@ export default {
 <InputText type="text" v-model="value" />`,
                 options: `
 <template>
-    <div className="card flex justify-content-center">
+    <div class="card flex justify-content-center">
         <InputText type="text" v-model="value" />
     </div>
 </template>
@@ -35,7 +35,7 @@ export default {
         `,
                 composition: `
 <template>
-    <div className="card flex justify-content-center">
+    <div class="card flex justify-content-center">
         <InputText type="text" v-model="value" />
     </div>
 </template>
diff --git a/layouts/doc/DocApiSection.vue b/layouts/doc/DocApiSection.vue
index c43698368..11eb8b646 100644
--- a/layouts/doc/DocApiSection.vue
+++ b/layouts/doc/DocApiSection.vue
@@ -1,6 +1,6 @@
 <template>
-    <div className="doc-main">
-        <div className="doc-intro">
+    <div class="doc-main">
+        <div class="doc-intro">
             <h1>{{ header }} API</h1>
             <p>{{ description }}</p>
         </div>