diff --git a/doc/card/AdvancedDoc.vue b/doc/card/AdvancedDoc.vue
index 85b4b428f..d9d02d49d 100644
--- a/doc/card/AdvancedDoc.vue
+++ b/doc/card/AdvancedDoc.vue
@@ -3,12 +3,12 @@
         <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
     </DocSectionText>
     <div class="card flex align-items-center justify-content-center">
-        <Card style="width: 25em">
+        <Card style="width: 25rem; overflow: hidden">
             <template #header>
-                <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
+                <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
             </template>
-            <template #title> Advanced Card </template>
-            <template #subtitle> Card subtitle </template>
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
             <template #content>
                 <p class="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@@ -16,8 +16,10 @@
                 </p>
             </template>
             <template #footer>
-                <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
+                <div class="flex gap-3 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
             </template>
         </Card>
     </div>
@@ -30,12 +32,12 @@ export default {
         return {
             code: {
                 basic: `
-<Card style="width: 25em">
+<Card style="width: 25rem; overflow: hidden">
     <template #header>
         <img alt="user header" src="/images/usercard.png" />
     </template>
-    <template #title> Advanced Card </template>
-    <template #subtitle> Card subtitle </template>
+    <template #title>Advanced Card</template>
+    <template #subtitle>Card subtitle</template>
     <template #content>
         <p class="m-0">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@@ -43,20 +45,22 @@ export default {
         </p>
     </template>
     <template #footer>
-        <Button icon="pi pi-check" label="Save" />
-        <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
+        <div class="flex gap-3 mt-1">
+            <Button label="Cancel" severity="secondary" outlined class="w-full" />
+            <Button label="Save" class="w-full" />
+        </div>
     </template>
 </Card>
 `,
                 options: `
 <template>
     <div class="card flex align-items-center justify-content-center">
-        <Card style="width: 25em">
+        <Card style="width: 25rem; overflow: hidden">
             <template #header>
                 <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
             </template>
-            <template #title> Advanced Card </template>
-            <template #subtitle> Card subtitle </template>
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
             <template #content>
                 <p class="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@@ -64,8 +68,10 @@ export default {
                 </p>
             </template>
             <template #footer>
-                <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
+                <div class="flex gap-3 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
             </template>
         </Card>
     </div>
@@ -77,12 +83,12 @@ export default {
                 composition: `
 <template>
     <div class="card flex align-items-center justify-content-center">
-        <Card style="width: 25em">
+        <Card style="width: 25rem; overflow: hidden">
             <template #header>
                 <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
             </template>
-            <template #title> Advanced Card </template>
-            <template #subtitle> Card subtitle </template>
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
             <template #content>
                 <p class="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@@ -90,8 +96,10 @@ export default {
                 </p>
             </template>
             <template #footer>
-                <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
+                <div class="flex gap-3 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
             </template>
         </Card>
     </div>