From 012cbfcd0ebd302666c6f82e223db07d8a2b369d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 7 Jul 2026 14:39:41 +0200
Subject: [PATCH] Wrap public portal links in basic card

---
 patterns/portal-header.html          | 8 ++++++--
 styles/20-patterns-portal-header.css | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index 6be983b..4f422c7 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -69,7 +69,7 @@
       </p>
 
       <p class="sg-table-label sg-text-on-dark">
-        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Zeile darunter.
+        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Basic Card darunter.
       </p>
 
       <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -92,7 +92,11 @@
 
           <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
             <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Portalname</p>
+          </div>
+        </header>
 
+        <article class="sg-card sg-portal-header-pattern-variant__links-card" data-component="basic-card" aria-label="Hauptnavigation">
+          <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
             <nav class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation">
               <a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a>
               <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a>
@@ -100,7 +104,7 @@
               <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
             </nav>
           </div>
-        </header>
+        </article>
 
         <p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
           Nächstes Element (Abstand nach unten: spacing-large)
diff --git a/styles/20-patterns-portal-header.css b/styles/20-patterns-portal-header.css
index 07f9cba..2bff6f7 100644
--- a/styles/20-patterns-portal-header.css
+++ b/styles/20-patterns-portal-header.css
@@ -81,6 +81,10 @@
   margin-top: var(--spacing-large);
 }
 
+.sg-portal-header-pattern-variant__links-card {
+  margin-top: var(--spacing-small);
+}
+
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
     gap: var(--spacing-small) var(--spacing-large);