Überschriften in den Kästen auf zwei Zeilen

src/components/CardTermine.jsx

+import React, {useEffect, useState} from 'react';
+
+// <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+export default function Card({title, icon, children}) {
+
+  const [svgData, setSvgData] = useState(undefined)
+
+  useEffect(async () => {
+    if (icon) {
+      const svgData = (await import(`@icons/${icon}.svg`)).default
+      setSvgData(svgData);
+    }
+  }, [icon])
+
+  return <div className="relative flex flex-col items-center p-6 bg-white rounded shadow-xl">
+    {svgData && <img className="w-16 h-16 mb-2" src={svgData}/>}
+
+    <h4 className="text-xl font-bold leading-snug tracking-tight mb-1" style={{ textAlign: "center" }}  >FIT-Connect <br/> für {title}</h4>
+    {children}
+  </div>
+}

src/pages/termine.mdx

@@ -4,16 +4,18 @@ hide_table_of_contents: true
 ---
 import MailToButtonTermine from '@components/MailToButtonTermine'
 import BannerTermine from '@components/BannerTermine'
-import Card from '@components/Card'
+import CardTermine from '@components/CardTermine'
 import MailToButton from '@components/MailToButton'
 
+
+
 <header className="max-w-3xl mx-auto text-center pb-16">
   <h1 className="h1 mb-4">Veranstaltungen</h1>
   <p className="wtext-xl text-gray-600">Möchten Sie mehr über FIT-Connect erfahren? Sprechen Sie mit uns in Online-Veranstaltungen, die einmal im Monat stattfinden. Die folgenden Themen stehen zur Auswahl:</p>
 </header>
 <BannerTermine>
   <div style={{ width: "33%" }} >
-   <Card title={'FIT-Connect für Interessierte'} icon={'Send'}>
+   <CardTermine title="Interessierte" icon={'Send'}>
       <br/>
       <p className="text-gray-600 text-center" >      
         Bei diesen Veranstaltungen erhalten Verantwortliche und Entwickler:innen Informationen, wie sie Onlinedienste und Fachverfahren an FIT-Connect anbinden.
@@ -25,10 +27,10 @@ import MailToButton from '@components/MailToButton'
         Teilnehmer sind alle Ansprechpartner für Onlinedienste oder Fachverfahren, die an einer Anbindung interessiert sind.  <br/>
         Mit der folgenden Schaltfläche rufen Sie Ihr E-Mail-Programm auf, mit einer vorbereiteten E-Mail. Senden Sie uns diese E-Mail und wir informieren Sie regelmäßig über die nächste Informationsveranstaltung zur Anbindung von Onlinediensten und Fachverfahren. 
       </p> 
-      </Card>
+      </CardTermine>
   </div>
    <div style={{ width: "33%" }} >
-     <Card title={'FIT-Connect für Verantwortliche'} icon={'Support'}>
+     <CardTermine title={'Verantwortliche'} icon={'Support'}>
       <br/>
       <p className="text-gray-600 text-center">
           Diese Veranstaltungen richten sich an Umsetzungsverantwortliche, die ihre Systeme gerade anbinden oder an FIT-Connect angebunden haben.        
@@ -41,10 +43,10 @@ import MailToButton from '@components/MailToButton'
         Mit der Schaltfläche oben rufen Sie Ihr E-Mail-Programm auf, mit einer vorbereiteten E-Mail. Senden Sie uns diese E-Mail und wir informieren Sie über Veranstaltungen zum Thema "FIT-Connect nutzen".  <br/>  
       </p>
    
-  </Card>
+  </CardTermine>
   </div>
    <div style={{ width: "33%" }} >
-  <Card title={'FIT-Connect für Entwickler:innen'} icon={'Bug'}>
+  <CardTermine title={'Entwickler:innen'} icon={'Bug'}>
         <br/>
         <p className="text-gray-600 text-center">
           Diese Veranstaltungen richten sich an Entwickler:innen, die ihre Systeme gerade an FIT-Connect anbinden oder bereits angebunden haben.
@@ -56,6 +58,8 @@ import MailToButton from '@components/MailToButton'
           Diese Veranstaltung findet bei Bedarf jeden zweiten Donnerstag im Monat statt.  <br/>
           Mit der Schaltfläche oben rufen Sie Ihr E-Mail-Programm auf, mit einer vorbereiteten E-Mail. Senden Sie uns diese E-Mail und wir informieren Sie über Veranstaltungen zum Thema "FIT-Connect im Detail".
         </p>    
-  </Card>
+  </CardTermine>
   </div>
-</BannerTermine>
\ No newline at end of file
+</BannerTermine>
+
+