From 04400f01a5e20a540192a6d06a00069b506a89b7 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 13 Apr 2024 13:13:08 -0500
Subject: [PATCH] docs(VCard): update all examples, rearrange content

---
 .../src/examples/v-card/basics-combine.vue    |   9 +-
 .../src/examples/v-card/basics-content.vue    |  85 ++++----
 .../src/examples/v-card/misc-card-reveal.vue  |  42 ++--
 .../examples/v-card/misc-content-wrapping.vue |  84 ++++---
 .../examples/v-card/misc-custom-actions.vue   |   6 +-
 .../examples/v-card/misc-earnings-goal.vue    |  40 ++++
 .../docs/src/examples/v-card/misc-grids.vue   |  18 +-
 .../examples/v-card/misc-horizontal-cards.vue | 206 ++++++++----------
 .../examples/v-card/misc-information-card.vue |  15 +-
 .../examples/v-card/misc-media-with-text.vue  |   8 +-
 .../examples/v-card/misc-shopify-funding.vue  |  65 ++++++
 .../src/examples/v-card/misc-twitter-card.vue |   3 +-
 .../src/examples/v-card/misc-weather-card.vue |   7 +-
 .../docs/src/examples/v-card/prop-color.vue   | 121 +++++-----
 .../src/examples/v-card/prop-disabled.vue     |   2 +-
 .../src/examples/v-card/prop-elevated.vue     |   6 +-
 .../src/examples/v-card/prop-elevation.vue    |   1 +
 .../docs/src/examples/v-card/prop-hover.vue   |   1 +
 .../docs/src/examples/v-card/prop-href.vue    |   3 +-
 .../docs/src/examples/v-card/prop-image.vue   |  22 +-
 .../docs/src/examples/v-card/prop-link.vue    |   2 +-
 .../docs/src/examples/v-card/prop-loading.vue |  13 +-
 .../src/examples/v-card/prop-outlined.vue     |   6 +-
 .../docs/src/examples/v-card/prop-variant.vue |  61 +++---
 .../examples/v-card/slot-prepend-append.vue   |  14 +-
 .../docs/src/pages/en/components/cards.md     |  74 +++++--
 26 files changed, 518 insertions(+), 396 deletions(-)
 create mode 100644 packages/docs/src/examples/v-card/misc-earnings-goal.vue
 create mode 100644 packages/docs/src/examples/v-card/misc-shopify-funding.vue

diff --git a/packages/docs/src/examples/v-card/basics-combine.vue b/packages/docs/src/examples/v-card/basics-combine.vue
index 2a10904019b..fe41cc0bd0b 100644
--- a/packages/docs/src/examples/v-card/basics-combine.vue
+++ b/packages/docs/src/examples/v-card/basics-combine.vue
@@ -1,15 +1,16 @@
 <template>
   <v-card
     class="mx-auto"
-    prepend-icon="mdi-home"
+    prepend-icon="$vuetify"
+    subtitle="The #1 Vue UI Library"
     width="400"
   >
     <template v-slot:title>
-      This is a title
+      <span class="font-weight-black">Welcome to Vuetify</span>
     </template>
 
-    <v-card-text>
-      This is content
+    <v-card-text class="bg-surface-light pt-4">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
     </v-card-text>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/basics-content.vue b/packages/docs/src/examples/v-card/basics-content.vue
index 63d99b233ad..43f48b84d48 100644
--- a/packages/docs/src/examples/v-card/basics-content.vue
+++ b/packages/docs/src/examples/v-card/basics-content.vue
@@ -1,42 +1,47 @@
 <template>
-  <div class="d-flex align-center flex-column">
-    <div class="text-subtitle-2">With props</div>
-
-    <v-card
-      subtitle="This is a subtitle"
-      text="This is content"
-      title="This is a title"
-      width="400"
-    ></v-card>
-
-    <div class="mt-4 text-subtitle-2">With slots</div>
-
-    <v-card width="400">
-      <template v-slot:title>
-        This is a title
-      </template>
-
-      <template v-slot:subtitle>
-        This is a subtitle
-      </template>
-
-      <template v-slot:text>
-        This is content
-      </template>
-    </v-card>
-
-    <div class="mt-4 text-subtitle-2">With markup</div>
-
-    <v-card width="400">
-      <v-card-item>
-        <v-card-title>This is a title</v-card-title>
-
-        <v-card-subtitle>This is a subtitle</v-card-subtitle>
-      </v-card-item>
-
-      <v-card-text>
-        This is content
-      </v-card-text>
-    </v-card>
-  </div>
+  <v-row>
+    <v-col cols="12" md="4">
+      <v-card
+        subtitle="This is a card subtitle"
+        text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!"
+        title="This is a title"
+      ></v-card>
+
+      <div class="text-center text-caption">Using Props Only</div>
+    </v-col>
+
+    <v-col cols="12" md="4">
+      <v-card>
+        <template v-slot:title>
+          This is a title
+        </template>
+
+        <template v-slot:subtitle>
+          This is a card subtitle
+        </template>
+
+        <template v-slot:text>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
+        </template>
+      </v-card>
+
+      <div class="text-center text-caption">Using Slots Only</div>
+    </v-col>
+
+    <v-col cols="12" md="4">
+      <v-card>
+        <v-card-item>
+          <v-card-title>This is a title</v-card-title>
+
+          <v-card-subtitle>This is a card subtitle</v-card-subtitle>
+        </v-card-item>
+
+        <v-card-text>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
+        </v-card-text>
+      </v-card>
+
+      <div class="text-center text-caption">Using Markup Only</div>
+    </v-col>
+  </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-card/misc-card-reveal.vue b/packages/docs/src/examples/v-card/misc-card-reveal.vue
index 1d388b1ed99..cd4651af81e 100644
--- a/packages/docs/src/examples/v-card/misc-card-reveal.vue
+++ b/packages/docs/src/examples/v-card/misc-card-reveal.vue
@@ -5,45 +5,48 @@
   >
     <v-card-text>
       <div>Word of the Day</div>
