Header Search Forms
Various search form controls and components within a navbar.
Search push from top
Quick Links
Featured Item
Apply Now
Create astonishing web sites and pages.
<a class="btn btn-xs u-btn--icon u-btn-text-secondary" href="javascript:;" role="button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="searchPushTop"
data-unfold-type="jquery-slide"
data-unfold-target="#searchPushTop">
<span class="fa fa-search u-btn--icon__inner"></span>
</a>
<div id="searchPushTop" class="u-search-push-top">
<div class="container position-relative">
<div class="u-search-push-top__content mx-auto">
<button type="button" class="close u-search-push-top__close-btn"
aria-haspopup="true"
aria-expanded="false"
aria-controls="searchPushTop"
data-unfold-type="jquery-slide"
data-unfold-target="#searchPushTop">
<span aria-hidden="true">×</span>
</button>
<form class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--no-brd">
<input type="search" class="form-control u-form__input" placeholder="Search Front" aria-label="Search Front">
<div class="input-group-append">
<button type="button" class="btn btn-primary u-btn-primary">Search</button>
</div>
</form>
<div class="row d-none d-md-flex mt-7">
<div class="col-sm-6">
<strong class="d-block mb-2">Quick Links</strong>
<div class="row">
<ul class="col-sm-6 list-unstyled u-list">
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</a>
</li>
<li>
<a class="u-list__link" href="../pages/about-agency.html">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</a>
</li>
<li>
<a class="u-list__link" href="../pages/services-agency.html">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</a>
</li>
</ul>
<ul class="col-sm-6 list-unstyled u-list">
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Profile
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
User Contacts
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Reviews
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Settings
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="rounded u-search-push-top__banner">
<div class="d-flex align-items-center">
<div class="u-search-push-top__banner-container">
<img class="img-fluid u-search-push-top__banner-img" src="../../assets/img/mockups/img3.png" alt="Image Description">
<img class="img-fluid u-search-push-top__banner-img" src="../../assets/img/mockups/img2.png" alt="Image Description">
</div>
<div>
<div class="mb-4">
<strong class="d-block mb-2">Featured Item</strong>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-xs u-btn-success--air transition-3d-hover" href="index.html">Apply Now <span class="fa fa-angle-right ml-2"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
afterOpen: function () {
$(this).find('input[type="search"]').focus();
}
});
});
</script>
Classic search
<div class="position-relative"
<a class="btn btn-xs u-btn--icon u-btn-text-secondary font-size-13" href="javascript:;" role="button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="searchClassic"
data-unfold-target="#searchClassic"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-search u-btn--icon__inner"></span>
</a>
<form id="searchClassic" class="js-focus-state input-group u-form u-search-classic u-unfold--css-animation u-unfold--hidden mt-2">
<input class="form-control u-form__input" type="search" placeholder="Search Front">
<div class="input-group-addon u-search-classic__addon p-0">
<button class="btn btn-primary u-search-classic__addon-btn" type="button">Search</button>
</div>
</form>
</div>