@@ -11,52 +11,35 @@
< h1 class = "sg-main-heading" > Pattern – VSF Portal Header Public< / h1 >
< section id = "pattern-portal-header" >
< p class = "sg-preview-label" > Pattern: VSF Portal Header Public< / p >
< p class = "sg-table-label sg-text-on-dark" >
Desktop/Tablet: Header skaliert über die verfügbare Breite.
< / p >
< p class = "sg-table-label sg-text-on-dark" >
Mobile: Sandwich-Menü und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
< / p >
< article class = "sg-portal-header-pattern-variant" aria-label = "Portal Header ohne Options Row" >
< p class = "sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark" >
Variante: Portal Header ohne Options Row
< / p >
< header class = "sg-portal-header" aria-label = "Portal Header" data-pattern = "portal-header" >
< 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" > ValueStockFinder< / p >
< div class = "sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open = "false" data-component = "sandwich-menu" data-component-size = "default" data-component-context = "portal-header " data-pattern-part = "portal-header-action" >
< button class = "sg-interaction-element sg-sandwich-button" type = "button" aria-expanded = "false" aria-label = "Menü öffnen" data-component-part = "sandwich-trigger ">
< span class = "sg-sandwich-button__icon " aria-hidden = "tru e" >
< span class = "sg-sandwich-button__line" > < / span >
< span class = "sg-sandwich-button__line" > < / span >
< span class = "sg-sandwich-button__line" > < / span >
< / span >
< div class = "sg-portal-header__menu-wrap" data-pattern-part = "portal-header-action" >
< div class = "sg-component-row " >
< button class = "sg-interaction-element sg-button sg-button--active " type = "button" data-component = "button" data-component-state = "activ e">
Login
< / button >
< div class = "sg-sandwich-menu-panel " aria-label = "Ausgeklapptes Menü " data-component-part = "sandwich-panel " >
< 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 >
< button class = "sg-interaction-element sg-button sg-button--active " type = "button" data-component = "button " data-component-state = "active " >
Registrieren
< / button >
< / div >
< / div >
< nav class = "sg-portal-header__tabs sg-tab-button-group" aria-label = "Hauptnavigation" data-component = "tab-navigation" data-component-size = "large" data-component-context = "portal-header" data-pattern-part = "portal-header-navigation" >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "fals e" data-component-part = "tab-button" data-component-state = "in active" > Updates < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "tru e" data-component-part = "tab-button" data-component-state = "active" > Titel < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "false" data-component-part = "tab-button" data-component-state = "inactive" > Gruppen < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "false" data-component-part = "tab-button" data-component-state = "inactive" > Listen < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "tru e" data-component-part = "tab-button" data-component-state = "active" > Übersicht < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "fals e" data-component-part = "tab-button" data-component-state = "in active" > Features < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "false" data-component-part = "tab-button" data-component-state = "inactive" > Preise < / button >
< button class = "sg-interaction-element sg-button sg-tab-button" type = "button" aria-selected = "false" data-component-part = "tab-button" data-component-state = "inactive" > Firma der Woche < / button >
< / nav >
< / div >
< / header >
< p class = "sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark " >
Nächstes Element (Abstand nach unten: spacing-large)
< / p >
< div class = "sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label = "Willkommen bei ValueStockFinder" data-component = "transparent-card ">
< h1 class = "sg-heading-h1 sg-text-on-dark" > Willkommen bei ValueStockFinder< / h1 >
< / div >
< / article >
< / section >