Entries with Sublevels
Entries with further sub-entries must be marked with the attribute data-sublevel:
<li class="siteHeader-item" ... data-sublevel="true">Mobile Interaction
The data attributes data-current-level and data-current-level-ancestor that control mobile interactions are set via JavaScript. However, to display a specific level directly when opening the menu, these can also be set manually in the source code.
Mobile Titles
The level titles displayed on mobile are defined via data attributes:
<ul class="siteHeader-list" data-level="1" data-title="Menü">Desktop Dropdowns
The buttons for expanding dropdowns on desktop must reference their corresponding dropdown via the aria-controls attribute. The aria-expanded attribute is set via JavaScript.
<button aria-controls="siteHeader-dropdown-0" aria-expanded="false" class="siteHeader-link"/>
<div id="siteHeader-dropdown-0" class="siteHeader-level" data-level="2">To mark the current page, the corresponding entry must have the attribute data-current set to true. Additionally, the link itself should be marked with the aria-current attribute.
<li class="siteHeader-item" data-current="true">
<a class="siteHeader-link" aria-current="page">To mark the path to the current page, all ancestors must have the attribute data-current-ancestor set to true:
<li class="siteHeader-item" data-level="1" data-current-ancestor="true">
...
<li class="siteHeader-item" data-level="2" data-current-ancestor="true">
...
<li class="siteHeader-item" data-current="true">
<div id="siteHeader" class="siteHeader" data-menu data-persistent="true">
<div class="siteHeader-skip">
<a href="#siteHeader-end">Direkt zum Inhalt</a>
</div>
<div class="siteHeader-home">
<div class="logo">
<img src="/images/logo/logo.png" alt="" />
</div>
<a href="/" title="Startseite">Startseite</a>
</div>
<div class="siteHeader-drawer">
<div class="siteHeader-content">
<div class="siteHeader-level" data-level="1">
<nav class="siteHeader-nav" aria-label="Primärnavigation">
<ul class="siteHeader-list" data-level="1" data-title="Menü">
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="megamenu" data-current-ancestor="true">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-0" class="siteHeader-link" data-level="1"><span>Cardigan</span></button>
<div id="siteHeader-dropdown-0" class="siteHeader-level" data-level="2" data-sublevels="true">
<ul class="siteHeader-list" data-level="2" data-title="Cardigan">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" data-sublevels="true" href="#"><span>Cardigan</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-0" class="siteHeader-link" data-level="2"><span>Flannel</span></button>
<div id="siteHeader-rubrik-1-sublevel-0" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Flannel">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Flannel</span></a>
</li>
<li class="siteHeader-item" data-level="3" data-current="true">
<a class="siteHeader-link" data-level="3" href="#" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true" data-current-ancestor="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-1" class="siteHeader-link" data-level="2"><span>Mixtape</span></button>
<div id="siteHeader-rubrik-1-sublevel-1" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Mixtape">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Mixtape</span></a>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Locavore intelligentsia kogi</span></a>
<div class="siteHeader-item-description">Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hell of letterpress</span></a>
<div class="siteHeader-item-description">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Green juice cold-pressed</span></a>
<div class="siteHeader-item-description">Crucifix you probably haven’t heard of them pork belly tilde.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Mukbang seitan</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Flexitarian typewriter</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Fanny pack</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-2" class="siteHeader-link" data-level="2"><span>Dreamcatcher</span></button>
<div id="siteHeader-rubrik-1-sublevel-2" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Dreamcatcher">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Dreamcatcher</span></a>
</li>
<li class="siteHeader-item" data-level="3" data-current="true">
<a class="siteHeader-link" data-level="3" href="#" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-3" class="siteHeader-link" data-level="2"><span>Raclette & Coloring</span></button>
<div id="siteHeader-rubrik-1-sublevel-3" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Raclette & Coloring">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raclette & Coloring</span></a>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Locavore intelligentsia kogi</span></a>
<div class="siteHeader-item-description">Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hell of letterpress</span></a>
<div class="siteHeader-item-description">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Green juice cold-pressed</span></a>
<div class="siteHeader-item-description">Crucifix you probably haven’t heard of them pork belly tilde.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Mukbang seitan</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Flexitarian typewriter</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Fanny pack</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="2" data-sublevel="true">
<button aria-expanded="false" aria-controls="siteHeader-rubrik-1-sublevel-4" class="siteHeader-link" data-level="2"><span>Locavore</span></button>
<div id="siteHeader-rubrik-1-sublevel-4" class="siteHeader-level" data-level="3">
<ul class="siteHeader-list" data-level="3" data-title="Locavore">
<li class="siteHeader-item is-overview" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Locavore</span></a>
</li>
<li class="siteHeader-item" data-level="3" data-current="true">
<a class="siteHeader-link" data-level="3" href="#" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="3">
<a class="siteHeader-link" data-level="3" href="#"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="megamenu">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-1" class="siteHeader-link" data-level="1"><span>Raw Denim</span></button>
<div id="siteHeader-dropdown-1" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Raw Denim">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Raw Denim</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Bodega boys etsy</span></a>
<div class="siteHeader-item-description">Crucifix you probably haven’t heard of them pork belly tilde.</div>
</li>
<li class="siteHeader-item" data-level="2">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2"><span>Tattooed la croix</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2"><span>Vice kinfolk master cleanse</span></a>
<div class="siteHeader-item-description">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</div>
</li>
<li class="siteHeader-item" data-level="2">
<div class="siteHeader-item-figure">
<figure class="figure" style="">
<img class="figure-image" src="/images/placeholder/dummy-image.jpg" alt="/images/placeholder/dummy-image.jpg" />
</figure>
</div>
<a href="#" class="siteHeader-link" data-level="2"><span>Blackbird spyplane</span></a>
<div class="siteHeader-item-description">Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="megamenu">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-2" class="siteHeader-link" data-level="1"><span>Sustainable</span></button>
<div id="siteHeader-dropdown-2" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Sustainable">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Sustainable</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-3" class="siteHeader-link" data-level="1"><span>Hashtag</span></button>
<div id="siteHeader-dropdown-3" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Hashtag">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Hashtag</span></span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-4" class="siteHeader-link" data-level="1"><span>Gatekeep</span></button>
<div id="siteHeader-dropdown-4" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Gatekeep">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Gatekeep</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-5" class="siteHeader-link" data-level="1"><span>Letterpress & Mustache</span></button>
<div id="siteHeader-dropdown-5" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Letterpress & Mustache">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Letterpress & Mustache</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown">
<button aria-expanded="false" aria-controls="siteHeader-dropdown-6" class="siteHeader-link" data-level="1"><span>Flexitarian</span></button>
<div id="siteHeader-dropdown-6" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Flexitarian">
<li class="siteHeader-item is-overview" data-level="2">
<a class="siteHeader-link" data-level="2" href="#"><span>Sustainable</span></a>
</li>
<li class="siteHeader-item" data-level="2" data-current="true">
<a href="#" class="siteHeader-link" data-level="2" aria-current="page"><span>Microdosing biodiesel</span></a>
<div class="siteHeader-item-description">Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Raw denim sustainable distillery</span></a>
<div class="siteHeader-item-description">Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</div>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Hashtag</span></a>
<div class="siteHeader-item-description">Master cleanse actually XOXO Schlitz.</div>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
</ul>
</nav>
<nav class="siteHeader-nav is-secondary" aria-label="Sekundärnavigation">
<ul class="siteHeader-list" data-level="1">
<li class="siteHeader-item" data-level="1" data-current-ancestor="true"> <a href="#" class="siteHeader-link" data-level="1"><span>Flannel</span></a>
</li>
<li class="siteHeader-item" data-level="1"> <a href="#" class="siteHeader-link" data-level="1"><span>Mixtape</span></a>
</li>
<li class="siteHeader-item" data-level="1"> <a href="#" class="siteHeader-link" data-level="1"><span>Dreamcatcher</span></a>
</li>
<li class="siteHeader-item" data-level="1" data-icon="search"> <a href="#" class="siteHeader-link" data-level="1"><span>Suche</span></a>
</li>
<li class="siteHeader-item" data-level="1" data-sublevel="true" data-type="dropdown" data-icon="language"> <button aria-expanded="false" aria-controls="siteHeader-dropdown-4" class="siteHeader-link" data-level="1"><span>DE</span></button>
<div id="siteHeader-secondary-dropdown-4" class="siteHeader-level" data-level="2">
<ul class="siteHeader-list" data-level="2" data-title="Sprache">
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Deutsch</span></a>
</li>
<li class="siteHeader-item" data-level="2">
<a href="#" class="siteHeader-link" data-level="2"><span>Englisch</span></a>
</li>
<li aria-hidden="true" class="siteHeader-item is-back-link"><button>zurück</button></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
<button class="siteHeader-trigger" data-menu-trigger="click">Menü</button>
</div>
<div class="siteHeader-spacer"></div>
<div id="siteHeader-end"></div>
<main class="mainContent">
<div class="pageSection">
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</main>
<div class="siteFooter">
<nav class="siteFooter-nav" data-type="sections">
<dl class="siteFooter-sections">
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Cardigan</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Flannel</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Mixtape</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Dreamcatcher</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Sustainable</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Microdosing</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Raw denim</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Locavore</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Hell of letterpress</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Letterpress & Mustache</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Green juice</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Mukbang seitan</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Flexitarian</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Fanny pack</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Cold-pressed</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Hashtag</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Bodega boys etsy vegan tilde vinyl small batch</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Tattooed</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Vice kinfolk</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Blackbird spyplane</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Locavore</a>
</li>
</ul>
</dd>
</div>
<div class="siteFooter-section">
<dt class="siteFooter-section-title">Flexitarian</dt>
<dd class="siteFooter-section-content">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Dreamcatcher</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Microdosing</a>
</li>
</ul>
</dd>
</div>
</dl>
</nav>
<nav class="siteFooter-nav" data-type="channels">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a href="#" class="link is-icon-only" title="YouTube"><span class="link-label">YouTube</span><svg class="icon is-youtube-logo">
<use href="../../icons/icons-light.svg#icon--youtube-logo" xlink:href="../../icons/icons-light.svg#icon--youtube-logo"></use>
</svg>
</a>
</li>
<li class="siteFooter-nav-item">
<a href="#" class="link is-icon-only" title="LinkedIn"><span class="link-label">LinkedIn</span><svg class="icon is-linkedin-logo">
<use href="../../icons/icons-light.svg#icon--linkedin-logo" xlink:href="../../icons/icons-light.svg#icon--linkedin-logo"></use>
</svg>
</a>
</li>
</ul>
</nav>
<nav class="siteFooter-nav" data-type="legals">
<ul class="siteFooter-nav-list">
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Cardigan</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Letterpress & Mustache</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Hashtag</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="#">Flexitarian</a>
</li>
<li class="siteFooter-nav-item">
<a class="siteFooter-nav-link" href="/">PSI Software SE</a>
</li>
</ul>
</nav>
<div class="siteFooter-toplink">
<a href="#" title="Nach oben"><svg class="icon is-arrow-top">
<use href="../../icons/icons.svg#icon--arrow-top" xlink:href="../../icons/icons.svg#icon--arrow-top"></use>
</svg>
<span class="siteFooter-toplink-label">Nach oben</span></a>
</div>
</div>
{{render '@siteheader' (contextData '@siteheader' this) merge=true}}
<main class="mainContent">
<div class="pageSection">
{{render '@richtextblock' (contextData '@siteheader' this) merge=true}}
{{render '@richtextblock' (contextData '@siteheader' this) merge=true}}
{{render '@richtextblock' (contextData '@siteheader' this) merge=true}}
</div>
</main>
{{render '@sitefooter' (contextData '@siteheader' this) merge=true}}
{
"note": "The HTML template is hardcoded to speed up rendering. For development, use the files in the _dev directory."
}
@mixin siteHeader-level-states(
$level: 1,
) {
$styles: map.get($siteHeader_level-states, $level);
&-link[data-level="#{$level}"] {
@include state-styles($styles);
@include action-states($styles);
}
&-item[data-level="#{$level}"][data-current="true"] > &-link:not(:hover):not(:focus):not(:focus-visible):not(:active),
&-item[data-level="#{$level}"][data-current-ancestor="true"] > &-link:not(:hover):not(:focus):not(:focus-visible):not(:active) {
@include state-styles($styles, current);
}
}
import {SiteHeader, SiteMenu, SiteMenuDrawer} from "../_siteHeader.script";
const siteMenu = new SiteMenu();
siteMenu.init();
const siteMenuDrawer = new SiteMenuDrawer();
siteMenuDrawer.init();
$siteHeader_underlay_styles: (
background-color: rgba($_PAGE-COLOR, .8),
) !default;
$siteHeader_label_overview: (
default: "Overview",
en: "Overview",
de: "Übersicht",
pl: "przegląd",
);
//***** Desktop Primary *****//
$siteHeader_dropdown_transition-duration: 2 * $_transition-duration--in !default;
$siteHeader_text-decoration-thickness: 2px !default;
$siteHeader_text-decoration-thickness--secondary: 2px !default;
$siteHeader_text-decoration-thickness--mobile: $siteHeader_text-decoration-thickness !default;
$siteHeader_text-decoration-thickness--secondary--mobile: 1.5px !default;
$siteHeader_level-1_styles: (
--decoration-thickness: $siteHeader_text-decoration-thickness,
font-weight: $_font-weight--bold,
background-image: (
linear-gradient($_action-border-color, $_action-border-color),
linear-gradient($_text-color, $_text-color)
),
background-repeat: no-repeat,
background-size: 0 var(--decoration-thickness),
background-position: left 100%,
transition-property: background,
transition-duration: $_transition-duration,
) !default;
$siteHeader_level-1_states: (
default: $siteHeader_level-1_styles,
hover: (
background-size: 100% var(--decoration-thickness),
transition-duration: $_transition-duration--in,
),
focus: $_focus_styles,
current: (
background-size: (
0 var(--decoration-thickness),
100% var(--decoration-thickness),
),
),
expanded: (
background-size: 100% var(--decoration-thickness) !important,
),
) !default;
$siteHeader_level-2_styles: (
font-weight: $_font-weight--bold,
text-size: small,
padding: var(--bp-small, #{$_box_padding--small}) var(--bp, #{$_box_padding}),
transition: $_transition-duration--in,
) !default;
$siteHeader_level-2_states: (
default: $siteHeader_level-2_styles,
hover: (
),
focus: $_focus_styles,
current: (
),
) !default;
$siteHeader_level-3_styles: (
text-size: x-small,
padding: calc(.5 * var(--bp-small, #{$_box_padding--small})) var(--bp, #{$_box_padding}),
transition: $_transition-duration--in,
) !default;
$siteHeader_level-3_states: (
default: $siteHeader_level-3_styles,
hover: (
background-color: $_border-color,
),
focus: $_focus_styles,
current: (
),
) !default;
$siteHeader_dropdown_style: (
background-color: $_backdrop-color,
border-top: $siteHeader_text-decoration-thickness solid $_action-border-color,
box-shadow: var(--bs-small),
left: calc(-1 * var(--bp)),
min-width: calc(100% + 2 * var(--bp, #{$_box_padding})),
margin-top: (-1 * $siteHeader_text-decoration-thickness),
border-bottom-left-radius: var(--br-small),
border-bottom-right-radius: var(--br-small),
overflow: hidden,
) !default;
//***** Desktop Secondary *****//
$siteHeader_link_styles--secondary: map.merge(
$siteHeader_level-1_styles,
(
--decoration-thickness: $siteHeader_text-decoration-thickness--secondary,
font-size: x-small,
line-height: 1.5,
font-weight: $_font-weight,
)
) !default;
$siteHeader_link_states--secondary: (
default: $siteHeader_link_styles--secondary,
hover: (
),
focus: $_focus_styles,
current: (
),
) !default;
$siteHeader_level-2_styles--secondary: (
font-weight: $_font-weight,
text-size: smallest,
) !default;
$siteHeader_dropdown_style--secondary: (
) !default;
//***** Mobile Primary *****//
$siteHeader_level_styles--mobile: (
--decoration-thickness: $siteHeader_text-decoration-thickness--mobile,
color: $_text-color,
) !default;
$siteHeader_level_states--mobile: (
default: $siteHeader_level_styles--mobile,
current: (
--decoration-thickness: $siteHeader_text-decoration-thickness--mobile,
background-image: linear-gradient($_text-color, $_text-color),
background-repeat: repeat-x,
background-size: 100% var(--decoration-thickness),
background-position: 0% 100%,
),
) !default;
$siteHeader_level_styles--secondary--mobile: (
--decoration-thickness: $siteHeader_text-decoration-thickness--secondary--mobile,
text-size: smallest,
color: $_text-color,
) !default;
$siteHeader_level_states--secondary--mobile: (
default: $siteHeader_level_styles--secondary--mobile,
current: (
),
) !default;
//***** Global *****//
$siteHeader_overview_icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="{{color}}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 8H13.5"/><path d="M9 3.5L13.5 8L9 12.5"/></svg>' !default;
$siteHeader_overview_icon_size: 16px !default;
@import "_defaultSiteHeader.helpers";
@import "_defaultSiteHeader.settings";
@import "_defaultSiteHeader.styles";
%siteHeader {
$backdrop-color: $_page-color;
&::after {
// Underlay
content: "";
position: fixed;
top: 0;
left: 50%;
z-index: -99;
transform: translateX(-50%);
display: block;
width: 100vw;
height: 100vh;
@include styles($siteHeader_underlay_styles);
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity $siteHeader_drawer_transition-duration, visibility 0s $siteHeader_drawer_transition-duration;
}
&[data-visible="true"]::after,
&[data-megamenu-visible="true"]::after {
pointer-events: all;
visibility: visible;
opacity: 1;
transition: opacity $siteHeader_drawer_transition-duration;
}
&-link {
font-weight: $_font-weight--semibold;
}
&-nav.is-secondary &-link {
font-weight: $_font-weight;
}
&-item {
&-description {
@include text-size(small);
@include stack-spacing(small);
}
&-figure {
display: none;
@include stack-spacing(small, margin-bottom);
}
&.is-overview {
span::after {
content: map.get($siteHeader_label_overview, default);
display: none;
}
@each $key, $label in $siteHeader_label_overview {
@if $key != "default" {
html[lang="#{$key}"] & span::after {
content: " #{$label}";
}
}
}
}
}
@include only-on-desktop(){
$padding-block: 20px;
$padding-block--secondary: 10px;
$row-gap: $padding-block;
--item-gap: var(--gg);
--item-gap--secondary: 1.25em;
padding-top: $padding-block--secondary;
padding-bottom: $padding-block;
&::after {
// Underlay
transition: opacity $siteHeader_dropdown_transition-duration, visibility 0s $siteHeader_dropdown_transition-duration;
}
&[data-megamenu-visible="true"]::after {
transition: opacity $siteHeader_dropdown_transition-duration;
}
// Legacy support
&-underlay {
height: var(--siteHeader-height);
}
&-underlay + &-spacer {
height: 0;
}
&-home {
position: absolute;
bottom: 0;
padding-bottom: $padding-block;
display: flex;
align-items: flex-end;
margin-bottom: 4px; // Optical alignment
}
&-level[data-level="1"] {
row-gap: $row-gap;
}
&-nav:not(.is-secondary) {
display: flex;
align-items: center;
justify-content: flex-end;
padding-left: calc(#{$siteHeader_logo_width} + var(--item-gap));
}
&-nav.is-secondary {
justify-self: end;
min-height: $siteHeader_icon-size;
display: flex;
align-items: center;
position: relative;
}
&-list[data-level="1"] {
column-gap: var(--item-gap);
row-gap: var(--sp-small);
flex-wrap: wrap;
}
&-nav.is-secondary &-list[data-level="1"] {
column-gap: var(--item-gap--secondary);
}
$dropdown_transition-duration: $_transition-duration--in;
$dropdown_easing-function: sine;
&-nav:not(.is-secondary) &-level[data-level="2"] {
margin-top: $padding-block;
border-top: none;
z-index: -2;
transform: translateY(-20px);
visibility: hidden;
transition: opacity $dropdown_transition-duration easing($dropdown_easing-function, in),
transform $dropdown_transition-duration easing($dropdown_easing-function, in),
visibility 0s $dropdown_transition-duration;
}
&[data-persistent="true"] &-nav:not(.is-secondary) &-link[data-level="1"][aria-expanded="true"] ~ &-level {
transform: translateY(0);
visibility: visible;
transition: opacity $dropdown_transition-duration $dropdown_transition-duration easing($dropdown_easing-function, in),
transform $dropdown_transition-duration $dropdown_transition-duration easing($dropdown_easing-function, in),
visibility 0s 0s;
}
&-item[data-level="2"]:focus-within + &-item &-link {
border-top-color: transparent !important;
}
&-item:not([data-type="megamenu"]) &-item-description {
display: none;
}
&-link[data-level="1"][aria-expanded="true"] {
@include state-styles($siteHeader_level-1_states, expanded);
}
&-nav:not(.is-secondary) &-list[data-level="2"] {
padding-top: var(--bw);
}
&-link[data-level="2"] {
> span {
@include styles($siteHeader_level-1_styles);
}
@include action-states($siteHeader_level-1_states, $descendant: "> span");
}
&-item[data-level="2"] {
&:not(:first-child)::before {
content: "";
display: block;
margin: 0 $padding-block;
border-top: $_border;
}
}
//***** Secondary *****//
$bleeding-block: $padding-block--secondary;
$bleeding-inline: calc(1 * var(--item-gap--secondary));
.is-secondary &-link[data-level="1"] {
&::after { // Expand clickable area
content: "";
display: block;
position: absolute;
inset: (-1 * $bleeding-block) calc(-1 * #{$bleeding-inline});
}
}
&-nav.is-secondary &-level[data-level="2"] {
margin-top: $padding-block--secondary;
}
&-nav.is-secondary &-item[data-level="2"] {
&::before {
border-width: $siteHeader_text-decoration-thickness;
}
}
&-nav.is-secondary &-link[data-level="2"] {
padding: $padding-block--secondary $bleeding-inline;
border-width: $siteHeader_text-decoration-thickness;
}
//***** Icons *****//
&-item[data-icon] > &-link {
column-gap: 0;
&::before { // Icon
box-sizing: content-box;
padding-right: .25em;
background-position: center left;
background-color: $backdrop-color; // Cover underline
}
}
&-item[data-icon="search"] {
width: $siteHeader_icon-size;
}
&-item[data-icon="search"] > &-link {
&::before { // Icon
padding-right: 0;
}
span {
text-indent: 110%;
overflow: hidden;
white-space: nowrap;
}
}
}
@include only-on-small-desktop(){
--item-gap: 2ch;
--item-gap--secondary: 1.5ch;
&-nav:not(.is-secondary) &-item {
@include font-size(small);
line-height: $_font-size * $_line-height;
}
}
@include not-on-desktop(){
$header_padding: var(--pp);
&::after { // Underlay
pointer-events: none !important;
}
&-home {
&::after {
content: "";
@include styles($siteHeader_underlay_styles);
display: block;
position: absolute;
inset: 0;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity $siteHeader_drawer_transition-duration, visibility 0s $siteHeader_drawer_transition-duration;
}
}
&[data-visible="true"] &-home {
&::after {
pointer-events: all;
visibility: visible;
opacity: 1;
transition: opacity $siteHeader_drawer_transition-duration;
}
}
&-item {
padding: var(--bp-small) 0;
&:not(.is-back-link) {
border-bottom: 1px solid $_border-color;
}
&.is-back-link {
padding-top: 0;
padding-bottom: 0;
}
&:first-child {
padding-top: calc(var(--bp-small) + var(--bw));
border-top: var(--bw) solid $_border-color;
}
}
&-item + &-item {
margin-top: 0 !important;
}
&-item:has(> &-item-description) {
position: relative;
%siteHeader-link {
position: static;
&::after {
content: "";
display: block;
position: absolute;
inset: 0;
inset: var(--bp-small) 0;
}
}
}
&-item[data-icon] > &-link {
justify-content: flex-start;
span {
flex-grow: 1;
}
}
&-nav.is-secondary {
@include stack-spacing(0);
}
&-nav.is-secondary &-item:first-child {
margin-top: calc(-1 * var(--bw));
}
& ~ .siteFooter,
.grid-container:has(&) .siteFooter {
padding-bottom: calc(var(--sp-component) + #{$siteHeader_trigger_size});
}
}
}
@import "_defaultSiteHeader.styles--megamenu";
.siteHeader {
&-item {
&-description {
@extend %siteHeader-item-description;
}
&-figure {
@extend %siteHeader-item-figure;
}
}
}
$siteHeader_icon_stroke-width: 1 !default;
$siteHeader_icons: (
language: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="7.5"/><ellipse cx="10" cy="10" rx="3" ry="7.5"/><path d="M2.5 10H17.5"/></svg>',
search: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="8.5" cy="8.5" r="6"/><path d="M13 13L17.5 17.5"/></svg>',
) !default;
$siteHeader_icon-size: 20px !default;
@import "_defaultSiteHeader.settings--desktop";
@import "_defaultSiteHeader.settings--mobile";
@import "_defaultSiteHeader.styles--desktop";
@import "_defaultSiteHeader.styles--mobile";
%siteHeader {
@media print {
display: none;
}
&-link {
text-align: inherit;
}
//***** Icons *****//
&-item[data-icon] > &-link {
display: flex;
column-gap: .25em;
&::before { // Icon
content: "";
display: block;
flex: 0 0 $siteHeader_icon-size;
width: $siteHeader_icon-size;
height: $siteHeader_icon-size;
position: relative;
top: 1px;
background: transparent center center no-repeat;
}
}
@each $icon, $data in $siteHeader_icons {
&-item[data-icon="#{$icon}"] > &-link::before {
background-image: svg-url($data);
}
}
}
.siteHeader {
&-content {
@extend %siteHeader-content;
}
&-drawer {
@extend %siteHeader-drawer;
}
&-item {
@extend %siteHeader-item;
}
&-level {
@extend %siteHeader-level;
}
&-link {
@extend %siteHeader-link;
}
&-list {
@extend %siteHeader-list;
}
&-nav {
@extend %siteHeader-nav;
}
&-trigger {
@extend %siteHeader-trigger;
}
&-underlay { // Deprecated
@extend %siteHeader-underlay;
}
}