ui/cards: implement card titles (heading)

apps/client/src/widgets/react/Card.css

@@ -6,6 +6,14 @@
     --card-nested-section-indent: 30px;
 }
 
+.tn-card-heading {
+    margin-bottom: 10px;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .4pt;
+    text-transform: uppercase;
+}
+
 .tn-card {
     display: flex;
     flex-direction: column;

apps/client/src/widgets/react/Card.tsx

@@ -6,12 +6,16 @@ import clsx from "clsx";
 
 interface CardProps {
     className?: string;
+    heading?: string;
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <div className={clsx(["tn-card", props.className])}>
-        {props.children}
-    </div>;
+    return <>
+        {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
+        <div className={clsx(["tn-card", props.className])}>
+            {props.children}
+        </div>
+    </>;
 }
 
 interface CardSectionProps {