97 lines
5.3 KiB
HTML
97 lines
5.3 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 2 Column</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Layout – Page Layout Public 2 Column</h1>
|
||
|
||
<main aria-label="Page Layout Public 2 Column">
|
||
<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-page-layout-public__heading-block" aria-label="H1 Bereich">
|
||
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
||
</div>
|
||
|
||
<div class="sg-page-layout-public-2-column__columns">
|
||
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-page-layout-public__footer-card sg-page-layout-public-2-column__footer-card" data-component="content-card" aria-label="Fusszeile">
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||
<p class="sg-body sg-text-layout-pattern__column">
|
||
Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
|
||
</p>
|
||
<p class="sg-body sg-text-layout-pattern__column">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in
|
||
</p>
|
||
</div>
|
||
</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>
|