Homestage (JS)
Homestage with search:
The stage includes the searchbox element thats also included in the default search
Image size:
Mobile: 960 x 720 pixels
Desktop: 1920 x 960 pixels
#01 Homepage stage
Die Nummer 1 für
Neubau-Immobilien
Finde dein neues Zuhause
<section class="nbk-section nbk-section--outer-spacing-bottom">
<div class="nbk-home-stage">
<header class="nbk-home-stage__header">
<div class="row">
<div class="col-12">
<h1 class="nbk-home-stage__title">Die Nummer 1 für<br/>Neubau-Immobilien</h1>
<i class="nbk-home-stage__subtitle">Finde dein neues Zuhause</i>
</div>
</div>
</header>
<div class="nbk-home-stage__content">
<figure class="nbk-home-stage__figure">
<img class="nbk-home-stage__image lazy" data-sizes="(max-width: 3840px) 100vw, 3840px"
data-srcset="
/assets/home-stage/home-stage,w_200.jpg 200w,
/assets/home-stage/home-stage,w_1769.jpg 1769w,
/assets/home-stage/home-stage,w_2534.jpg 2534w,
/assets/home-stage/home-stage,w_3408.jpg 3408w,
/assets/home-stage/home-stage,w_3840.jpg 3840w"
data-src="/assets/home-stage/home-stage,w_3840.jpg" alt="home-stage"/>
</figure>
<div data-nbk-home-stage-scroll-marker></div>
<div class="nbk-home-stage__search-wrapper" data-nbk-home-stage-search-box>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-auto">
<div class="nbk-home-stage__search">
<div class="nbk-search-box " id="nbkSearchBox" data-nbk-search-box >
<div class="nbk-search-box__controls nbk-search-box__controls--larger ">
<input type="text"
class="form-control nbk-search-box__input nbk-search-box__input--larger "
autocomplete="off"
placeholder=" Suche nach Ort, PLZ oder Stadtteil "
id="searchBox"
data-nbk-search-box-input
/>
<button class="btn btn-blank-gray btn--icon-only nbk-search-box__delete" data-nbk-search-box-clear-button>
<span class="btn__icon btn__icon--fill">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z"></path>
</svg>
</span>
</button>
<span class="nbk-search-box__icon">
<svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.6133 21.72L19.08 17.2C20.5427 15.3366 21.3363 13.0355 21.3333 10.6667C21.3333 8.557 20.7077 6.49471 19.5357 4.74059C18.3636 2.98646 16.6977 1.61929 14.7486 0.811956C12.7996 0.00462166 10.6548 -0.206614 8.58571 0.204962C6.51658 0.616538 4.61596 1.63244 3.1242 3.1242C1.63244 4.61596 0.616538 6.51658 0.204962 8.58571C-0.206614 10.6548 0.00462166 12.7996 0.811956 14.7486C1.61929 16.6977 2.98646 18.3636 4.74059 19.5357C6.49471 20.7077 8.557 21.3333 10.6667 21.3333C13.0355 21.3363 15.3366 20.5427 17.2 19.08L21.72 23.6133C21.844 23.7383 21.9914 23.8375 22.1539 23.9052C22.3164 23.9729 22.4907 24.0077 22.6667 24.0077C22.8427 24.0077 23.017 23.9729 23.1794 23.9052C23.3419 23.8375 23.4894 23.7383 23.6133 23.6133C23.7383 23.4894 23.8375 23.3419 23.9052 23.1794C23.9729 23.017 24.0077 22.8427 24.0077 22.6667C24.0077 22.4907 23.9729 22.3164 23.9052 22.1539C23.8375 21.9914 23.7383 21.844 23.6133 21.72ZM2.66667 10.6667C2.66667 9.08442 3.13586 7.5377 4.01491 6.22211C4.89397 4.90652 6.1434 3.88114 7.6052 3.27564C9.06701 2.67013 10.6755 2.51171 12.2274 2.82039C13.7792 3.12907 15.2047 3.891 16.3235 5.00982C17.4423 6.12864 18.2043 7.5541 18.513 9.10595C18.8216 10.6578 18.6632 12.2663 18.0577 13.7281C17.4522 15.1899 16.4268 16.4394 15.1112 17.3184C13.7956 18.1975 12.2489 18.6667 10.6667 18.6667C8.54494 18.6667 6.51011 17.8238 5.00982 16.3235C3.50953 14.8232 2.66667 12.7884 2.66667 10.6667Z"/>
</svg>
</span>
</div>
<div class="nbk-search-box__autocomplete ">
<ul class="nbk-search-autocomplete-list">
<li class="nbk-search-autocomplete-list__category">
Region
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen
</div>
<small class="nbk-search-autocomplete-list__hits">
225 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__category">
Orte
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen
</div>
<small class="nbk-search-autocomplete-list__hits">
112 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
Bruck <b>Mü</b>hl
</div>
<small class="nbk-search-autocomplete-list__hits">
225 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__category">
Stadtteile
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen Hadern
</div>
<small class="nbk-search-autocomplete-list__hits">
4 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen Passing
</div>
<small class="nbk-search-autocomplete-list__hits">
129 Treffer
</small>
</a>
</li>
</ul> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> #02 Homepage with active autocomplete
To show the search dropdown add the class .active to the element with the attribute data-nbk-search-box.
Die Nummer 1 für
Neubau-Immobilien
Finde dein neues Zuhause
<section class="nbk-section nbk-section--outer-spacing-bottom">
<div class="nbk-home-stage">
<header class="nbk-home-stage__header">
<div class="row">
<div class="col-12">
<h1 class="nbk-home-stage__title">Die Nummer 1 für<br/>Neubau-Immobilien</h1>
<i class="nbk-home-stage__subtitle">Finde dein neues Zuhause</i>
</div>
</div>
</header>
<div class="nbk-home-stage__content">
<figure class="nbk-home-stage__figure">
<img class="nbk-home-stage__image lazy" data-sizes="(max-width: 3840px) 100vw, 3840px"
data-srcset="
/assets/home-stage/home-stage,w_200.jpg 200w,
/assets/home-stage/home-stage,w_1769.jpg 1769w,
/assets/home-stage/home-stage,w_2534.jpg 2534w,
/assets/home-stage/home-stage,w_3408.jpg 3408w,
/assets/home-stage/home-stage,w_3840.jpg 3840w"
data-src="/assets/home-stage/home-stage,w_3840.jpg" alt="home-stage"/>
</figure>
<div data-nbk-home-stage-scroll-marker></div>
<div class="nbk-home-stage__search-wrapper" data-nbk-home-stage-search-box>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-auto">
<div class="nbk-home-stage__search">
<div class="nbk-search-box active " id="nbkSearchBox" data-nbk-search-box >
<div class="nbk-search-box__controls nbk-search-box__controls--larger ">
<input type="text"
class="form-control nbk-search-box__input nbk-search-box__input--larger "
autocomplete="off"
placeholder=" Suche nach Ort, PLZ oder Stadtteil "
id="searchBox"
data-nbk-search-box-input
/>
<button class="btn btn-blank-gray btn--icon-only nbk-search-box__delete" data-nbk-search-box-clear-button>
<span class="btn__icon btn__icon--fill">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z"></path>
</svg>
</span>
</button>
<span class="nbk-search-box__icon">
<svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.6133 21.72L19.08 17.2C20.5427 15.3366 21.3363 13.0355 21.3333 10.6667C21.3333 8.557 20.7077 6.49471 19.5357 4.74059C18.3636 2.98646 16.6977 1.61929 14.7486 0.811956C12.7996 0.00462166 10.6548 -0.206614 8.58571 0.204962C6.51658 0.616538 4.61596 1.63244 3.1242 3.1242C1.63244 4.61596 0.616538 6.51658 0.204962 8.58571C-0.206614 10.6548 0.00462166 12.7996 0.811956 14.7486C1.61929 16.6977 2.98646 18.3636 4.74059 19.5357C6.49471 20.7077 8.557 21.3333 10.6667 21.3333C13.0355 21.3363 15.3366 20.5427 17.2 19.08L21.72 23.6133C21.844 23.7383 21.9914 23.8375 22.1539 23.9052C22.3164 23.9729 22.4907 24.0077 22.6667 24.0077C22.8427 24.0077 23.017 23.9729 23.1794 23.9052C23.3419 23.8375 23.4894 23.7383 23.6133 23.6133C23.7383 23.4894 23.8375 23.3419 23.9052 23.1794C23.9729 23.017 24.0077 22.8427 24.0077 22.6667C24.0077 22.4907 23.9729 22.3164 23.9052 22.1539C23.8375 21.9914 23.7383 21.844 23.6133 21.72ZM2.66667 10.6667C2.66667 9.08442 3.13586 7.5377 4.01491 6.22211C4.89397 4.90652 6.1434 3.88114 7.6052 3.27564C9.06701 2.67013 10.6755 2.51171 12.2274 2.82039C13.7792 3.12907 15.2047 3.891 16.3235 5.00982C17.4423 6.12864 18.2043 7.5541 18.513 9.10595C18.8216 10.6578 18.6632 12.2663 18.0577 13.7281C17.4522 15.1899 16.4268 16.4394 15.1112 17.3184C13.7956 18.1975 12.2489 18.6667 10.6667 18.6667C8.54494 18.6667 6.51011 17.8238 5.00982 16.3235C3.50953 14.8232 2.66667 12.7884 2.66667 10.6667Z"/>
</svg>
</span>
</div>
<div class="nbk-search-box__autocomplete ">
<ul class="nbk-search-autocomplete-list">
<li class="nbk-search-autocomplete-list__category">
Region
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen
</div>
<small class="nbk-search-autocomplete-list__hits">
225 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__category">
Orte
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen
</div>
<small class="nbk-search-autocomplete-list__hits">
112 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
Bruck <b>Mü</b>hl
</div>
<small class="nbk-search-autocomplete-list__hits">
225 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__category">
Stadtteile
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen Hadern
</div>
<small class="nbk-search-autocomplete-list__hits">
4 Treffer
</small>
</a>
</li>
<li class="nbk-search-autocomplete-list__item">
<a href="#" class="nbk-search-autocomplete-list__link">
<div class="nbk-search-autocomplete-list__label">
<b>Mün</b>chen Passing
</div>
<small class="nbk-search-autocomplete-list__hits">
129 Treffer
</small>
</a>
</li>
</ul> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>