96 lines
5.1 KiB
HTML
96 lines
5.1 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Page Layout Public</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Layout – Page Layout Public</h1>
|
||
|
||
<main aria-label="Page Layout Public">
|
||
<header class="sg-portal-header sg-portal-header--auth-segment" aria-label="Public Portal Header" data-pattern="portal-header">
|
||
<div class="sg-portal-header__auth-row" data-pattern-part="portal-header-action">
|
||
<div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
|
||
Login
|
||
</button>
|
||
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
|
||
Registrieren
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="sg-page-layout-public__content-mirror">
|
||
<div class="sg-transparent-card sg-page-layout-public__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
|
||
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
||
<p class="sg-body sg-text-layout-pattern__sample">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sg-content-cards-group sg-page-layout-public__footer-group" data-pattern="content-cards-group" aria-label="Fusszeile">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fusszeile">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Fusszeile</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Platzhalterinhalt fuer die Fusszeile.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="../scripts/help-icon-overlays.js"></script>
|
||
<script>
|
||
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__auth-row .sg-tab-button-group, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
|
||
group.querySelectorAll('.sg-tab-button').forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
|
||
const isActive = otherButton === button;
|
||
otherButton.setAttribute('aria-selected', String(isActive));
|
||
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
|
||
button.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const nextState = wrap.dataset.open !== 'true';
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
||
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
||
otherWrap.dataset.open = 'false';
|
||
if (otherButton) {
|
||
otherButton.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
wrap.dataset.open = String(nextState);
|
||
button.setAttribute('aria-expanded', String(nextState));
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|