From 4ee9d45dfc4fdc869dc69f45dc865de16f5db368 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 20:06:01 +0200
Subject: [PATCH] ui/cards: implement card titles (heading)

---
 apps/client/src/widgets/react/Card.css |  8 ++++++++
 apps/client/src/widgets/react/Card.tsx | 10 +++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index ce6bf6dc61..5bbe0f6ab4 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/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;
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 7296433bf7..3a805ff731 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/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 {