-      <p class="text-h4 text--primary">
-        el·ee·mos·y·nar·y
-      </p>
+
+      <p class="text-h4 font-weight-black">el·ee·mos·y·nar·y</p>
+
       <p>adjective</p>
-      <div class="text--primary">
+
+      <div class="text-medium-emphasis">
         relating to or dependent on charity; charitable; charitable donations. Pertaining to alms.<br>
         "an eleemosynary educational institution."
       </div>
     </v-card-text>
+
     <v-card-actions>
       <v-btn
         color="teal-accent-4"
+        text="Learn More"
         variant="text"
         @click="reveal = true"
-      >
-        Learn More
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
 
     <v-expand-transition>
       <v-card
         v-if="reveal"
-        class="v-card--reveal"
-        style="height: 100%;"
+        class="position-absolute w-100"
+        height="100%"
+        style="bottom: 0;"
       >
         <v-card-text class="pb-0">
-          <p class="text-h4 text--primary">
-            Origin
+          <p class="text-h4">Origin</p>
+
+          <p class="text-medium-emphasis">
+            late 16th century (as a noun denoting a place where alms were distributed): from medieval Latin eleemosynarius, from late Latin eleemosyna ‘alms’, from Greek eleēmosunē ‘compassion’
           </p>
-          <p>late 16th century (as a noun denoting a place where alms were distributed): from medieval Latin eleemosynarius, from late Latin eleemosyna ‘alms’, from Greek eleēmosunē ‘compassion’ </p>
         </v-card-text>
+
         <v-card-actions class="pt-0">
           <v-btn
             color="teal-accent-4"
+            text="Close"
             variant="text"
             @click="reveal = false"
-          >
-            Close
-          </v-btn>
+          ></v-btn>
         </v-card-actions>
       </v-card>
     </v-expand-transition>
@@ -63,12 +66,3 @@
     }),
   }
 </script>
-
-<style>
-.v-card--reveal {
-  bottom: 0;
-  opacity: 1 !important;
-  position: absolute;
-  width: 100%;
-}
-</style>
diff --git a/packages/docs/src/examples/v-card/misc-content-wrapping.vue b/packages/docs/src/examples/v-card/misc-content-wrapping.vue
index 33fe3177f0c..1b3792590e0 100644
--- a/packages/docs/src/examples/v-card/misc-content-wrapping.vue
+++ b/packages/docs/src/examples/v-card/misc-content-wrapping.vue
@@ -1,55 +1,45 @@
 <template>
-  <v-container>
-    <v-row justify="space-around">
-      <v-card width="400">
-        <v-img
-          class="text-white"
-          height="200"
-          src="https://cdn.vuetifyjs.com/docs/images/cards/purple-flowers.jpg"
-          cover
-        >
-          <v-toolbar
-            color="rgba(0, 0, 0, 0)"
-            theme="dark"
-          >
-            <template v-slot:prepend>
-              <v-btn icon="$menu"></v-btn>
-            </template>
+  <v-card class="mx-auto" max-width="400">
+    <v-img
+      color="surface-variant"
+      height="200"
+      src="https://cdn.vuetifyjs.com/docs/images/cards/purple-flowers.jpg"
+      cover
+    >
+      <v-toolbar color="transparent">
+        <template v-slot:prepend>
+          <v-btn icon="$menu"></v-btn>
+        </template>
 
-            <v-toolbar-title class="text-h6">
-              Messages
-            </v-toolbar-title>
+        <v-toolbar-title class="text-h6" text="Messages"></v-toolbar-title>
 
-            <template v-slot:append>
-              <v-btn icon="mdi-dots-vertical"></v-btn>
-            </template>
-          </v-toolbar>
-        </v-img>
+        <template v-slot:append>
+          <v-btn icon="mdi-dots-vertical"></v-btn>
+        </template>
+      </v-toolbar>
+    </v-img>
 
-        <v-card-text>
-          <div class="font-weight-bold ms-1 mb-2">
-            Today
-          </div>
+    <v-card-text>
+      <div class="font-weight-bold ms-1 mb-2">Today</div>
 
-          <v-timeline align="start" density="compact">
-            <v-timeline-item
-              v-for="message in messages"
-              :key="message.time"
-              :dot-color="message.color"
-              size="x-small"
-            >
-              <div class="mb-4">
-                <div class="font-weight-normal">
-                  <strong>{{ message.from }}</strong> @{{ message.time }}
-                </div>
-                <div>{{ message.message }}</div>
-              </div>
-            </v-timeline-item>
-          </v-timeline>
-        </v-card-text>
-      </v-card>
-    </v-row>
-  </v-container>
+      <v-timeline align="start" density="compact">
+        <v-timeline-item
+          v-for="message in messages"
+          :key="message.time"
+          :dot-color="message.color"
+          size="x-small"
+        >
+          <div class="mb-4">
+            <div class="font-weight-normal">
+              <strong>{{ message.from }}</strong> @{{ message.time }}
+            </div>
+
+            <div>{{ message.message }}</div>
+          </div>
+        </v-timeline-item>
+      </v-timeline>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/examples/v-card/misc-custom-actions.vue b/packages/docs/src/examples/v-card/misc-custom-actions.vue
index d123555dea4..85d7c4f1a31 100644
--- a/packages/docs/src/examples/v-card/misc-custom-actions.vue
+++ b/packages/docs/src/examples/v-card/misc-custom-actions.vue
@@ -20,10 +20,8 @@
     <v-card-actions>
       <v-btn
         color="orange-lighten-2"
