diff --git a/playwright/e2e/dashboards-demo/dashboard.spec.ts b/playwright/e2e/dashboards-demo/dashboard.spec.ts
index cc248a3c93..57e7e1ebf9 100644
--- a/playwright/e2e/dashboards-demo/dashboard.spec.ts
+++ b/playwright/e2e/dashboards-demo/dashboard.spec.ts
@@ -147,7 +147,7 @@ test.describe('dashboard', () => {
     await expect(page.getByLabel('Edit')).toBeVisible();
     const editBtn = page.getByLabel('Edit');
     await editBtn.click();
-    const pieChart = page.getByText('Pie Chart', { exact: true }).locator('..');
+    const pieChart = page.locator('si-dashboard-card').filter({ hasText: 'Pie Chart' });
     await pieChart.getByLabel('Remove').click();
     await page.waitForTimeout(100);
     await expect(page.locator('si-delete-confirmation-dialog')).toBeVisible();
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-dark-linux.png
index 836d077f64..f34134732b 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c5593e79383d437b0e636fbc5f6fac988642ec56f0d23040eaa78a85ed59cc72
-size 9743
+oid sha256:7e55f1bd21abcacd61a99908bcfe1401b2665a6ce832231c2d3630b3e30e8f60
+size 12152
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-light-linux.png
index c579452f43..d65090625e 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5ee5c230ffc0fb39bc8c8b1c7b2b080d8223728dfbd556cc96691beee44196ae
-size 9105
+oid sha256:d5a2a5bd843fdc24c722104777eca1e6141f11a5eafba7d298f3cf836ad19a04
+size 11506
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card.yaml
index 2067aa051e..09e1bec1c0 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/si-dashboard--si-dashboard-card.yaml
@@ -1,4 +1,4 @@
-- text: Natural Gas Usage
+- text: Natural Gas Usage Shows the usage of natural gas
 - button "Toggle"
 - paragraph: Some quick example text to build on the card title and make up the bulk of the card's content.
 - button "Expand"
diff --git a/projects/element-ng/dashboard/si-dashboard-card.component.html b/projects/element-ng/dashboard/si-dashboard-card.component.html
index 6bb395a3f7..248b803094 100644
--- a/projects/element-ng/dashboard/si-dashboard-card.component.html
+++ b/projects/element-ng/dashboard/si-dashboard-card.component.html
@@ -12,9 +12,16 @@
   @if (heading() || displayContentActionBar()) {
     <div class="card-header d-flex justify-content-between">
       <ng-content #cardHeaderIcon select="[headerIcon]" />
-      @if (heading()) {
-        <div class="text-truncate">{{ heading() | translate }}</div>
-      }
+      <div class="heading">
+        @if (heading()) {
+          <div class="text-truncate si-h5">{{ heading() | translate }}</div>
+        }
+        @if (subHeading()) {
+          <div class="text-truncate si-body text-secondary pt-2">{{
+            subHeading() | translate
+          }}</div>
+        }
+      </div>
 
       <div class="cab d-flex ms-6 my-n4 me-n5">
         @if (displayContentActionBar()) {
diff --git a/projects/element-ng/dashboard/si-dashboard-card.component.scss b/projects/element-ng/dashboard/si-dashboard-card.component.scss
index fc20740a77..e59be36638 100644
--- a/projects/element-ng/dashboard/si-dashboard-card.component.scss
+++ b/projects/element-ng/dashboard/si-dashboard-card.component.scss
@@ -16,14 +16,16 @@
   }
 }
 
-.card-header {
-  block-size: map.get(variables.$spacers, 9) + map.get(variables.$spacers, 4); // need to reduce height due to content action button
-}
-
 .text-truncate {
   flex: 0 1 auto;
 }
 
+.heading {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
 .cab {
   flex: 1 0 0;
   min-inline-size: 40px;
diff --git a/projects/element-ng/dashboard/si-dashboard-card.component.spec.ts b/projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
index 53d19ed58e..47a9153a4e 100644
--- a/projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
+++ b/projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
@@ -12,6 +12,7 @@ describe('SiDashboardCardComponent', () => {
   let fixture: ComponentFixture<SiDashboardCardComponent>;
   let element: HTMLElement;
   let heading: WritableSignal<string>;
+  let subHeading: WritableSignal<string>;
   let primaryActions: WritableSignal<any>;
   let secondaryActions: WritableSignal<any>;
   let enableExpandInteraction: WritableSignal<boolean>;
@@ -24,12 +25,14 @@ describe('SiDashboardCardComponent', () => {
 
   beforeEach(() => {
     heading = signal('');
+    subHeading = signal('');
     primaryActions = signal([]);
     secondaryActions = signal([]);
     enableExpandInteraction = signal(false);
     fixture = TestBed.createComponent(SiDashboardCardComponent, {
       bindings: [
         inputBinding('heading', heading),
+        inputBinding('subHeading', subHeading),
         inputBinding('primaryActions', primaryActions),
         inputBinding('secondaryActions', secondaryActions),
         inputBinding('enableExpandInteraction', enableExpandInteraction)
@@ -44,6 +47,20 @@ describe('SiDashboardCardComponent', () => {
     expect(element.querySelector('.card-header')!).toHaveTextContent('TITLE_KEY');
   });
 
+  it('should have a subHeading', async () => {
+    heading.set('TITLE_KEY');
+    subHeading.set('SUB_TITLE_KEY');
+    await fixture.whenStable();
+    expect(element.querySelector('.card-header .heading')!).toHaveTextContent('SUB_TITLE_KEY');
+  });
+
+  it('should not render subHeading when not set', async () => {
+    heading.set('TITLE_KEY');
+    await fixture.whenStable();
+    const subHeadingEl = element.querySelector('.card-header .si-body.text-secondary');
+    expect(subHeadingEl).toBeNull();
+  });
+
   describe('content action bar', () => {
     it('should not be available without actions', async () => {
       await fixture.whenStable();
diff --git a/src/app/examples/si-dashboard/si-dashboard-card.html b/src/app/examples/si-dashboard/si-dashboard-card.html
index 50aedd825d..e49c236715 100644
--- a/src/app/examples/si-dashboard/si-dashboard-card.html
+++ b/src/app/examples/si-dashboard/si-dashboard-card.html
@@ -4,6 +4,7 @@
       <si-dashboard-card
         #card
         heading="Natural Gas Usage"
+        subHeading="Shows the usage of natural gas"
         [enableExpandInteraction]="enableExpandInteraction()"
         [primaryActions]="primaryActions()"
         [secondaryActions]="secondaryActions()"