[uikit] Document Cards component

Bypass-Check-License: Parent CL moving files
Bug: 464124169
Change-Id: I62c50305d735039e98d4c0b25013d053f7146fc1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7207119
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

docs/styleguide/ux/components.md

@@ -123,19 +123,10 @@ button.addEventListener('click', event => onClick(event));
 
 ### Resources
 
-#### For developers
-
-##### Implementation
-
   * [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
-
-#### For designers
-
-##### Figma
-
-  * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
+  * [Buttons Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
   * [Icon
-    buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
+    buttons Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
 
 ## Combo Boxes and Single Select menus
 
@@ -568,3 +559,53 @@ UI.ContextMenu.registerItem({
 ```
 
 This will automatically add the "Open file" action to the context menu that appears when clicking the Elements panel's 3-dot button.
+
+
+## Cards
+
+![Card component](images/cards.png)
+
+### Usage
+
+#### Developer guidelines
+
+###### Basic card with heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card heading="Simple card">
+  <div class="content">This is a simple card.</div>
+</devtools-card>`
+```
+
+###### Card without a heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card>
+  <div class="content">This is a card without a heading.</div>
+</devtools-card>`
+```
+
+###### Card with rich heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card heading="Card with rich heading">
+  <span slot="heading-prefix">Slotted heading prefix</span>
+  <span slot="heading-suffix">Slotted heading suffix</span>
+  <div class="content">This is a card with a rich heading.</div>
+</devtools-card>`
+```
+
+### Resources
+
+*   [`devtools-card`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/cards/Card.ts)
+* [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/)
+
+* [Cards Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=3456-939)
+
+* [Greenlines](go/chrome-devtools:cards-greenlines)

docs/styleguide/ux/images/cards.png

@@ -57,7 +57,10 @@ devtools_ui_module("unittests") {
 }
 
 component_doc("docs") {
-  sources = [ "icons/Icon.docs.ts" ]
+  sources = [
+    "cards/Card.docs.ts",
+    "icons/Icon.docs.ts",
+  ]
   deps = [
     ":bundle",
     "../lit:bundle",

front_end/ui/kit/BUILD.gn

@@ -0,0 +1,43 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../kit.js';
+
+import * as Lit from '../../lit/lit.js';
+
+const {html} = Lit;
+
+export function render(container: HTMLElement): void {
+  Lit.render(
+      html`
+        <style>
+          devtools-card {
+            margin: 1em;
+          }
+          .content {
+            padding: 1em;
+          }
+          span {
+            align-self: center;
+          }
+        </style>
+        <h2>Basic card with heading</h2>
+        <devtools-card heading="Simple card">
+          <div class="content">This is a simple card.</div>
+        </devtools-card>
+
+        <h2>Card without a heading</h2>
+        <devtools-card>
+          <div class="content">This is a card without a heading.</div>
+        </devtools-card>
+
+        <h2>Card with rich heading</h2>
+        <devtools-card heading="Card with rich heading">
+          <span slot="heading-prefix">Slotted heading prefix</span>
+          <span slot="heading-suffix">Slotted heading suffix</span>
+          <div class="content">This is a card with a rich heading.</div>
+        </devtools-card>
+        `,
+      container);
+}