-        variant="text"
-      >
-        Explore
-      </v-btn>
+        text="Explore"
+      ></v-btn>
 
       <v-spacer></v-spacer>
 
diff --git a/packages/docs/src/examples/v-card/misc-earnings-goal.vue b/packages/docs/src/examples/v-card/misc-earnings-goal.vue
new file mode 100644
index 00000000000..84297a0aed4
--- /dev/null
+++ b/packages/docs/src/examples/v-card/misc-earnings-goal.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-card class="mx-auto" max-width="500" border flat>
+    <v-list-item class="px-6" height="88">
+      <template v-slot:prepend>
+        <v-avatar color="surface-light" size="32">🎯</v-avatar>
+      </template>
+
+      <template v-slot:title> Set an earnings goal. </template>
+
+      <template v-slot:append>
+        <v-btn
+          class="text-none"
+          color="primary"
+          text="Create goal"
+          variant="text"
+          slim
+        ></v-btn>
+      </template>
+    </v-list-item>
+
+    <v-divider></v-divider>
+
+    <v-card-text class="text-medium-emphasis pa-6">
+      <div class="text-h6 mb-6">Earn my first $100</div>
+
+      <div class="text-h4 font-weight-black mb-4">0%</div>
+
+      <v-progress-linear
+        bg-color="surface-variant"
+        class="mb-6"
+        color="primary"
+        height="10"
+        model-value="2"
+        rounded="pill"
+      ></v-progress-linear>
+
+      <div>$0 of $100 earned — 7 days left</div>
+    </v-card-text>
+  </v-card>
+</template>
diff --git a/packages/docs/src/examples/v-card/misc-grids.vue b/packages/docs/src/examples/v-card/misc-grids.vue
index bb0ba2894e2..87b4c484f08 100644
--- a/packages/docs/src/examples/v-card/misc-grids.vue
+++ b/packages/docs/src/examples/v-card/misc-grids.vue
@@ -24,11 +24,23 @@
             <v-card-actions>
               <v-spacer></v-spacer>
 
-              <v-btn color="surface-variant" icon="mdi-heart" size="small" variant="text"></v-btn>
+              <v-btn
+                color="medium-emphasis"
+                icon="mdi-heart"
+                size="small"
+              ></v-btn>
 
-              <v-btn color="surface-variant" icon="mdi-bookmark" size="small" variant="text"></v-btn>
+              <v-btn
+                color="medium-emphasis"
+                icon="mdi-bookmark"
+                size="small"
+              ></v-btn>
 
-              <v-btn color="surface-variant" icon="mdi-share-variant" size="small" variant="text"></v-btn>
+              <v-btn
+                color="medium-emphasis"
+                icon="mdi-share-variant"
+                size="small"
+              ></v-btn>
             </v-card-actions>
           </v-card>
         </v-col>
diff --git a/packages/docs/src/examples/v-card/misc-horizontal-cards.vue b/packages/docs/src/examples/v-card/misc-horizontal-cards.vue
index 1a6ac87a8cc..05826f18a71 100644
--- a/packages/docs/src/examples/v-card/misc-horizontal-cards.vue
+++ b/packages/docs/src/examples/v-card/misc-horizontal-cards.vue
@@ -3,123 +3,109 @@
     class="mx-auto"
     max-width="400"
   >
-    <!-- <v-system-bar
-      color="pink darken-2"
-      dark
-    >
-      <v-spacer></v-spacer>
-
-      <v-icon>mdi-window-minimize</v-icon>
-
-      <v-icon>mdi-window-maximize</v-icon>
-
-      <v-icon>mdi-close</v-icon>
-    </v-system-bar>
-
-    <v-app-bar
-      dark
-      color="pink"
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-      <v-toolbar-title>My Music</v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-    </v-app-bar> -->
-
-    <v-container>
-      <v-row dense>
-        <v-col cols="12">
-          <v-card
-            color="#385F73"
-            theme="dark"
-          >
-            <v-card-title class="text-h5">
-              Unlimited music now
-            </v-card-title>
-
-            <v-card-subtitle>Listen to your favorite artists and albums whenever and wherever, online and offline.</v-card-subtitle>
-
-            <v-card-actions>
-              <v-btn variant="text">
-                Listen Now
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12">
-          <v-card
-            color="#1F7087"
-            theme="dark"
-          >
-            <div class="d-flex flex-no-wrap justify-space-between">
-              <div>
-                <v-card-title class="text-h5">
-                  Supermodel
-                </v-card-title>
+    <v-layout>
+      <v-system-bar color="pink-darken-2">
+        <v-spacer></v-spacer>
 
-                <v-card-subtitle>Foster the People</v-card-subtitle>
+        <v-icon>mdi-window-minimize</v-icon>
 
