diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 3d66642fa5..57da850d8b 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -1,14 +1,16 @@
-
-
{{ title }}
-
+
-
+
diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts
index b62f830d44..7ce79071bf 100644
--- a/libs/components/src/callout/callout.component.ts
+++ b/libs/components/src/callout/callout.component.ts
@@ -16,6 +16,9 @@ const defaultI18n: Partial> = {
danger: "error",
};
+// Increments for each instance of this component
+let nextId = 0;
+
@Component({
selector: "bit-callout",
templateUrl: "callout.component.html",
@@ -25,6 +28,7 @@ export class CalloutComponent implements OnInit {
@Input() icon: string;
@Input() title: string;
@Input() useAlertRole = false;
+ protected titleId = `bit-callout-title-${nextId++}`;
constructor(private i18nService: I18nService) {}