feat(system-banner): update system banner typography and dimensions

projects/element-ng/system-banner/system-banner.component.html

@@ -1,8 +1,8 @@
 <div
-  class="text-center text-truncate si-h5 banner"
+  class="text-center text-truncate si-body banner"
   role="alert"
   aria-atomic="true"
   aria-live="assertive"
 >
-  {{ message() | translate }}
+  {{ message() | translate }} <ng-content select="a" />
 </div>

projects/element-ng/system-banner/system-banner.component.scss

@@ -8,7 +8,12 @@
 
   .banner {
     padding-block: variables.$si-system-banner-padding-y;
-    padding-inline: map.get(variables.$spacers, 5);
+    padding-inline: map.get(variables.$spacers, 4);
+
+    ::ng-deep a {
+      color: inherit;
+      text-decoration: underline;
+    }
   }
 
   &.banner-info {

projects/element-ng/system-banner/system-banner.component.spec.ts

@@ -2,12 +2,23 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { inputBinding, signal, WritableSignal } from '@angular/core';
+import { Component, inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ExtendedStatusType } from '@siemens/element-ng/common';
 
 import { SiSystemBannerComponent } from './system-banner.component';
 
+@Component({
+  imports: [SiSystemBannerComponent],
+  template: `
+    <si-system-banner message="Update available">
+      <a href="https://element.siemens.io/">Learn more</a>
+      <span>Unsupported content</span>
+    </si-system-banner>
+  `
+})
+class TestHostComponent {}
+
 describe('SiSystemBannerComponent', () => {
   let fixture: ComponentFixture<SiSystemBannerComponent>;
   let element: HTMLElement;
@@ -34,6 +45,17 @@ describe('SiSystemBannerComponent', () => {
     expect(element).toHaveTextContent('Test');
   });
 
+  it('should display projected content as part of the message', async () => {
+    const hostFixture = TestBed.createComponent(TestHostComponent);
+    await hostFixture.whenStable();
+
+    const alert = hostFixture.nativeElement.querySelector('[role="alert"]');
+
+    expect(alert).toHaveTextContent('Update available Learn more');
+    expect(alert).not.toHaveTextContent('Unsupported content');
+    expect(alert.querySelector('a')).toHaveAttribute('href', 'https://element.siemens.io/');
+  });
+
   it('should have default banner type', () => {
     expect(status()).toBe('info');
   });

projects/element-theme/src/styles/variables/_si-vars.scss

@@ -15,7 +15,7 @@ $btn-width-normal: 80px;
 $si-application-header-height: calc(1.5rem + (2 * map.get(spacers.$spacers, 5) + 1px));
 $si-titlebar-padding-y: map.get(spacers.$spacers, 3);
 $si-titlebar-height: calc(1.5rem + 2 * $si-titlebar-padding-y);
-$si-system-banner-padding-y: map.get(spacers.$spacers, 1);
+$si-system-banner-padding-y: map.get(spacers.$spacers, 2);
 $si-system-banner-height: calc(1rem + 2 * $si-system-banner-padding-y);
 
 // allows adding a custom titlebar on top

src/app/examples/si-system-banner/si-system-banner.html

@@ -4,4 +4,7 @@
   <si-system-banner message="This is a caution" status="caution" />
   <si-system-banner message="This is an error" status="danger" />
   <si-system-banner message="This is a critical error" status="critical" />
+  <si-system-banner message="Update available" status="info">
+    <a class="banner-link" href="https://element.siemens.io/">Learn more</a>
+  </si-system-banner>
 </div>