diff --git a/doc/accordion/pt/PTImage.vue b/doc/accordion/pt/PTImage.vue
index 0fa365701..e2ec2bff2 100644
--- a/doc/accordion/pt/PTImage.vue
+++ b/doc/accordion/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/accordion.jpg" />
     </div>
 </template>
diff --git a/doc/avatar/pt/PTImage.vue b/doc/avatar/pt/PTImage.vue
index 4457559a7..e47971e8f 100644
--- a/doc/avatar/pt/PTImage.vue
+++ b/doc/avatar/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/avatar.jpg" />
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/avatargroup.jpg" />
     </div>
diff --git a/doc/badge/pt/PTImage.vue b/doc/badge/pt/PTImage.vue
index 13dcde1ac..b42b31f33 100644
--- a/doc/badge/pt/PTImage.vue
+++ b/doc/badge/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/badge.jpg" />
     </div>
 </template>
diff --git a/doc/card/pt/PTImage.vue b/doc/card/pt/PTImage.vue
index 514b14243..a2fba4b77 100644
--- a/doc/card/pt/PTImage.vue
+++ b/doc/card/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/card.jpg" />
     </div>
 </template>
diff --git a/doc/chip/pt/PTImage.vue b/doc/chip/pt/PTImage.vue
index 433bb9178..020c84559 100644
--- a/doc/chip/pt/PTImage.vue
+++ b/doc/chip/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/chip.jpg" />
     </div>
 </template>
diff --git a/doc/deferredcontent/pt/PTImage.vue b/doc/deferredcontent/pt/PTImage.vue
index 34f68865d..01e028569 100644
--- a/doc/deferredcontent/pt/PTImage.vue
+++ b/doc/deferredcontent/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/deferred.jpg" />
     </div>
 </template>
diff --git a/doc/divider/pt/PTImage.vue b/doc/divider/pt/PTImage.vue
index de6f933a9..7a6c733d7 100644
--- a/doc/divider/pt/PTImage.vue
+++ b/doc/divider/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/divider.jpg" />
     </div>
 </template>
diff --git a/doc/fieldset/pt/PTImage.vue b/doc/fieldset/pt/PTImage.vue
index b451ba9e4..9d7626707 100644
--- a/doc/fieldset/pt/PTImage.vue
+++ b/doc/fieldset/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/fieldset.jpg" />
     </div>
 </template>
diff --git a/doc/panel/pt/PTImage.vue b/doc/panel/pt/PTImage.vue
index f178fde7d..e057deedb 100644
--- a/doc/panel/pt/PTImage.vue
+++ b/doc/panel/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/panel.jpg" />
     </div>
 </template>
diff --git a/doc/progressbar/pt/PTImage.vue b/doc/progressbar/pt/PTImage.vue
index c7412a66a..0424ab608 100644
--- a/doc/progressbar/pt/PTImage.vue
+++ b/doc/progressbar/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/progressbar.jpg" />
     </div>
 </template>
diff --git a/doc/progressspinner/pt/PTImage.vue b/doc/progressspinner/pt/PTImage.vue
index 78548b7ef..3e3855714 100644
--- a/doc/progressspinner/pt/PTImage.vue
+++ b/doc/progressspinner/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/progressspinner.jpg" />
     </div>
 </template>
diff --git a/doc/scrollpanel/pt/PTImage.vue b/doc/scrollpanel/pt/PTImage.vue
index 608c732f7..37485f16c 100644
--- a/doc/scrollpanel/pt/PTImage.vue
+++ b/doc/scrollpanel/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/scrollpanel.jpg" />
     </div>
 </template>
diff --git a/doc/scrolltop/pt/PTImage.vue b/doc/scrolltop/pt/PTImage.vue
index 45f5ca84c..5b3aa93f2 100644
--- a/doc/scrolltop/pt/PTImage.vue
+++ b/doc/scrolltop/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/scrolltop.jpg" />
     </div>
 </template>
diff --git a/doc/splitter/pt/PTImage.vue b/doc/splitter/pt/PTImage.vue
index 6104f1daa..fd7e964ec 100644
--- a/doc/splitter/pt/PTImage.vue
+++ b/doc/splitter/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/splitter.jpg" />
     </div>
 </template>
diff --git a/doc/tabview/pt/PTImage.vue b/doc/tabview/pt/PTImage.vue
index 7cc9f0fed..e0aea3380 100644
--- a/doc/tabview/pt/PTImage.vue
+++ b/doc/tabview/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tabview.jpg" />
     </div>
 </template>
diff --git a/doc/tag/pt/PTImage.vue b/doc/tag/pt/PTImage.vue
index b1955bb71..fa821c8b2 100644
--- a/doc/tag/pt/PTImage.vue
+++ b/doc/tag/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tag.jpg" />
     </div>
 </template>
diff --git a/doc/terminal/pt/PTImage.vue b/doc/terminal/pt/PTImage.vue
index bb4775499..ffd53a2d4 100644
--- a/doc/terminal/pt/PTImage.vue
+++ b/doc/terminal/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/terminal.jpg" />
     </div>
 </template>
diff --git a/doc/toolbar/pt/PTImage.vue b/doc/toolbar/pt/PTImage.vue
index 0bbef1596..ff64666f3 100644
--- a/doc/toolbar/pt/PTImage.vue
+++ b/doc/toolbar/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
+    <div class="card">
         <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/toolbar.jpg" />
     </div>
 </template>