-                <v-card-actions>
-                  <v-btn
-                    class="ms-2"
-                    size="small"
-                    variant="outlined"
-                  >
-                    START RADIO
-                  </v-btn>
-                </v-card-actions>
-              </div>
-
-              <v-avatar
-                class="ma-3"
-                rounded="0"
-                size="125"
-              >
-                <v-img src="https://cdn.vuetifyjs.com/images/cards/foster.jpg"></v-img>
-              </v-avatar>
-            </div>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12">
-          <v-card
-            color="#952175"
-            theme="dark"
-          >
-            <div class="d-flex flex-no-wrap justify-space-between">
-              <div>
+        <v-icon>mdi-window-maximize</v-icon>
+
+        <v-icon>mdi-close</v-icon>
+      </v-system-bar>
+
+      <v-app-bar color="pink">
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+        <v-toolbar-title>My Music</v-toolbar-title>
+
+        <v-spacer></v-spacer>
+
+        <v-btn icon="mdi-magnify"></v-btn>
+      </v-app-bar>
+
+      <v-main>
+        <v-container>
+          <v-row dense>
+            <v-col cols="12">
+              <v-card color="#385F73">
                 <v-card-title class="text-h5">
-                  Halcyon Days
+                  Unlimited music now
                 </v-card-title>
 
-                <v-card-subtitle>Ellie Goulding</v-card-subtitle>
+                <v-card-subtitle>
+                  Listen to your favorite artists and albums whenever and wherever, online and offline.
+                </v-card-subtitle>
 
                 <v-card-actions>
-                  <v-btn
-                    class="ms-2"
-                    icon="mdi-play"
-                    variant="text"
-                  ></v-btn>
+                  <v-btn text="Listen Now" variant="text"></v-btn>
                 </v-card-actions>
-              </div>
-
-              <v-avatar
-                class="ma-3"
-                rounded="0"
-                size="125"
-              >
-                <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
-              </v-avatar>
-            </div>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
+              </v-card>
+            </v-col>
+
+            <v-col cols="12">
+              <v-card color="#1F7087">
+                <div class="d-flex flex-no-wrap justify-space-between">
+                  <div>
+                    <v-card-title class="text-h5">
+                      Supermodel
+                    </v-card-title>
+
+                    <v-card-subtitle>Foster the People</v-card-subtitle>
+
+                    <v-card-actions>
+                      <v-btn
+                        class="ms-2"
+                        size="small"
+                        text="START RADIO"
+                        variant="outlined"
+                      ></v-btn>
+                    </v-card-actions>
+                  </div>
+
+                  <v-avatar
+                    class="ma-3"
+                    rounded="0"
+                    size="125"
+                  >
+                    <v-img src="https://cdn.vuetifyjs.com/images/cards/foster.jpg"></v-img>
+                  </v-avatar>
+                </div>
+              </v-card>
+            </v-col>
+
+            <v-col cols="12">
+              <v-card color="#952175">
+                <div class="d-flex flex-no-wrap justify-space-between">
+                  <div>
+                    <v-card-title class="text-h5">
+                      Halcyon Days
+                    </v-card-title>
+
+                    <v-card-subtitle>Ellie Goulding</v-card-subtitle>
+
+                    <v-card-actions>
+                      <v-btn
+                        class="ms-2"
+                        icon="mdi-play"
+                        variant="text"
+                      ></v-btn>
+                    </v-card-actions>
+                  </div>
+
+                  <v-avatar
+                    class="ma-3"
+                    rounded="0"
+                    size="125"
+                  >
+                    <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
+                  </v-avatar>
+                </div>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-main>
+    </v-layout>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/misc-information-card.vue b/packages/docs/src/examples/v-card/misc-information-card.vue
index e667ac67d54..5938eeee7ae 100644
--- a/packages/docs/src/examples/v-card/misc-information-card.vue
+++ b/packages/docs/src/examples/v-card/misc-information-card.vue
@@ -5,22 +5,23 @@
   >
     <v-card-text>
       <div>Word of the Day</div>
-      <p class="text-h4 text--primary">
-        be•nev•o•lent
-      </p>
+
+      <p class="text-h4 font-weight-black">be•nev•o•lent</p>
+
       <p>adjective</p>
-      <div class="text--primary">
+
+      <div class="text-medium-emphasis">
         well meaning and kindly.<br>
         "a benevolent smile"
       </div>
     </v-card-text>
+
     <v-card-actions>
       <v-btn
         color="deep-purple-accent-4"
+        text="Learn More"
         variant="text"
-      >
-        Learn More
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/misc-media-with-text.vue b/packages/docs/src/examples/v-card/misc-media-with-text.vue
index 785cf596123..a6cd70db711 100644
--- a/packages/docs/src/examples/v-card/misc-media-with-text.vue
+++ b/packages/docs/src/examples/v-card/misc-media-with-text.vue
@@ -23,13 +23,9 @@
     </v-card-text>
 
     <v-card-actions>
-      <v-btn color="orange">
-        Share
-      </v-btn>
+      <v-btn color="orange" text="Share"></v-btn>
 
