diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 57eba743e64a43f09b087970f62b3ee01715aa0c..4ecd2941d74717e3ef1791e8a0c1e4e039da9b66 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -63,7 +63,7 @@
             placeholder="Betreff hier eingeben"
             variant="error"
           >
-            <ods-error-message>Betreff fehlt</ods-error-message
+            <ods-error-message text="Betreff fehlt"></ods-error-message
           ></ods-text-input>
         </div>
         <div class="my-4">
@@ -75,7 +75,7 @@
             placeholder="Nachrichtentext hier eingeben"
             variant="error"
           >
-            <ods-error-message>Nachrichtentext fehlt</ods-error-message>
+            <ods-error-message text="Nachrichtentext fehlt"></ods-error-message>
           </ods-textarea>
         </div>
 
diff --git a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts
index 215a5dbaa89f109651994d0dcb704e8ed225d404..84341ceacd7a96a6037b2b2ce647c34085c0e4fa 100644
--- a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts
+++ b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts
@@ -13,9 +13,11 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   standalone: true,
   imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
   styles: [':host {@apply flex flex-col}'],
-  template: `<ods-error-message *ngIf="stateResource.error">
-      Ein Fehler ist aufgetreten. <br />
-      Versuchen Sie es nocheinmal.
+  template: `<ods-error-message
+      *ngIf="stateResource.error"
+      text="Ein Fehler ist aufgetreten."
+      subText="Versuchen Sie es nocheinmal."
+    >
     </ods-error-message>
     <ods-button
       [text]="text"
diff --git a/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html b/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html
index 4550ef590e4ce75f62f355b566d7dc05da45883c..703f757c2b17228e8cdfb7d158a7bb7e6a058a93 100644
--- a/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html
+++ b/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html
@@ -1,3 +1,3 @@
 <ng-container *ngFor="let issue of issues"
-  ><ods-error-message>{{ message(issue) }}</ods-error-message
+  ><ods-error-message [text]="message(issue)"></ods-error-message
 ></ng-container>
diff --git a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts
index bec8bcec6bd62ca08fdb0e3688e0bbab6611c5f9..8fc3456345c220e957ee99aaf370dd2cb21b172f 100644
--- a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
 
 @Component({
@@ -7,6 +7,14 @@ import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-ico
   standalone: true,
   imports: [CommonModule, ExclamateIconComponent],
   styles: [':host {@apply flex text-error my-2 text-sm items-center font-medium}'],
-  template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon><ng-content></ng-content>`,
+  template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon>
+    <div class="flex-grow break-all">
+      {{ text }}
+      <br *ngIf="subText" aria-hidden="true" />
+      {{ subText }}
+    </div> `,
 })
-export class ErrorMessageComponent {}
+export class ErrorMessageComponent {
+  @Input({ required: true }) text!: string;
+  @Input() subText: string = '';
+}
diff --git a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts
index dc3d2aa289ec0bbf966f1a08c02f998ffb2053c6..b52ddc18e842cdac34d2fea37397c8a63f0f75be 100644
--- a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts
@@ -1,5 +1,4 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 import { ErrorMessageComponent } from './error-message.component';
 
 const meta: Meta<ErrorMessageComponent> = {
@@ -17,4 +16,18 @@ const meta: Meta<ErrorMessageComponent> = {
 export default meta;
 type Story = StoryObj<ErrorMessageComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    text: 'Ein Fehler ist aufgetreten.',
+    subText: 'Versuchen Sie es nocheinmal.',
+  },
+  argTypes: {
+    text: { description: 'First line of text' },
+    subText: { description: 'Second line of text' },
+  },
+  render: (args: ErrorMessageComponent) => ({
+    props: args,
+    template: `<ods-error-message ${argsToTemplate(args)} class="w-72">
+      </ods-error-message>`,
+  }),
+};