Skip to Content
Content
Markup: templates/output/10-page/layout.html
<a class="u-skip-link btn" href="#content">Skip to Content</a>
<div class="page"><!-- Header: 10.2 -->
<main class="page__content" id="content">Content</main><!-- Footer: 10.3 -->
</div>
Source:
assets/sass/08-page/_page.scss, line 12
Markup: templates/output/10-page/header.html
<div class="sticky-container">
<header class="page__header">
<div class="container">
<div class="header">
<div class="header__left"><a class="c-main-logo" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="30" viewbox="0 0 172.6 34">
<g fill="#3070B3">
<path d="M140.3 0v27.9h-7V0H108v6.1h6.1V34h6.1V6.1h7V34h19.2V6.1h7V34h6.1V6.1h7V34h6.1V0zM90.1 0h.9v34h-.9zM65.3 27.8h1.9v-6.2l3.9 6.2h2v-9.3h-1.9v6.2l-3.9-6.2h-2v9.3zm-9.3 0h1.9v-6.2l3.9 6.2h2v-9.3h-1.9v6.2L58 18.5h-2v9.3zm-10.2-4.6c0 2.7 1.7 4.8 4.6 4.8s4.6-2.1 4.6-4.8-1.7-4.9-4.6-4.9-4.6 2.2-4.6 4.9m2 0c0-1.6.7-3.2 2.5-3.2s2.5 1.6 2.5 3.2-.7 3.1-2.5 3.1-2.5-1.5-2.5-3.1m-10.7 4.6h2v-3.6h2c1 0 1.4.4 1.5 1.4.1.7.1 1.6.3 2.2h2c-.4-.5-.4-1.6-.4-2.2-.1-.9-.4-1.9-1.4-2.2 1-.4 1.5-1.2 1.5-2.3 0-1.4-1.1-2.6-2.7-2.6h-5l.2 9.3zm2.1-7.7h2.2c.9 0 1.4.4 1.4 1.3s-.5 1.3-1.4 1.3h-2.2v-2.6zm-8.9 3.6h2.2c.9 0 1.5.4 1.5 1.3s-.7 1.2-1.5 1.2h-2.2v-2.5zm-2 4.1h4.5c1.7 0 3.3-.8 3.3-2.7 0-1.2-.6-2-1.7-2.4.8-.4 1.3-1 1.3-1.9 0-1.7-1.2-2.3-3-2.3h-4.4v9.3zm2-7.7h1.9c.7 0 1.4.2 1.4 1.1 0 .8-.5 1.1-1.2 1.1h-2.1v-2.2zm-9.4 7.7h6.6v-1.7H23v-7.6h-2c-.1 0-.1 9.3-.1 9.3zm-3.5 0h2v-9.3h-2v9.3zm-8.1 0h7v-1.7h-5v-2.3h4.5v-1.6h-4.5v-2h4.9v-1.7H9.3v9.3zm-9.3 0h2v-4h3.8v4h2v-9.3h-2v3.6H2v-3.6H0v9.3zM65.9 12.4c0 2.3 1.9 3.3 4 3.3 2.5 0 3.9-1.3 3.9-3 0-2.1-2.1-2.5-2.8-2.7-2.3-.6-2.8-.7-2.8-1.4 0-.8.8-1.1 1.4-1.1 1 0 1.8.3 1.8 1.4h2c0-2.1-1.8-3-3.7-3-1.7 0-3.5.9-3.5 2.8 0 1.7 1.4 2.3 2.8 2.6 1.4.4 2.8.5 2.8 1.5 0 .9-1.1 1.2-1.8 1.2-1.1 0-2.1-.5-2.1-1.7l-2 .1zM65 6.2h-2V12c0 1.4-.5 2-1.9 2-1.7 0-1.9-1-1.9-2V6.2h-2V12c0 2.5 1.4 3.7 4 3.7s4-1.2 4-3.7V6.2zm-16.2 9.3h2v-3.3H53c2.3 0 3.2-1.5 3.2-3s-.9-3-3.2-3h-4.2v9.3zm2.1-7.7h1.6c.9 0 1.8.2 1.8 1.4s-.9 1.4-1.8 1.4h-1.6V7.8zm-13.5 7.7h1.9V9l2.3 6.5h1.6l2.3-6.6v6.6h1.9V6.2h-2.9l-2.1 6.4-2.2-6.4h-2.9c.1 0 .1 9.3.1 9.3zm-9.6 0h2.1l.7-2.1h3.5l.7 2.1h2.1l-3.5-9.3h-2.1l-3.5 9.3zm4.5-7 1.2 3.4h-2.4l1.2-3.4zm-4.7.8c-.2-2.1-2-3.3-4-3.3-2.9 0-4.6 2.1-4.6 4.9s1.7 4.8 4.6 4.8c2.3 0 3.9-1.5 4.1-3.8h-2c-.2 1.2-.9 2.1-2.1 2.1-1.8 0-2.5-1.6-2.5-3.1 0-1.6.7-3.2 2.5-3.2 1 0 1.9.7 2 1.6h2z"></path>
</g>
</svg><span class="u-visually-hidden">TUM Campus Heilbronn</span></a>
<nav class="c-main-menu" id="c-main-menu" aria-label="Hauptnavigation">
<div class="c-main-menu__list-wrapper">
<ul class="c-main-menu__list" data-level="1">
<li class="c-main-menu__item c-main-menu__item--has-submenu">
<button class="btn c-main-menu__link" type="button" data-level="1"><span>1 Subpage</span>
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg>
</button>
<div class="c-main-menu__container">
<ul class="container c-main-menu__list" data-level="2">
<li class="c-main-menu__item c-main-menu__item--back">
<button class="btn c-main-menu__link c-main-menu__link--back" type="button" data-level="1">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
</svg><span>1 Subpage</span>
</button>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-1 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-2 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-3 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-4 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-5 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">1-6 Subpage</a>
</li>
</ul>
</div>
</li>
<li class="c-main-menu__item c-main-menu__item--has-submenu">
<button class="btn c-main-menu__link c-main-menu__link--active" type="button" data-level="1"><span>2 Subpage</span>
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg>
</button>
<div class="c-main-menu__container">
<ul class="container c-main-menu__list" data-level="2">
<li class="c-main-menu__item c-main-menu__item--back">
<button class="btn c-main-menu__link c-main-menu__link--back c-main-menu__link--active" type="button" data-level="1">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
</svg><span>2 Subpage</span>
</button>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-1 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link c-main-menu__link--active" data-level="2" href="#">2-2 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-3 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-4 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="2" href="#">2-5 Subpage</a>
</li>
</ul>
</div>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="1" href="#">3 Subpage</a>
</li>
<li class="c-main-menu__item"><a class="btn c-main-menu__link" data-level="1" href="#">4 Subpage</a>
</li>
</ul>
<nav class="c-language-menu" aria-label="Language"><a class="c-language-menu__link c-language-menu__link--active" href="#" aria-current="page">EN</a><a class="c-language-menu__link" href="#">DE</a>
</nav>
</div>
</nav>
</div>
<div class="header__right">
<button class="btn btn--menu" aria-controls="c-main-menu" aria-expanded="false" type="button">
<svg class="menu-open active" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-burger"></use>
</svg>
<svg class="menu-close" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-close"></use>
</svg><span class="u-visually-hidden">Menu</span>
</button>
<nav class="c-language-menu" aria-label="Language"><a class="c-language-menu__link c-language-menu__link--active" href="#" aria-current="page">EN</a><a class="c-language-menu__link" href="#">DE</a>
</nav>
</div>
</div>
</div>
</header>
</div>
Source:
assets/sass/08-page/_page.header.scss, line 14
Markup: templates/output/10-page/footer.html
<footer class="page__footer footer frame-space-before-medium">
<div class="footer__top frame--background frame--grey-light">
<div class="container flex">
<div class="flex__md-6 flex__lg-4 flex__xl-2">
<div class="c-accordion">
<div class="c-accordion__item">
<button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f1" id="c-accordion__id-f1"><span class="c-accordion__item-icon">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg></span><span class="c-accordion__item-title">Campus</span></button>
<div class="c-accordion__item-panel" id="c-accordion__sect-f1" role="region" aria-labelledby="c-accordion__id-f1">
<div>
<ul>
<li><a href="#">Campus Heilbronn</a></li>
<li><a href="#">Student Services</a></li>
<li><a href="#">Explore Heilbronn</a></li>
<li><a href="#">Alumni</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex__md-6 flex__lg-4 flex__xl-2">
<div class="c-accordion">
<div class="c-accordion__item">
<button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f2" id="c-accordion__id-f2"><span class="c-accordion__item-icon">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg></span><span class="c-accordion__item-title">Stories</span></button>
<div class="c-accordion__item-panel" id="c-accordion__sect-f2" role="region" aria-labelledby="c-accordion__id-f2">
<div>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Mindshift Magazine</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex__md-6 flex__lg-4 flex__xl-2">
<div class="c-accordion">
<div class="c-accordion__item">
<button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f3" id="c-accordion__id-f3"><span class="c-accordion__item-icon">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg></span><span class="c-accordion__item-title">Events</span></button>
<div class="c-accordion__item-panel" id="c-accordion__sect-f3" role="region" aria-labelledby="c-accordion__id-f3">
<div>
<ul>
<li><a href="#">Events</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex__md-6 flex__lg-4 flex__xl-2">
<div class="c-accordion">
<div class="c-accordion__item">
<button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f4" id="c-accordion__id-f4"><span class="c-accordion__item-icon">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg></span><span class="c-accordion__item-title">Study Programs</span></button>
<div class="c-accordion__item-panel" id="c-accordion__sect-f4" role="region" aria-labelledby="c-accordion__id-f4">
<div>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Bachelor in Management & Data Science</a></li>
<li><a href="#">Bachelor in Information Engineering</a></li>
<li><a href="#">Master in Management & Digital Technology</a></li>
<li><a href="#">Master in Management</a></li>
<li><a href="#">Master in Management & Innovation</a></li>
<li><a href="#">Going Abroad</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex__md-6 flex__lg-4 flex__xl-2">
<div class="c-accordion">
<div class="c-accordion__item">
<button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f5" id="c-accordion__id-f5"><span class="c-accordion__item-icon">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg></span><span class="c-accordion__item-title">Continuing Education</span></button>
<div class="c-accordion__item-panel" id="c-accordion__sect-f5" role="region" aria-labelledby="c-accordion__id-f5">
<div>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Business Design & Innovation</a></li>
<li><a href="#">Design Your Business</a></li>
<li><a href="#">Mastering Digital Transformation</a></li>
<li><a href="#">Sustainable Investing</a></li>
<li><a href="#">Healthy Leadership</a></li>
<li><a href="#">Summer School TUM - HEC</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex__md-6 flex__lg-4 flex__xl-2">
<div class="c-accordion">
<div class="c-accordion__item">
<button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f6" id="c-accordion__id-f6"><span class="c-accordion__item-icon">
<svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
</svg></span><span class="c-accordion__item-title">Research</span></button>
<div class="c-accordion__item-panel" id="c-accordion__sect-f6" role="region" aria-labelledby="c-accordion__id-f6">
<div>
<ul>
<li><a href="#">Professors</a></li>
<li><a href="#">Center for Digital Transformation</a></li>
<li><a href="#">Global Center for Family Enterprise</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="container flex">
<div class="footer__social-media flex--order-lg-1"><a href="https://www.instagram.com/tum.campus.hn/" target="_blank">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-instagram"></use>
</svg><span class="u-visually-hidden">Instagram</span></a><a href="https://www.facebook.com/TUM.Campus.Heilbronn" target="_blank">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-facebook"></use>
</svg><span class="u-visually-hidden">Facebook</span></a><a href="https://www.tiktok.com/@tum.campus.hn" target="_blank">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-tiktok"></use>
</svg><span class="u-visually-hidden">TikTok</span></a><a href="https://www.youtube.com/@TUM.Campus.Heilbronn" target="_blank">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-youtube"></use>
</svg><span class="u-visually-hidden">YouTube</span></a><a href="https://www.linkedin.com/company/tum-campus-heilbronn/" target="_blank">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-linkedin"></use>
</svg><span class="u-visually-hidden">Linkedin</span></a><a href="https://www.xing.com/pages/tum-campus-heilbronn" target="_blank">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-xing"></use>
</svg><span class="u-visually-hidden">Xing</span></a></div>
<div class="footer__copyright"><a href="#">Downloads</a><a href="#">Imprint</a><a href="#">Privacy Policy</a></div>
</div>
</div>
</footer>
Source:
assets/sass/08-page/_page.footer.scss, line 9