-      <v-btn color="orange">
-        Explore
-      </v-btn>
+      <v-btn color="orange" text="Explore"></v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/misc-shopify-funding.vue b/packages/docs/src/examples/v-card/misc-shopify-funding.vue
new file mode 100644
index 00000000000..0a4e999be97
--- /dev/null
+++ b/packages/docs/src/examples/v-card/misc-shopify-funding.vue
@@ -0,0 +1,65 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title class="text-overline">
+        Progress
+
+        <div class="text-green-darken-3 text-h3 font-weight-bold">90%</div>
+
+        <div class="text-h6 text-medium-emphasis font-weight-regular">
+          $2,938.00 remaining
+        </div>
+      </v-card-title>
+      <br>
+      <v-card-text>
+        <div
+          :style="`right: calc(${review} - 32px)`"
+          class="position-absolute mt-n8 text-caption text-green-darken-3"
+        >
+          Eligibility review
+        </div>
+        <v-progress-linear
+          color="green-darken-3"
+          height="22"
+          model-value="90"
+          rounded="lg"
+        >
+          <v-badge
+            :style="`right: ${review}`"
+            class="position-absolute"
+            color="white"
+            dot
+            inline
+          ></v-badge>
+        </v-progress-linear>
+
+        <div class="d-flex justify-space-between py-3">
+          <span class="text-green-darken-3 font-weight-medium">
+            $26,442.00 remitted
+          </span>
+
+          <span class="text-medium-emphasis"> $29,380.00 total </span>
+        </div>
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-list-item
+        append-icon="mdi-chevron-right"
+        lines="two"
+        subtitle="Details and agreement"
+        link
+      ></v-list-item>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+  const review = '30%'
+</script>
+
+<script>
+  export default {
+    data: () => ({ review: '30%' }),
+  }
+</script>
diff --git a/packages/docs/src/examples/v-card/misc-twitter-card.vue b/packages/docs/src/examples/v-card/misc-twitter-card.vue
index 778c07b43c2..c4c60f13662 100644
--- a/packages/docs/src/examples/v-card/misc-twitter-card.vue
+++ b/packages/docs/src/examples/v-card/misc-twitter-card.vue
@@ -1,10 +1,9 @@
 <template>
   <v-card
-    class="mx-auto"
+    class="mx-auto text-white"
     color="#26c6da"
     max-width="400"
     prepend-icon="mdi-twitter"
-    theme="dark"
     title="Twitter"
   >
     <template v-slot:prepend>
diff --git a/packages/docs/src/examples/v-card/misc-weather-card.vue b/packages/docs/src/examples/v-card/misc-weather-card.vue
index ea6bd7876d2..63160636a91 100644
--- a/packages/docs/src/examples/v-card/misc-weather-card.vue
+++ b/packages/docs/src/examples/v-card/misc-weather-card.vue
@@ -84,9 +84,10 @@
     <v-divider></v-divider>
 
     <v-card-actions>
-      <v-btn @click="expand = !expand">
-        {{ !expand ? 'Full Report' : 'Hide Report' }}
-      </v-btn>
+      <v-btn
+        :text="!expand ? 'Full Report' : 'Hide Report'"
+        @click="expand = !expand"
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-color.vue b/packages/docs/src/examples/v-card/prop-color.vue
index fda234e6a58..eaf8f29e8e9 100644
--- a/packages/docs/src/examples/v-card/prop-color.vue
+++ b/packages/docs/src/examples/v-card/prop-color.vue
@@ -1,69 +1,68 @@
 <template>
-  <v-container>
-    <v-row align="center" justify="center">
-      <v-col
-        cols="auto"
+  <v-row justify="center">
+    <v-col cols="auto">
+      <v-radio-group
+        v-model="color"
+        hide-details
+        inline
       >
-        <v-radio-group
-          v-model="color"
-          inline
-        >
-          <v-radio
-            color="indigo"
-            label="indigo"
-            value="indigo"
-          ></v-radio>
-          <v-radio
-            color="indigo-darken-3"
-            label="indigo-darken-3"
-            value="indigo-darken-3"
-          ></v-radio>
-          <v-radio
-            color="primary"
-            label="primary"
-            value="primary"
-          ></v-radio>
-          <v-radio
-            color="secondary"
-            label="secondary"
-            value="secondary"
-          ></v-radio>
-        </v-radio-group>
-      </v-col>
-    </v-row>
-    <v-row align="center" justify="center">
-      <v-col
-        v-for="(variant, i) in variants"
-        :key="i"
-        cols="auto"
+        <v-radio
+          color="indigo"
+          label="indigo"
+          value="indigo"
+        ></v-radio>
+
+        <v-radio
+          color="indigo-darken-3"
+          label="indigo-darken-3"
+          value="indigo-darken-3"
+        ></v-radio>
+
+        <v-radio
+          color="primary"
+          label="primary"
+          value="primary"
+        ></v-radio>
+
+        <v-radio
+          color="secondary"
+          label="secondary"
+          value="secondary"
+        ></v-radio>
+      </v-radio-group>
+    </v-col>
+
+    <v-col
+      v-for="(variant, i) in variants"
+      :key="i"
+      cols="12"
+      md="6"
+    >
+      <v-card
+        :color="color"
+        :variant="variant"
+        class="mx-auto"
       >
-        <v-card
-          :color="color"
-          :variant="variant"
-          class="mx-auto"
-          max-width="344"
-        >
-          <v-card-item>
-            <div>
-              <div class="text-overline mb-1">
-                {{ variant }}
-              </div>
-              <div class="text-h6 mb-1">
-                Headline
-              </div>
-              <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
+        <v-card-item>
+          <div>
+            <div class="text-overline mb-1">
+              {{ variant }}
+            </div>
+            <div class="text-h6 mb-1">
+              Headline
             </div>
