diff --git a/packages/fiori/src/IllustratedMessage.hbs b/packages/fiori/src/IllustratedMessage.hbs
index 14a36b98b7e7..75c1bd9746d0 100644
--- a/packages/fiori/src/IllustratedMessage.hbs
+++ b/packages/fiori/src/IllustratedMessage.hbs
@@ -11,7 +11,7 @@
 	{{/if}}
 
 	{{#if hasSubtitle}}
-		<div class="ui5-illustrated-message-subtitle">
+		<div part="subtitle" class="ui5-illustrated-message-subtitle">
 			{{#if hasFormattedSubtitle}}
 				<slot name="subtitle"></slot>
 			{{else}}
diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts
index 8184553ad159..336ee25fb3c6 100644
--- a/packages/fiori/src/IllustratedMessage.ts
+++ b/packages/fiori/src/IllustratedMessage.ts
@@ -61,6 +61,8 @@ import IllustratedMessageTemplate from "./generated/templates/IllustratedMessage
  *
  * <code>import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";</code>
  *
+ * @csspart subtitle - Used to style the subtitle wrapper of the <code>ui5-illustrated-message</code>
+ *
  * @constructor
  * @extends UI5Element
  * @public