diff --git a/projects/components/src/description/description.component.test.ts b/projects/components/src/description/description.component.test.ts
index d86b93520..d9231c5ed 100644
--- a/projects/components/src/description/description.component.test.ts
+++ b/projects/components/src/description/description.component.test.ts
@@ -10,25 +10,18 @@ describe('Description Component', () => {
   });
 
   test('should render the description', () => {
-    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
-      hostProps: {
-        description: 'Description text'
-      }
-    });
+    spectator = createHost('<ht-description> Description text </ht-description>');
 
     expect(spectator.query('.description')).toExist();
     expect(spectator.query('.description-text')).toHaveText('Description text');
   });
 
   test('should show full description text if pressed button show more', () => {
-    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
-      hostProps: {
-        description: 'Description text'
-      }
-    });
+    spectator = createHost('<ht-description> Description text </ht-description>');
 
-    expect(spectator.component.isDescriptionTextToggled).toBeFalsy();
-    spectator.component.toggleDescriptionText();
-    expect(spectator.component.isDescriptionTextToggled).toBeTruthy();
+    expect(spectator.query('.description-text')).toHaveClass('description-text truncated-text');
+    spectator.component.isDescriptionTextToggled = true;
+    spectator.component.cdRef.detectChanges();
+    expect(spectator.query('.description-text')).not.toHaveClass('truncated-text');
   });
 });
diff --git a/projects/components/src/description/description.component.ts b/projects/components/src/description/description.component.ts
index ab3d11a58..21e789103 100644
--- a/projects/components/src/description/description.component.ts
+++ b/projects/components/src/description/description.component.ts
@@ -4,7 +4,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Input,
   OnChanges,
   ViewChild
 } from '@angular/core';
@@ -21,10 +20,10 @@ import {
         data-sensitive-pii
         #eventDescriptionText
       >
-        {{ description }}
+        <ng-content></ng-content>
         <span
           *ngIf="isDescriptionTruncated && isDescriptionTextToggled"
-          (click)="toggleDescriptionText()"
+          (click)="toggleDescriptionText($event)"
           class="description-button"
           >show less</span
         >
@@ -32,7 +31,7 @@ import {
       <div
         class="description-button description-button-more"
         *ngIf="isDescriptionTruncated && !isDescriptionTextToggled"
-        (click)="toggleDescriptionText()"
+        (click)="toggleDescriptionText($event)"
       >
         show more
       </div>
@@ -50,10 +49,7 @@ export class DescriptionComponent implements OnChanges, AfterViewInit {
   @ViewChild('eventDescriptionContainer', { read: ElementRef })
   public readonly eventDescriptionContainer!: ElementRef;
 
-  @Input()
-  public description!: string;
-
-  public constructor(private readonly cdRef: ChangeDetectorRef) {}
+  public constructor(public readonly cdRef: ChangeDetectorRef) {}
 
   public ngOnChanges(): void {
     if (this.isInitialized) {
@@ -66,7 +62,8 @@ export class DescriptionComponent implements OnChanges, AfterViewInit {
     this.remeasure();
   }
 
-  public toggleDescriptionText(): void {
+  public toggleDescriptionText(event: Event): void {
+    event.stopPropagation();
     this.isDescriptionTextToggled = !this.isDescriptionTextToggled;
   }