-          </v-card-item>
+            <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
+          </div>
+        </v-card-item>
 
-          <v-card-actions>
-            <v-btn>
-              Button
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+        <v-card-actions>
+          <v-btn>
+            Button
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/examples/v-card/prop-disabled.vue b/packages/docs/src/examples/v-card/prop-disabled.vue
index b0190c2ffee..dd9ea7676dd 100644
--- a/packages/docs/src/examples/v-card/prop-disabled.vue
+++ b/packages/docs/src/examples/v-card/prop-disabled.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="mx-auto my-8"
+    class="mx-auto"
     max-width="344"
     subtitle="The card stays disabled"
     title="Disabled card"
diff --git a/packages/docs/src/examples/v-card/prop-elevated.vue b/packages/docs/src/examples/v-card/prop-elevated.vue
index 820c2e05d72..692a5ff7929 100644
--- a/packages/docs/src/examples/v-card/prop-elevated.vue
+++ b/packages/docs/src/examples/v-card/prop-elevated.vue
@@ -9,16 +9,18 @@
         <div class="text-overline mb-1">
           OVERLINE
         </div>
+
         <div class="text-h6 mb-1">
           Headline
         </div>
+
         <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
       </div>
     </v-card-item>
 
     <v-card-actions>
-      <v-btn variant="outlined">
-        Button
+      <v-btn text="Button" variant="outlined">
+
       </v-btn>
     </v-card-actions>
   </v-card>
diff --git a/packages/docs/src/examples/v-card/prop-elevation.vue b/packages/docs/src/examples/v-card/prop-elevation.vue
index b866f60c393..462c67f29cc 100644
--- a/packages/docs/src/examples/v-card/prop-elevation.vue
+++ b/packages/docs/src/examples/v-card/prop-elevation.vue
@@ -8,6 +8,7 @@
       <v-card-title>
         Card title
       </v-card-title>
+
       <v-card-subtitle>
         Card subtitle secondary text
       </v-card-subtitle>
diff --git a/packages/docs/src/examples/v-card/prop-hover.vue b/packages/docs/src/examples/v-card/prop-hover.vue
index a0dde483ea3..28df1a93f6a 100644
--- a/packages/docs/src/examples/v-card/prop-hover.vue
+++ b/packages/docs/src/examples/v-card/prop-hover.vue
@@ -8,6 +8,7 @@
       <v-card-title>
         Card title
       </v-card-title>
+
       <v-card-subtitle>
         Card subtitle secondary text
       </v-card-subtitle>
diff --git a/packages/docs/src/examples/v-card/prop-href.vue b/packages/docs/src/examples/v-card/prop-href.vue
index 286b9130c6f..e2cf71dc604 100644
--- a/packages/docs/src/examples/v-card/prop-href.vue
+++ b/packages/docs/src/examples/v-card/prop-href.vue
@@ -1,11 +1,12 @@
 <template>
   <v-card
     append-icon="mdi-open-in-new"
-    class="mx-auto my-8"
+    class="mx-auto"
     href="https://github.com/vuetifyjs/vuetify/"
     max-width="344"
     prepend-icon="mdi-github"
     rel="noopener"
+    subtitle="Check out the official repository"
     target="_blank"
     title="Vuetify on GitHub"
   ></v-card>
diff --git a/packages/docs/src/examples/v-card/prop-image.vue b/packages/docs/src/examples/v-card/prop-image.vue
index b93eb54f9c3..2c9b946c2a6 100644
--- a/packages/docs/src/examples/v-card/prop-image.vue
+++ b/packages/docs/src/examples/v-card/prop-image.vue
@@ -1,10 +1,20 @@
 <template>
   <v-card
     class="mx-auto"
-    height="200"
-    image="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
-    max-width="200"
-    theme="dark"
-    title="Card title"
-  ></v-card>
+    color="surface-variant"
+    image="https://cdn.vuetifyjs.com/docs/images/cards/dark-beach.jpg"
+    max-width="340"
+    subtitle="Take a walk down the beach"
+    title="Evening sunset"
+  >
+    <template v-slot:actions>
+      <v-btn
+        append-icon="mdi-chevron-right"
+        color="red-lighten-2"
+        text="Book Activity"
+        variant="outlined"
+        block
+      ></v-btn>
+    </template>
+  </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-link.vue b/packages/docs/src/examples/v-card/prop-link.vue
index 49bfce75cdc..47bc9ada860 100644
--- a/packages/docs/src/examples/v-card/prop-link.vue
+++ b/packages/docs/src/examples/v-card/prop-link.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="mx-auto my-8"
+    class="mx-auto"
     max-width="344"
     subtitle="Same looks, no anchor"
     title="Hover and click me"
diff --git a/packages/docs/src/examples/v-card/prop-loading.vue b/packages/docs/src/examples/v-card/prop-loading.vue
index 1ea7075c493..d21fa0387ff 100644
--- a/packages/docs/src/examples/v-card/prop-loading.vue
+++ b/packages/docs/src/examples/v-card/prop-loading.vue
@@ -1,5 +1,6 @@
 <template>
   <v-card
+    :disabled="loading"
     :loading="loading"
     class="mx-auto my-12"
     max-width="374"
@@ -63,8 +64,8 @@
 
     <v-card-title>Tonight's availability</v-card-title>
 
