siemens · ljanner · Apr 15, 2026 · chintankavathia · Apr 17, 2026
@@ -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();

@@ -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"

@@ -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()) {

@@ -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;

@@ -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();

@@ -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()"