diff --git a/patterns/card-listen-seite.html b/patterns/card-listen-seite.html
index 4359a8d..07c1d20 100644
--- a/patterns/card-listen-seite.html
+++ b/patterns/card-listen-seite.html
@@ -100,21 +100,18 @@
       </div>
     </div>
 
-    <div class="sg-card-list-page__title-row">
-      <h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">Listenübersicht</h1>
-      <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
-        <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
-        <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
-          Hilfe zur Listenansicht und zu den Filteroptionen.
+    <div class="sg-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur Listenübersicht" data-component="transparent-card">
+      <div class="sg-card-list-page__title-row">
+        <h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">Listenübersicht</h1>
+        <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
+          <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
+          <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
+            Hilfe zur Listenansicht und zu den Filteroptionen.
+          </span>
         </span>
-      </span>
-    </div>
-
-    <article class="sg-card sg-transparent-card sg-card-list-page__intro-card" aria-label="Einleitung zur Listenübersicht">
-      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
       </div>
-    </article>
+      <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
+    </div>
 
     <div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Objektliste">
       <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card 1">
diff --git a/patterns/vsf-card-listen-seite.html b/patterns/vsf-card-listen-seite.html
index b88ef8c..c8492d5 100644
--- a/patterns/vsf-card-listen-seite.html
+++ b/patterns/vsf-card-listen-seite.html
@@ -100,21 +100,18 @@
       </div>
     </div>
 
-    <div class="sg-card-list-page__title-row">
-      <h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">VSF Listenübersicht</h1>
-      <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
-        <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur VSF Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
-        <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
-          Hilfe zur Listenansicht und zu den Filteroptionen.
+    <div class="sg-transparent-card sg-card-list-page__intro-block" aria-label="Einleitung zur VSF Listenübersicht" data-component="transparent-card">
+      <div class="sg-card-list-page__title-row">
+        <h1 class="sg-heading-h1 sg-text-on-dark sg-card-list-page__title">VSF Listenübersicht</h1>
+        <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="layout-card-list-page">
+          <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext zur VSF Listenübersicht anzeigen" data-component-part="help-trigger">?</button>
+          <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
+            Hilfe zur Listenansicht und zu den Filteroptionen.
+          </span>
         </span>
-      </span>
-    </div>
-
-    <article class="sg-card sg-transparent-card sg-card-list-page__intro-card" aria-label="Einleitung zur VSF Listenübersicht">
-      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
       </div>
-    </article>
+      <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
+    </div>
 
     <div class="sg-object-card-grid sg-card-list-page__object-grid" aria-label="Company Liste">
       <article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
diff --git a/styleguide.css b/styleguide.css
index 5b46753..4721b55 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2067,26 +2067,34 @@ section + section {
   margin-top: var(--spacing-large);
 }
 
-.sg-card-list-page > .sg-card-list-page__intro-card {
+.sg-card-list-page > .sg-card-list-page__intro-block {
   margin-top: calc(var(--spacing-large) - 0.5rem);
 }
 
-.sg-card-list-page__intro-card.sg-card {
-  --layout-card-body-padding-top: 0;
-  --layout-card-body-padding-bottom: 0;
-  --surface-card-body: var(--surface-card-transparent);
-  align-self: flex-start;
-  width: min(60vw, 100%);
+.sg-card-list-page__intro-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+}
+
+.sg-card-list-page__title-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  width: fit-content;
   max-width: 100%;
 }
 
+.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+  width: min(60vw, 100%);
+}
+
 @media (max-width: 767px) {
   .sg-card-list-page-drawer {
     display: none;
   }
 
-  .sg-card-list-page__intro-card.sg-card {
-    align-self: stretch;
+  .sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
     width: 100%;
   }
 }