-    <div class="px-4">
-      <v-chip-group v-model="selection">
+    <div class="px-4 mb-2">
+      <v-chip-group v-model="selection" selected-class="bg-deep-purple-lighten-2">
         <v-chip>5:30PM</v-chip>
 
         <v-chip>7:30PM</v-chip>
@@ -78,11 +79,11 @@
     <v-card-actions>
       <v-btn
         color="deep-purple-lighten-2"
-        variant="text"
+        text="Reserve"
+        block
+        border
         @click="reserve"
-      >
-        Reserve
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-outlined.vue b/packages/docs/src/examples/v-card/prop-outlined.vue
index 96d607d2f7a..11d113e61fe 100644
--- a/packages/docs/src/examples/v-card/prop-outlined.vue
+++ b/packages/docs/src/examples/v-card/prop-outlined.vue
@@ -9,17 +9,17 @@
         <div class="text-overline mb-1">
           OVERLINE
         </div>
+
         <div class="text-h6 mb-1">
           Headline
         </div>
+
         <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
       </div>
     </v-card-item>
 
     <v-card-actions>
-      <v-btn variant="outlined">
-        Button
-      </v-btn>
+      <v-btn text="Button" variant="outlined"></v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-variant.vue b/packages/docs/src/examples/v-card/prop-variant.vue
index ee36af1a01e..eacd275296f 100644
--- a/packages/docs/src/examples/v-card/prop-variant.vue
+++ b/packages/docs/src/examples/v-card/prop-variant.vue
@@ -1,39 +1,36 @@
 <template>
-  <v-container>
-    <v-row align="center" justify="center">
-      <v-col
-        v-for="(variant, i) in variants"
-        :key="i"
-        cols="auto"
+  <v-row dense>
+    <v-col
+      v-for="(variant, i) in variants"
+      :key="i"
+      cols="12"
+      md="4"
+    >
+      <v-card
+        :variant="variant"
+        class="mx-auto"
+        color="surface-variant"
+        subtitle="Greyhound divisely hello coldly fonwderfully"
+        title="Headline"
       >
-        <v-card
-          :variant="variant"
-          class="mx-auto"
-          max-width="344"
-        >
-          <v-card-item>
-            <div>
-              <div class="text-overline mb-1">
-                {{ variant }}
-              </div>
-              <div class="text-h6 mb-1">
-                Headline
-              </div>
-              <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
-            </div>
-          </v-card-item>
+        <template v-slot:actions>
+          <v-btn text="Button"></v-btn>
+        </template>
+      </v-card>
 
-          <v-card-actions>
-            <v-btn>
-              Button
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+      <div class="text-center text-caption">{{ variant }}</div>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
-  const variants = ['elevated', 'flat', 'tonal', 'outlined']
+  const variants = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain']
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      variants: ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'],
+    }),
+  }
 </script>
diff --git a/packages/docs/src/examples/v-card/slot-prepend-append.vue b/packages/docs/src/examples/v-card/slot-prepend-append.vue
index 6f006073e6c..934dcce27ad 100644
--- a/packages/docs/src/examples/v-card/slot-prepend-append.vue
+++ b/packages/docs/src/examples/v-card/slot-prepend-append.vue
@@ -1,10 +1,9 @@
 <template>
-  <v-row align="center" justify="center">
-    <v-col cols="auto">
+  <v-row align="center" justify="center" dense>
+    <v-col cols="12" md="6">
       <v-card
         append-icon="mdi-check"
         class="mx-auto"
-        max-width="344"
         prepend-icon="mdi-account"
         subtitle="prepend-icon and append-icon"
         title="Icons"
@@ -13,10 +12,9 @@
       </v-card>
     </v-col>
 
-    <v-col cols="auto">
+    <v-col cols="12" md="6">
       <v-card
         class="mx-auto"
-        max-width="344"
         subtitle="prepend and append"
         title="Icons"
       >
@@ -30,11 +28,10 @@
       </v-card>
     </v-col>
 
-    <v-col cols="auto">
+    <v-col cols="12" md="6">
       <v-card
         append-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
         class="mx-auto"
-        max-width="344"
         prepend-avatar="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
         subtitle="prepend-avatar and append-avatar"
         title="Avatars"
@@ -43,10 +40,9 @@
       </v-card>
     </v-col>
 
-    <v-col cols="auto">
+    <v-col cols="12" md="6">
       <v-card
         class="mx-auto"
-        max-width="344"
         subtitle="prepend and append"
         title="Avatars"
       >
diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md
index 79a90c5ebe5..148ebd52d76 100644
--- a/packages/docs/src/pages/en/components/cards.md
+++ b/packages/docs/src/pages/en/components/cards.md
@@ -24,14 +24,14 @@ features:
 
 <PageFeatures />
 
+<VoPromotionsCardVuetify />
+
 ## Usage
 
 The `v-card` component is a stylish way to wrap different types of content; such as tables, images, or user actions.
 
 <ExamplesUsage name="v-card" />
 
-<PromotedEntry />
-
 ## API
 
 | Component | Description |
@@ -43,6 +43,8 @@ The `v-card` component is a stylish way to wrap different types of content; such
 | [v-card-text](/api/v-card-text/) | Sub-component used to display the Card's text. Wraps the `#text` slot. |
 | [v-card-actions](/api/v-card-actions/) | Sub-component that modifies the default styling of [v-btn](/components/buttons/). Wraps the `#actions` slot |
 
