Adjust notifications small height

foundations.html

@@ -148,6 +148,8 @@
         <tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
         <tr><td>options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels in der Options Row.</td></tr>
         <tr><td>card-list-drawer-width</td><td>40%</td><td>Relative Breite des ausziehbaren Card-Listenbereichs.</td></tr>
+        <tr><td>notifications-text-segment-fixed-height</td><td>150px</td><td>Desktop-Höhe des ersten Text-Segments im Standard-Pattern Notifications.</td></tr>
+        <tr><td>notifications-text-segment-fixed-height-small</td><td>80px</td><td>Desktop-Höhe des ersten Text-Segments in der Variante Pattern Notifications small.</td></tr>
       </tbody>
     </table>
   </section>

patterns/notifications.html

@@ -60,6 +60,56 @@
     </div>
   </section>
 
+  <section id="pattern-notifications-small">
+    <p class="sg-preview-label">Pattern: Notifications small</p>
+
+    <div class="sg-preview-area sg-notifications-pattern">
+
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zum Unternehmen
+          </button>
+        </div>
+      </article>
+
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zum Unternehmen
+          </button>
+        </div>
+      </article>
+
+      <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zum Unternehmen
+          </button>
+        </div>
+      </article>
+
+    </div>
+  </section>
+
   <script>
     const updateNotificationsPatternRowState = () => {
       document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {

semantic-tokens-patterns.html

@@ -59,7 +59,8 @@
       <tr><td>layout-notifications-card-flex-basis</td><td>layout-object-card-min-width</td><td>Flex-Basis der Notification Card im Notifications-Pattern; gilt auch in der dokumentierten Variante innerhalb von <code>.sg-group-card</code>.</td></tr>
       <tr><td>layout-notifications-card-min-width</td><td>layout-object-card-min-width</td><td>Mindestbreite der Notification Card im Notifications-Pattern; verhindert zu frühes Schrumpfen bei Viewport-Änderungen.</td></tr>
       <tr><td>layout-notifications-card-max-width</td><td>layout-object-card-max-width</td><td>Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite.</td></tr>
-      <tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
+      <tr><td>layout-notifications-text-segment-fixed-height</td><td>dimension-notifications-text-segment-fixed-height</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
+      <tr><td>layout-notifications-text-segment-fixed-height-small</td><td>dimension-notifications-text-segment-fixed-height-small</td><td>Fixe Desktop-Höhe des ersten Text-Segments in der Variante <code>Pattern: Notifications small</code>; auf Mobile wird die Höhe auf auto gesetzt.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Company Card</h3>

styles/01-foundations.css

@@ -173,7 +173,10 @@
   --layout-notifications-card-flex-basis: var(--layout-object-card-min-width);
   --layout-notifications-card-min-width: var(--layout-object-card-min-width);
   --layout-notifications-card-max-width: var(--layout-object-card-max-width);
-  --layout-notifications-text-segment-fixed-height: 150px;
+  --dimension-notifications-text-segment-fixed-height: 150px;
+  --dimension-notifications-text-segment-fixed-height-small: 60px;
+  --layout-notifications-text-segment-fixed-height: var(--dimension-notifications-text-segment-fixed-height);
+  --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
   --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
   --surface-object-card-lower-segment: var(--color-white);

styles/28-patterns-notifications.css

@@ -33,6 +33,10 @@
   height: var(--layout-notifications-text-segment-fixed-height);
 }
 
+.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
+  height: var(--layout-notifications-text-segment-fixed-height-small);
+}
+
 @media (max-width: 767px) {
   .sg-notifications-pattern__card {
     width: 100%;
@@ -41,7 +45,8 @@
     flex: 1 1 auto;
   }
 
-  .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment {
+  .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment,
+  .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
     height: auto;
   }
 }