Normalize sandwich menu item spacing to match pulldown options

This commit is contained in:
2026-05-21 17:33:07 +02:00
parent 4cabfe2daf
commit 2a6dae1063
8 changed files with 111 additions and 106 deletions
+62 -62
View File
@@ -25,8 +25,8 @@
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
</div>
</div>
@@ -129,9 +129,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -157,9 +157,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -185,9 +185,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -213,9 +213,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -241,9 +241,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -269,9 +269,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -297,9 +297,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -325,9 +325,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -353,9 +353,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -381,9 +381,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -409,9 +409,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -437,9 +437,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -465,9 +465,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -493,9 +493,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -521,9 +521,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -549,9 +549,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -577,9 +577,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -605,9 +605,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -633,9 +633,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -661,9 +661,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
+3 -3
View File
@@ -26,9 +26,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
+8 -8
View File
@@ -26,9 +26,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -44,7 +44,7 @@
</article>
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
</div>
@@ -56,7 +56,7 @@
</article>
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
</div>
@@ -68,7 +68,7 @@
</article>
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
</div>
@@ -80,7 +80,7 @@
</article>
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
</div>
@@ -92,7 +92,7 @@
</article>
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
</div>
+4 -4
View File
@@ -40,8 +40,8 @@
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
</div>
</div>
@@ -78,8 +78,8 @@
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
</div>
</div>
@@ -35,9 +35,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
+20 -20
View File
@@ -25,8 +25,8 @@
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
</div>
</div>
@@ -129,9 +129,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -219,9 +219,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -309,9 +309,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -399,9 +399,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -489,9 +489,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>
@@ -579,9 +579,9 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
</div>
</div>
</header>