Dropdown
This is search component for search the values in the dropdown. If you type unlisted values in the search, you will get no result found.
Search Dropdown
I am buying for
- Myself
- My Org 1
- My Org 2
- No Results Found
HTML
<div class="d-flex">
<div class="input-group flex-nowrap">
<div class="aui-label">
<span class="input-group-text aui-buyfor-txt">I am buying for</span>
</div>
<div id="aui-search-dropdown" class="aui-search-dropdown">
<div class="aui-input-div position-relative">
<input id="aui-select-active" class="w-100 text-truncate form-control" type="text" placeholder="Search" aria-label="Search Organization"/>
<i class="aha-icon-arrow-down pr-2 position-absolute aui-downicon"></i>
</div>
<ul id="aui-select-ul" class="aui-search-ui">
<li tabIndex="0"><span class="aui-search-li">Myself</span></li>
<li tabIndex="0"><span class="aui-search-li">My Org 1</span></li>
<li tabIndex="0"><span class="aui-search-li">My Org 2</span></li>
<li class="aui-noresult-li"><span class="aui-no-result-li">No Results Found</span></li>
</ul>
</div>
</div>
</div>
Profile Dropdown
HTML
<div class="navbar aui-profile d-inline-block">
<button aria-label="user-profile" class="btn btn-text aui-dropdown aha-icon-arrow-down dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="aha-icon-profile-round-icon pr-2"></i>
Alexander Rajan
</button>
<ul class="aui-topright-arrow dropdown-menu p-lg-0 header-dropdown-menu">
<li><a class="dropdown-item py-2 active" href="#">Profile Settings</a></li>
<li><a class="dropdown-item py-2" href="#">Sign Out</a></li>
</ul>
</div>
Cart Dropdown
HTML
<div class="aui-minicart d-flex position-relative">
<a href="#" aria-label="Minicart" class="aui-minicart aha-icon-cart" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="aui-topleft-arrow dropdown-menu aui-mcart-wd p-0">
<div class="aui-emptycart p-4 font-600 d-none">You have no items in your shopping cart.</div>
<div class="aui-mincart-withproduct font-500">
<div class="d-flex aui-cart-secone justify-content-between p-3">
<div class="aui-cart-count"><span class="pr-1">7</span>items in Cart</div>
<div class="aui-cart-subtotal">
<p class="mb-2">Subtotal:</p>
<p class="auisub-price font-600 text-right">$49.50</p>
</div>
</div>
<ul class="aui-cart-prod m-0 p-0">
<li class="aui-min-li p-3">
<div class="aui-pro-name justify-content-between d-flex mb-2">
<p class="aui-wid-70">Advanced Cardiovascular Life Support (ACLS) Pocket Card Set</p>
<p>$15.25</p>
</div>
<div class="aui-pro-num mb-2">
<p>Product Number</p>
<p class="aui-prod-num">15-1007</p>
</div>
<div class="aui-pro-qty justify-content-between d-flex">
<p>Qty: <span>1</span></p>
<a href="" class="aha-icon-trash" aria-label="delete product"></a>
</div>
</li>
<li class="aui-min-li p-3">
<div class="aui-pro-name justify-content-between d-flex mb-2">
<p class="aui-wid-70">IVE PALS Instructor Manual eBook, International English</p>
<p>$34.25</p>
</div>
<div class="aui-pro-num mb-2">
<p>Product Number</p>
<p class="aui-prod-num">15-1007</p>
</div>
<div class="aui-pro-qty justify-content-between d-flex">
<p>Qty: <span>6</span></p>
<a href="" class="aha-icon-trash" aria-label="delete product"></a>
</div>
</li>
</ul>
<div class="d-flex aui-cart-buttons justify-content-between p-3">
<button type="button" ria-label="go to view cart" class="btn btn-link font-600">View Cart</button>
<button type="button" ria-label="go to checkout" class="btn btn-round btn-primary font-500">Checkout</button>
</div>
</div>
</div>
</div>
Country Name and Code Dropdown
HTML
<form>
<div class="form-group row mt-3 mt-4 mb-0">
<label for="phone" class="col-sm-2 col-form-label">Phone Number</label>
<div class="col-sm-10">
<input type="tel" id="phone" class="form-control"/>
</div>
</div>
</form>