Hero Search Vertical

A Hero Search component represents a search form with a special styling. It contains form elements styled as Floating Placeholder.

---

Default Style

Default .h-search-v looks like this:

Copy
<div class="h-search-v">
    <form action="#" class="hero-search-form">
        <div class="search-item"><h3>Rent a car</h3></div>
        <div class="search-item">
            <i class="icon icon-pickup-location"></i>
            <div class="fltp">
                <input type="text" value="" required>
                <label class="placeholder" data-big-placeholder="Pickup location" data-little-placeholder="Pickup location"></label>
            </div>
        </div>
        <div class="search-item">
            <i class="icon icon-return-location"></i>
            <div class="fltp">
                <input type="text" value="" required>
                <label class="placeholder" data-big-placeholder="Return location" data-little-placeholder="Return location"></label>
            </div>
        </div>
        <div class="search-item">
            <div class="checkbox-wrapper">
                <input type="checkbox" id="checkbox11">
                <label for="checkbox11">Return car to pickup location</label>
            </div>
        </div>
        <div class="search-item">
            <i class="icon icon-pickup-date"></i>
            <div class="fltp calendar-sq" id="rangestart">
                    <input type="text" class="filter" value="" required placeholder="enter date">
                    <label class="placeholder"  data-big-placeholder="Pickup date" data-little-placeholder="Pickup date"></label>
            </div>

            <i class="icon icon-return-date"></i>
            <div class="fltp calendar-sq" id="rangeend">
                <input type="text" class="filter" value="" required placeholder="enter date">
                <label class="placeholder"  data-big-placeholder="Return date" data-little-placeholder="Return date"></label>
            </div>
        </div>
        <div class="search-item">
            <button class="button-sq text-transform-uppercase-sq font-weight-extrabold-sq fullwidth-sq">Find a car
                <i class="icon icon-search"></i>
            </button>
        </div>
    </form>
</div>

---

Shadow

Hero Search Vertical gets a shadow when using .shadow-sq class.

Copy
<div class="h-search-v shadow-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

---

Width Option

By Default Hero Search Vertical has 100% width.
There are two options to make it a smaller width: .boxed-sq or narrow-sq.

Boxed

Adding .boxed-sq class.

Copy
<div class="h-search-v boxed-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

Narrow

Adding .narrow-sq class.

Copy
<div class="h-search-v narrow-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

---

Color Option

Ading .colored-sq class to Hero Search Vertical will have a background with color from @linkColor Less variable.

You can animate this sample adding .animate-sq class. animate sample

Copy
<div class="h-search-v narrow-sq shadow-sq colored-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

As you can observe, we can apply options in the same time from different categories to this module.

---