diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/heading/properties/heading-table-properties/heading-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/heading/properties/heading-table-properties/heading-table-properties.component.html
index ee2db0be1..9bbc12f36 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/heading/properties/heading-table-properties/heading-table-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/heading/properties/heading-table-properties/heading-table-properties.component.html
@@ -10,7 +10,7 @@
     <td>
       <code>1</code>
     </td>
-    <td>Defines the heading level from 1 to 5.</td>
+    <td>Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.</td>
   </tr>
   <tr>
     <td>text: string</td>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
index d4ba136ec..4c8061444 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
@@ -3,16 +3,45 @@ import { CssUtils } from "../utils";
 import { BehaviorSubject } from "rxjs";
 import { Component, Input, HostBinding, SimpleChanges } from "@angular/core";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-heading",
   templateUrl: "./dxc-heading.component.html",
   providers: [CssUtils],
 })
 export class DxcHeadingComponent {
-  @Input() level: number;
+  /**
+   * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
+   */
+  @Input() level: 1 | 2 | 3 | 4 | 5 = 1;
+  /**
+   * Heading text.
+   */
   @Input() text: string;
-  @Input() weight: string;
-  @Input() margin: string;
+  /**
+   * Modifies the default weight of the heading.
+   */
+  @Input() weight: "light" | "normal" | "bold";
+  /**
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
 
   @HostBinding("class") className;
 
@@ -27,9 +56,6 @@ export class DxcHeadingComponent {
 
   ngOnInit() {
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
-    if (this.level == null) {
-      this.level = 1;
-    }
   }
 
   public ngOnChanges(changes: SimpleChanges): void {