gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use text links in public portal header

Browse Source
This commit is contained in:
Mathias Gläser
2026-07-07 14:37:03 +02:00
parent 080d65a684
commit 1042c8449f
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/portal-header.html
+6 -6
View File
@@ -69,7 +69,7 @@
</p>
<p class="sg-table-label sg-text-on-dark">
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Zeile darunter.
</p>
<article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -93,11 +93,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>
<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="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</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">Inhalt 2</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">Inhalt 3</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">Inhalt 4</button>
<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>
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 3</a>
<a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
</nav>
</div>
</header>
styles/20-patterns-portal-header.css
+4
View File
@@ -53,6 +53,10 @@
.sg-portal-header__tabs {
grid-area: tabs;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-small);
width: 100%;
}