+<ApiInline hide-links />
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-card` is:
@@ -61,34 +63,34 @@ The recommended placement of elements inside of `v-card` is:
 | 4. Text (optional) | A content area with a lower emphasis text color |
 | 5. Actions (optional) | A content area that typically contains one or more [v-btn](/components/buttons) components |
 
-<ApiInline hide-links />
+## Guide
+
+The `v-card` component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions. It is a content container that is the most common way to present information.
 
-## Basics
+### Basics
 
 There are three ways you can populate a `v-card` with content. The first one is by using props, the second one is by slots, and the third one is by manually using the `v-card-*` components.
 
 <ExamplesExample file="v-card/basics-content" />
 
-Props give you an easy interface to display text-only content. They can also be used to easily render images and icons.
+Props give you an easy interface to display text-only content. They can also be used to easily render images and icons. Use slots if you need to render more complex content. If you need full control over the content, use markup.
 
-Use slots if you need to render more complex content. If you need full control over the content, use markup.
+### Combined
 
 In some cases it is possible to combine the different options, like the example below where props, slots and markup have all been used.
 
-::: info
-  In general slots take precedence over props. So if you provide both **text** prop and use **text** slot, then only the slot content will be rendered.
-:::
-
 <ExamplesExample file="v-card/basics-combine" />
 
-### Content overflow
+::: info
 
-`v-card` does not allow its content to overflow outside the card by default. It also establishes a z-index stacking context, which prevents its content from displaying on top of elements outside the `v-card`, even when it sets a higher z-index value. To override this default behavior, apply the following usage: `<v-card style="overflow: initial; z-index: initial">`.
+In general slots take precedence over props. So if you provide both **text** prop and use **text** slot, then only the slot content will be rendered.
 
-## Examples
+:::
 
 ### Props
 
+The `v-card` component has a variety of props that allow you to customize its appearance and behavior.
+
 #### Variants
 
 The **variant** prop gives you easy access to several different card styles. Available variants are: **elevated**(default), **flat**, **tonal**, **outlined**, **text**, and **plain**.
@@ -104,6 +106,8 @@ The **variant** prop gives you easy access to several different card styles. Ava
 
 <ExamplesExample file="v-card/prop-variant" />
 
+<VoPromotionsCardVuetify />
+
 #### Color
 
 Cards can be colored by using any of the builtin colors and contextual names using the **color** prop.
@@ -146,6 +150,12 @@ Apply a specific background image to the Card.
 
 <ExamplesExample file="v-card/prop-image" />
 
+::: tip
+
+`v-card` does not allow its content to overflow outside the card by default. It also establishes a z-index stacking context, which prevents its content from displaying on top of elements outside the `v-card`, even when it sets a higher z-index value. To override this default behavior, apply the following usage: `<v-card style="overflow: initial; z-index: initial">`.
+
+:::
+
 ### Slots
 
 The `v-card` component provides slots that enable you to customize content created by its props or to add additional content.
@@ -158,64 +168,80 @@ You can use the **prepend-avatar**, **append-avatar**, **prepend-icon** and **ap
 
 <ExamplesExample file="v-card/slot-prepend-append" />
 
-### Misc
+## Examples
+
+The following are a collection of examples that demonstrate more advanced and real world use of the `v-card` component.
 
-#### Card Reveal
+### Card Reveal
 
 Using [v-expand-transition](/api/v-expand-transition/) and a `@click` event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed.
 
 <ExamplesExample file="v-card/misc-card-reveal" />
 
-#### Content wrapping
+### Content wrapping
 
 The `v-card` component is useful for wrapping content.
 
 <ExamplesExample file="v-card/misc-content-wrapping" />
 
-#### Custom actions
+### Custom actions
 
 With a simple conditional, you can easily add supplementary text that is hidden until opened.
 
 <ExamplesExample file="v-card/misc-custom-actions" />
 
-#### Grids
+<VoPromotionsCardVuetify />
+
+### Grids
 
 Using [grids](/components/grids/), you can create beautiful layouts.
 
 <ExamplesExample file="v-card/misc-grids" />
 
-#### Horizontal cards
+### Horizontal cards
 
 You can also play with the card layout using [layout flex](/styles/flex/).
 
 <ExamplesExample file="v-card/misc-horizontal-cards" />
 
-#### Information card
+### Information card
 
 Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.
 
 <ExamplesExample file="v-card/misc-information-card" />
 
-#### Media with text
+### Media with text
 
 Using the layout system, we can add custom text anywhere within the background.
 
 <ExamplesExample file="v-card/misc-media-with-text" />
 
-#### Twitter card
+### Twitter card
 
 The `v-card` component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the `v-card-title`, `v-card-text` and `v-card-actions` components.
 
 <ExamplesExample file="v-card/misc-twitter-card" />
 
-#### Weather card
+### Weather card
 
 Using [v-list-items](/components/lists) and a [v-slider](/components/sliders), we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.
 
 <ExamplesExample file="v-card/misc-weather-card" />
 
-#### Loading
+### Loading
 
 Use an indeterminate [v-progress-linear](/components/progress-linear) to indicate a loading state.
 
 <ExamplesExample file="v-card/prop-loading" />
+
+### Earnings goal
+
+This example utilizes slots to customize the appearance of the different content areas.
+
+<ExamplesExample file="v-card/misc-earnings-goal" />
+
+### Funding card
+
+Utilize a combination of Card properties and utility classes to create a unique funding card.
+
+<ExamplesExample file="v-card/misc-shopify-funding" />