From 2c3cd4b07aebba6df83c2ae30c512f33ca820488 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Wed, 10 Sep 2025 09:56:52 -0500
Subject: [PATCH] added jsDoc and updated example

---
 packages/webawesome/docs/docs/components/card.md | 3 +++
 packages/webawesome/src/components/card/card.ts  | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index 2c84a3f1f..a79a4e368 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -55,6 +55,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 <wa-card class="card-header">
   <h3 slot="header">Header Title</h3>
   This card has a header. You can put all sorts of things in it!
+  <wa-button appearance="plain" slot="header-actions">
+    <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
+  </wa-button>
 </wa-card>
 
 <style>
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 3a9f0498f..2eabca454 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -16,6 +16,8 @@ import styles from './card.css';
  * @slot footer - An optional footer for the card.
  * @slot media - An optional media section to render at the start of the card.
  * @slot actions - An optional actions section to render at the end for the horizontal card.
+ * @slot header-actions - An optional actions section to render in the header of the vertical card.
+ * @slot footer-actions - An optional actions section to render in the footer of the vertical card.
  *
  * @csspart media - The container that wraps the card's media.
  * @csspart header - The container that wraps the card's header.