Web Design Guide
2024-10-28 08:44:01 | 2.0.0
<header class="header">
<div class="header__wrapper">
<div class="header__head">
<a class="header__logo logo " href="#">
<img class="logo__image" src="../../images/rehau-logo.svg" alt="">
</a>
<a class="header__toggle" href="#" data-action="toggle-nav">
<span class="header__hamburger"></span>
</a>
</div>
<div class="header__body">
<a class="header__logo logo -vanishing" href="#">
<img class="logo__image" src="../../images/rehau-logo.svg" alt="">
</a>
<nav class="header__meta-nav meta-nav ">
<div class="meta-nav__lang-nav lang-nav ">
<span class="lang-nav__selection -next">
<span class="lang-nav__text">Deutsch</span>
</span>
<ul class="lang-nav__list">
<li class="lang-nav__item ">
<a class="lang-nav__link" href="#">
<span class="lang-nav__text">English</span>
</a>
</li>
<li class="lang-nav__item ">
<a class="lang-nav__link" href="#">
<span class="lang-nav__text">Français</span>
</a>
</li>
<li class="lang-nav__item ">
<a class="lang-nav__link" href="#">
<span class="lang-nav__text">Netherlands</span>
</a>
</li>
</ul>
</div>
<ul class="meta-nav__list">
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Karriere</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Unternehmen</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Downloads</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Log in</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Händlersuche</a>
</li>
</ul>
</nav>
<div class="header__search-bar search-bar -vanishing">
<input class="search-bar__input" type="text" placeholder="Search..." />
<button class="search-bar__btn"></button>
</div>
<nav class="header__main-nav main-nav ">
<a class="main-nav__back -prev -hide" href="#">Main menu</a>
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Privatkunden</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Handwerker und Bauunternehmer</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -active -next" href="#">Architekten und Planer</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Industrie</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Investoren und öffentliche Bauherren</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Handel</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
<div class="header__foot">
<div class="header__search-bar search-bar ">
<input class="search-bar__input" type="text" placeholder="Search..." />
<button class="search-bar__btn"></button>
</div>
</div>
</div>
</header>
<div class="container -st-small -sb-large -bg-gray -cs-dark">
<p>Double row example</p>
<h1>Some sample formular</h1>
<form class="grid-x grid-margin-x grid-margin-y" action="#" method="post" novalidate onsubmit="return false;">
<div class="cell medium-6">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell">
<label for="salutation" class=" label ">Salutation</label>
<div class="choice-group -horizontally">
<label class=" choice ">
<input type="radio" name="salutation">
<span>Ms Some Sample Formular</span>
</label>
<label class=" choice ">
<input type="radio" name="salutation">
<span>Mr Some Sample Formular</span>
</label>
</div>
</div>
<div class="cell">
<label for="firstName" class=" label -required">Firstname</label>
<input class=" input -required" id="firstName" name="text" type="text">
</div>
<div class="cell">
<label for="email" class=" label -required">E-mail address</label>
<input class=" input -required" id="email" name="text" type="email">
</div>
<div class="cell">
<label for="company" class=" label -required">Company</label>
<input class=" input -required" id="company" name="text" type="text">
</div>
<div class="cell">
<label for="branch" class=" label ">Area</label>
<div class=" select ">
<select id="">
<option value="Please select">
Please select
</option>
<option value="value1">
Water
</option>
<option value="value2">
Furniture
</option>
</select>
</div>
</div>
<div class="cell medium-3">
<label for="zip" class=" label -required">ZIP</label>
<input class=" input -required" id="zip" name="text" type="text">
</div>
<div class="cell auto">
<label for="city" class=" label -required">City</label>
<input class=" input -required -invalid" id="city" name="text" type="text">
<p class=" message -error">This is an inline error message</p>
</div>
</div>
</div>
<div class="cell medium-6">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell">
<label for="title" class=" label -required">Title</label>
<input class=" input -required" id="title" name="text" type="text">
</div>
<div class="cell">
<label for="lastName" class=" label -required">Name</label>
<input class=" input -required" id="lastName" name="text" type="text">
</div>
<div class="cell">
<label for="tel" class=" label -required">Phone number</label>
<input class=" input -required" id="tel" name="text" type="tel">
</div>
<div class="cell">
<label for="customerId" class=" label ">Customer ID</label>
<input class=" input " id="customerId" name="text" type="number">
</div>
<div class="cell auto">
<label for="street" class=" label -required">Street</label>
<input class=" input -required" id="street" name="text" type="text">
</div>
<div class="cell medium-4 pre-large-3">
<label for="street_number" class=" label -required">Number</label>
<input class=" input -required" id="street_number" name="text" type="text">
</div>
<div class="cell">
<label for="adressAddition" class=" label ">Additional address</label>
<input class=" input " id="adressAddition" name="text" type="text">
</div>
</div>
</div>
<div class="cell ">
<label for="textarea" class=" label ">Your message</label>
<textarea class=" textarea " id="textarea" name="textarea" rows="3">text
</textarea>
</div>
<div class="cell">
<label class=" choice -required">
<input type="checkbox" name="checkbox">
<span>Ja, ich möchte, dass mir REHAU aktuelle Informationen per E-Mail zu dem von mir ausgewählten Themenbereich zusendet (wenn sie bereits in unserem Informationstool eingetragen sind, müssen Sie hier nichts mehr anfordern).</span>
</label>
</div>
<div class="cell">
<button class=" btn -cta -chevron-right" href="#"> Send
</button>
</div>
</form>
</div>
<div class=" go-top -bg-gray-lighter">
<a href="#" class="go-top__link"></a>
</div>
<div class=" extra -bg-primary">
<div class="extra__container container">
<div class=" claim ">
<p class="claim__text">Engineering progress</p>
<p class="claim__text">Enhancing lives</p>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__main">
<div class="container">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell medium-4 large-3">
<p class="h4 footer__title">Unsere Services</p>
<ul class=" list ">
<li class="list__item"><a href="#">Materialinformationen</a>
</li>
<li class="list__item"><a href="#">Liefer-& Zahlungsbedingungen</a>
</li>
<li class="list__item"><a href="#">Gelangensbestätigung</a>
</li>
<li class="list__item"><a href="#">Downloads</a>
</li>
<li class="list__item"><a href="#">Händlersuche</a>
</li>
</ul>
</div>
<div class="cell pre-medium-auto">
<div class="footer__contact contact ">
<p class="h4 contact__title">REHAU AG + CO | Kontakt</p>
<div class="contact__list">
<div class="contact__address address ">
<p class="address__info">
<a class="address__link" href="">Rheniumhaus<br>Otto-Hahn-Straße 2<br>95111 Rehau | DE</a>
</p>
<p class="address__info">
<a class="address__link" href="tel:+499283770">+ 49 9283 77-0</a>
</p>
<p class="address__info">
<a class="address__link" href="mailto:info@rehau.com?subject=feedback">info@rehau.com</a>
</p>
</div>
<div class="contact__address address ">
<p class="address__info">
<a class="address__link" href="">Eltersdorf<br>Ytterbium 4<br>91058 Erlangen | DE</a>
</p>
<p class="address__info">
<a class="address__link" href="tel:+4991319250">+ 49 9131 92-50</a>
</p>
<p class="address__info">
<a class="address__link" href="mailto:erlangen@rehau.com?subject=feedback">erlangen@rehau.com</a>
</p>
</div>
</div>
</div>
</div>
<div class="footer__cell cell large-shrink">
<div class="footer__social-media social-media ">
<ul class="social-media__list list -social-icons">
<li class="list__item"><a href="#"><i class='icon -facebook'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -twitter'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -linkedin'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -google'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -xing'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -youtube'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -instagram'></i></a>
</li>
<li class="list__item"><a href="#"><i class='icon -pinterest'></i></a>
</li>
</ul>
<ul class="social-media__list list -social-buttons">
<li class="list__item"><a href="#"><img src="/images/app-store.png"></a>
</li>
<li class="list__item"><a href="#"><img src="/images/google-play.png"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer__nav">
<div class="container">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell medium-auto">
<ul class="footer__list list -horizontal">
<li class="list__item"><a href="#">Unternehmen</a>
</li>
<li class="list__item"><a href="#">Karierre</a>
</li>
<li class="list__item"><a href="#">Presse</a>
</li>
<li class="list__item"><a href="#">Downloads</a>
</li>
<li class="list__item"><a href="#">Unternehmensmagazin</a>
</li>
<li class="list__item"><a href="#">Impressum</a>
</li>
<li class="list__item"><a href="#">Datenschutz</a>
</li>
</ul>
</div>
<div class="cell medium-shrink">
<div class="footer__country-selector select -country-selector">
<select>
<option value="Germany">
Germany
</option>
<option value="Lithuania">
Lithuania
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</footer>
{{render '@organisms-header'}}
<div class="container -st-small -sb-large -bg-gray -cs-dark">
<p>Double row example</p>
<h1>Some sample formular</h1>
<form class="grid-x grid-margin-x grid-margin-y" action="#" method="post" novalidate onsubmit="return false;">
<div class="cell medium-6">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell">
{{#salutation}}
{{render '@atoms-label' label merge=true}}
<div class="choice-group -horizontally">
{{render '@atoms-choice--radio' ms merge=true}}
{{render '@atoms-choice--radio' mr merge=true}}
</div>
{{/salutation}}
</div>
<div class="cell">
{{#firstname}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/firstname}}
</div>
<div class="cell">
{{#email}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/email}}
</div>
<div class="cell">
{{#company}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/company}}
</div>
<div class="cell">
{{#branch}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-select' select merge=true}}
{{/branch}}
</div>
<div class="cell medium-3">
{{#zip}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/zip}}
</div>
<div class="cell auto">
{{#city}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{render '@atoms-message' message merge=true}}
{{/city}}
</div>
</div>
</div>
<div class="cell medium-6">
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell">
{{#title}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/title}}
</div>
<div class="cell">
{{#lastname}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/lastname}}
</div>
<div class="cell">
{{#tel}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/tel}}
</div>
<div class="cell">
{{#customerId}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/customerId}}
</div>
<div class="cell auto">
{{#street}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/street}}
</div>
<div class="cell medium-4 pre-large-3">
{{#housenumber}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/housenumber}}
</div>
<div class="cell">
{{#addressAddition}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-input' input merge=true}}
{{/addressAddition}}
</div>
</div>
</div>
<div class="cell ">
{{#textarea}}
{{render '@atoms-label' label merge=true}}
{{render '@atoms-textarea' textarea merge=true}}
{{/textarea}}
</div>
<div class="cell">
{{render '@atoms-choice' optin merge=true}}
</div>
<div class="cell">
{{render '@atoms-button--cta' submit-input merge=true}}
</div>
</form>
</div>
{{render '@atoms-go-top'}}
{{render '@molecules-extra' extra merge=true}}
{{render '@organisms-footer'}}
{
"salutation": {
"label": {
"for": "salutation",
"text": "Salutation"
},
"ms": {
"id": "ms",
"name": "salutation",
"label": "Ms Some Sample Formular"
},
"mr": {
"id": "mr",
"name": "salutation",
"label": "Mr Some Sample Formular"
}
},
"title": {
"label": {
"for": "title",
"text": "Title",
"modifiers": "-required"
},
"input": {
"id": "title",
"type": "text",
"modifiers": "-required"
}
},
"firstname": {
"label": {
"for": "firstName",
"text": "Firstname",
"modifiers": "-required"
},
"input": {
"id": "firstName",
"type": "text",
"modifiers": "-required"
}
},
"lastname": {
"label": {
"for": "lastName",
"text": "Name",
"modifiers": "-required"
},
"input": {
"id": "lastName",
"type": "text",
"modifiers": "-required"
}
},
"company": {
"label": {
"for": "company",
"text": "Company",
"modifiers": "-required"
},
"input": {
"id": "company",
"type": "text",
"modifiers": "-required"
}
},
"street": {
"label": {
"for": "street",
"text": "Street",
"modifiers": "-required"
},
"input": {
"id": "street",
"type": "text",
"modifiers": "-required"
}
},
"housenumber": {
"label": {
"for": "street_number",
"text": "Number",
"modifiers": "-required"
},
"input": {
"id": "street_number",
"type": "text",
"modifiers": "-required"
}
},
"addressAddition": {
"label": {
"for": "adressAddition",
"text": "Additional address"
},
"input": {
"id": "adressAddition",
"type": "text"
}
},
"zip": {
"label": {
"for": "zip",
"text": "ZIP",
"modifiers": "-required"
},
"input": {
"id": "zip",
"type": "text",
"modifiers": "-required"
}
},
"city": {
"label": {
"for": "city",
"text": "City",
"modifiers": "-required"
},
"input": {
"id": "city",
"type": "text",
"modifiers": "-required -invalid"
},
"message": {
"text": "This is an inline error message",
"modifiers": "-error"
}
},
"email": {
"label": {
"for": "email",
"text": "E-mail address",
"modifiers": "-required"
},
"input": {
"id": "email",
"type": "email",
"modifiers": "-required"
}
},
"tel": {
"label": {
"for": "tel",
"text": "Phone number",
"modifiers": "-required"
},
"input": {
"id": "tel",
"type": "tel",
"modifiers": "-required"
}
},
"customerId": {
"label": {
"for": "customerId",
"text": "Customer ID"
},
"input": {
"id": "customerId",
"type": "number"
}
},
"optin": {
"name": "checkbox",
"label": "Ja, ich möchte, dass mir REHAU aktuelle Informationen per E-Mail zu dem von mir ausgewählten Themenbereich zusendet (wenn sie bereits in unserem Informationstool eingetragen sind, müssen Sie hier nichts mehr anfordern).",
"modifiers": "-required"
},
"textarea": {
"label": {
"for": "textarea",
"text": "Your message"
},
"textarea": {
"id": "textarea",
"name": "textarea",
"value": "text",
"rows": 3
}
},
"branch": {
"label": {
"for": "branch",
"text": "Area"
},
"select": {
"id": "branch",
"options": [
{
"value": "Please select",
"label": "Please select"
},
{
"value": "value1",
"label": "Water"
},
{
"value": "value2",
"label": "Furniture"
}
]
}
},
"submit-input": {
"tag": "button",
"title": "Send"
}
}
-
Content:
/* Formular Page */ - URL: /components/raw/templates-formular-page/_formular-page.scss
- Filesystem Path: src/components/02-ui-components/04-templates/03-formular-page/_formular-page.scss
- Size: 20 Bytes
- Handle: @templates-formular-page--gray
- Variants (5): Default , Black , Darker , Gray , Secondary
- Preview:
- Filesystem Path: src/components/02-ui-components/04-templates/03-formular-page/formular-page--gray.hbs
- References (12): @organisms-header, @atoms-label, @atoms-choice--radio, @atoms-input, @atoms-select, @atoms-message, @atoms-textarea, @atoms-choice, @atoms-button--cta, @atoms-go-top, @molecules-extra, @organisms-footer
There are no notes for this item.