From b2bc303a3986c0d802fd3a0c2da3ad53c7642657 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 11 May 2020 14:49:35 +0300
Subject: [PATCH] Card update

---
 public/themes/luna-amber/theme.css      | 5 +++++
 public/themes/luna-green/theme.css      | 5 +++++
 public/themes/luna-pink/theme.css       | 5 +++++
 public/themes/nova-colored/theme.css    | 5 +++++
 public/themes/nova-dark/theme.css       | 5 +++++
 public/themes/nova-light/theme.css      | 5 +++++
 public/themes/nova-vue/theme.css        | 5 +++++
 public/themes/rhea/theme.css            | 5 +++++
 public/themes/saga-blue/theme.css       | 9 +++++++--
 public/themes/saga-cyan/theme.css       | 9 +++++++--
 public/themes/saga-deeppurple/theme.css | 9 +++++++--
 public/themes/saga-green/theme.css      | 9 +++++++--
 public/themes/saga-indigo/theme.css     | 9 +++++++--
 public/themes/saga-orange/theme.css     | 9 +++++++--
 public/themes/saga-purple/theme.css     | 9 +++++++--
 public/themes/saga-teal/theme.css       | 9 +++++++--
 public/themes/vela-blue/theme.css       | 5 +++++
 public/themes/vela-cyan/theme.css       | 5 +++++
 public/themes/vela-deeppurple/theme.css | 5 +++++
 public/themes/vela-green/theme.css      | 5 +++++
 public/themes/vela-indigo/theme.css     | 5 +++++
 public/themes/vela-orange/theme.css     | 5 +++++
 public/themes/vela-purple/theme.css     | 5 +++++
 public/themes/vela-teal/theme.css       | 5 +++++
 src/views/card/CardDemo.vue             | 3 +++
 src/views/card/CardDoc.vue              | 3 +++
 26 files changed, 142 insertions(+), 16 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 814ab055c..d78cb5120 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2093,6 +2093,7 @@
   background: #323232;
   color: #dedede;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #888888;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index a1fb95745..3b19a1a99 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2093,6 +2093,7 @@
   background: #323232;
   color: #dedede;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #888888;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 93b21f491..3e6fa4446 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2093,6 +2093,7 @@
   background: #323232;
   color: #dedede;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #888888;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 7cd2c4bc3..2867bfebe 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -2093,6 +2093,7 @@
   background: #ffffff;
   color: #333333;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #848484;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 2c9514bc1..279de6cfc 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -2093,6 +2093,7 @@
   background: #ffffff;
   color: #333333;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #848484;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 9a0f0cf14..d8230c9d3 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -2093,6 +2093,7 @@
   background: #ffffff;
   color: #333333;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #848484;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index d35090052..483035e99 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2093,6 +2093,7 @@
   background: #ffffff;
   color: #333333;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #848484;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 1a326a93d..9535535bf 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2093,6 +2093,7 @@
   background: #ffffff;
   color: #666666;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2105,6 +2106,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #a6a6a6;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 9df2aec9e..2bb4d520b 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index df9cea4ba..6db37ce29 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index eac374dc9..4e765e602 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 133c63624..fe61f33ec 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 44c28ad1c..1d8778721 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 74315ace7..abd0182f9 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index a594abe76..c9819590b 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index bdf54644c..d034b8229 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -2109,7 +2109,8 @@
 .p-card {
   background: #ffffff;
   color: #495057;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2120,8 +2121,12 @@
   margin-bottom: 0.5rem;
 }
 .p-card .p-card-subtitle {
-  font-weight: 700;
+  font-weight: 400;
   margin-bottom: 0.5rem;
+  color: #6c757d;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b81ebbf4f..3bdd34ed9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 6896cf51e..3d86a563a 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index dc9b14b02..c7e611234 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 1f27a5cde..f7618448d 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index 1421b8cd2..8a80e40e2 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index af484393a..6c8097466 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index eb9645531..067ff49c1 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index 676d552a4..2d44de206 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -2110,6 +2110,7 @@
   background: #1C2833;
   color: #ebedef;
   box-shadow: none;
+  border-radius: 3px;
 }
 .p-card .p-card-body {
   padding: 1rem;
@@ -2122,6 +2123,10 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
+  color: #AEB6BF;
+}
+.p-card .p-card-content {
+  padding: 1rem 0;
 }
 .p-card .p-card-footer {
   padding: 1rem 0 0 0;
diff --git a/src/views/card/CardDemo.vue b/src/views/card/CardDemo.vue
index a8e9416b4..43d536474 100755
--- a/src/views/card/CardDemo.vue
+++ b/src/views/card/CardDemo.vue
@@ -25,6 +25,9 @@
                 <template slot="title">
                     Advanced Card
                 </template>
+                <template slot="subtitle">
+                    Card subtitle
+                </template>
                 <template slot="content">
                     <p>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 quas!</p>
diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index e6ffca2ad..285079e54 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -98,6 +98,9 @@ import Card from 'primevue/card';
     &lt;template slot="title"&gt;
         Advanced Card
     &lt;/template&gt;
+    &lt;template slot="subtitle"&gt;
+        Card subtitle
+    &lt;/template&gt;
     &lt;template slot="content"&gt;
         &lt;p&gt;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 quas!&lt;/p&gt;