LITE-31805: Update card widget styles to match the specification

Author: arnaugiralt

components/src/stories/Card.stories.js

@@ -22,12 +22,9 @@ export const Component = {
     },
     template: `
     <ui-card v-bind="args" style="width: 400px">
-      <div slot="default">
+      <div>
         {{ args.content }}
       </div>
-      <div slot="actions">
-        <button>Action!</button>
-      </div>
     </ui-card>`,
   }),
 
@@ -37,3 +34,27 @@ export const Component = {
     content: 'Card Content',
   },
 };
+
+export const ComponentWithAllSlots = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `
+      <ui-card v-bind="args" style="width: 400px">
+        <div>
+          {{ args.content }}
+        </div>
+        <a slot="title" style="" href="#">Custom title, link</a>
+        <p slot="subtitle">My <span style="font-weight:bold">custom</span> subtitle :)</p>
+        <div slot="actions">
+          <button>Action!</button>
+        </div>
+      </ui-card>`,
+  }),
+
+  args: {
+    title: 'Card title',
+    content: 'Card Content',
+  },
+};

components/src/widgets/card/widget.vue

@@ -2,18 +2,16 @@
   <div class="c-card">
     <div class="c-card__header">
       <div class="c-card__title-container">
-        <p
-          v-if="title"
-          class="c-card__title"
-        >
-          {{ title }}
-        </p>
-        <p
-          v-if="subtitle"
-          class="c-card__subtitle"
-        >
-          {{ subtitle }}
-        </p>
+        <div class="c-card__title">
+          <slot name="title">
+            <p v-if="title">{{ title }}</p>
+          </slot>
+        </div>
+        <div class="c-card__subtitle">
+          <slot name="subtitle">
+            <p v-if="subtitle">{{ subtitle }}</p>
+          </slot>
+        </div>
       </div>
       <div class="c-card__actions">
         <slot name="actions" />
@@ -53,26 +51,38 @@ export default {
   text-decoration: inherit;
   color: inherit;
 
-  &__header{
+  &__header {
     display: flex;
-    margin-bottom: 26px;
+    margin-bottom: 24px;
     align-items: start;
     flex-grow: 1;
     justify-content: space-between;
   }
 
   &__title {
-    line-height: 25px;
-    font-size: 20px;
+    line-height: 24px;
+    font-size: 18px;
+    font-weight: 500;
     margin: 0;
+
+    p,
+    & ::slotted(p) {
+      margin: 0;
+    }
   }
 
   &__subtitle {
+    margin-top: 8px;
     font-size: 14px;
+    font-weight: 400;
     line-height: 20px;
     color: #707070;
-    margin: 0;
     white-space: pre-wrap;
+
+    p,
+    & ::slotted(p) {
+      margin: 0;
+    }
   }
 
   &__title-container {