Widget examples
Various forms of information to the right or left side of a page.
Information widget with gray background #
<div class="card p-4 widget infomation border-0 bg-gray-06 rounded-0 mb-6">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i
class="fas fa-info-circle"></i>
</span>
<span> Information</span>
</div>
<div class="card-body px-0 pt-3 pb-0">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<span class="item-icon mr-3"><i
class="fal fa-map-marker-alt"></i></span>
<span class="card-text">125 Mountain St, Brooklyn, NY
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<span class="item-icon mr-3">
<svg class="icon icon-telephone">
<use xlink:href="#icon-telephone"></use>
</svg>
</span>
<span class="card-text">(301) 453-8688</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<span class="item-icon mr-3"><i class="fal fa-globe"></i>
</span>
<span class="card-text"><a
href="#">www.thaistaste.com</a>
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0 pb-2 pt-5">
<div class="social-icon origin-color si-square">
<ul class="list-inline text-center">
<li class="list-inline-item si-facebook">
<a target="_blank" title="Facebook"
href="#">
<i class="fab fa-facebook-f">
</i>
<span>Facebook</span>
</a>
</li>
<li class="list-inline-item si-twitter">
<a target="_blank" title="Twitter" href="#">
<i class="fab fa-twitter">
</i>
<span>Twitter</span>
</a>
</li>
<li class="list-inline-item si-google">
<a target="_blank" title="Google plus"
href="#">
<svg class="icon icon-google-plus-symbol">
<use xlink:href="#icon-google-plus-symbol"></use>
</svg>
<span>Google plus</span>
</a>
</li>
<li class="list-inline-item si-tumblr">
<a target="_blank" title="Tumblr" href="#">
<i class="fab fa-tumblr"></i>
<span>Tumblr</span>
</a>
</li>
<li class="list-inline-item si-rss">
<a target="_blank" title="RSS" href="#">
<i class="fas fa-rss"></i>
<span>RSS</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>Schedule widget with gray background #
<div class="card p-4 widget border-0 schedule bg-gray-06 mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<div class="text-dark font-weight-semibold">Tuesday
</div>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<div class="text-dark font-weight-semibold">Wednesday
</div>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<div class="text-dark font-weight-semibold">Thursday
</div>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<div class="text-dark font-weight-semibold">Saturday
</div>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div>Price status widget with gray background #
<div class="card p-4 widget border-0 price-status bg-gray-06 mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3">
<svg class="icon icon-dollar-sign">
<use xlink:href="#icon-dollar-sign"></use>
</svg>
</span>
<span>Price status</span>
</div>
<div class="card-body px-0 pb-0">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="font-weight-semibold text-dark mb-0">Status</label>
<span class="text-green ml-auto">Ultra High End</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="font-weight-semibold text-dark mb-0">Price Range
</label>
<span class="text-danger font-weight-semibold font-size-md ml-auto">
$10.00 - $55.00
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="font-italic mb-0">Own or work
here?</label>
<a href="#claim-popup"
class="font-weight-semibold font-size-md ml-auto text-decoration-none"
data-gtf-mfp="true"
data-mfp-options='{"type":"inline"}'>Claim Now!</a>
</li>
</ul>
</div>
</div>Additional details widget with gray background #
<div class="card p-4 widget border-0 addition-detail bg-gray-06 mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span>additional details</span>
</div>
<div class="card-body px-0 pb-0">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Accept Card Pay</label>
<span class="font-weight-semibold text-danger ml-auto">No
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Accept Bitcoin Pay</label>
<span class="font-weight-semibold text-green ml-auto">Yes
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Car Parking</label>
<span class="font-weight-semibold text-green ml-auto">Yes
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Good for Kids</label>
<span class="font-weight-semibold text-green ml-auto">Yes
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Good for Groups</label>
<span class="font-weight-semibold text-green ml-auto">Yes
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Smoking</label>
<span class="font-weight-semibold text-danger ml-auto">No
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0 pt-3">
<a href="#">Show More <span class="d-inline-block ml-2"><i
class="fal fa-chevron-down"></i></span>
</a>
</li>
</ul>
</div>
</div>Contact widget with gray background #
Contact me
<div class="card p-4 widget border-0 contact bg-gray-06 mb-6 rounded-0">
<div class="card-title mb-0 border-bottom pb-2 pt-1">
<div class="media">
<div class="image mr-3"><img
src="../images/listing/jobs-testimonial-1.png"
alt="Contact me" class="rounded-circle"></div>
<div class="media-body lh-14">
<span class="font-weight-semibold text-dark text-capitalize d-block font-size-md name">Ron Weasley</span>
<span class="text-gray d-block mb-2">San Francisco, CA, USA</span>
<div class="d-flex pb-4 align-items-center">
<a href="#"
class="btn btn-primary font-size-base py-0 px-1 mr-2 rounded-sm">Follow</a>
<span class="text-dark font-weight-semibold d-inline-block mr-2">2,865</span>
<span class="text-gray">Followers</span>
</div>
</div>
</div>
</div>
<div class="card-body px-0 pb-3">
<div class="card-title text-uppercase text-dark font-weight-semibold font-size-md">
<span class="text-secondary d-inline-block mr-2"><i
class="fas fa-envelope"></i></span>
<span>Contact me</span>
</div>
<div class="contact-form">
<form>
<div class="form-group mb-2">
<label class="sr-only" for="name-01">Name</label>
<input type="text" id="name-01"
class="form-control form-control-sm border-0 bg-white"
placeholder="Name:">
</div>
<div class="form-group mb-2">
<label class="sr-only" for="email">Email</label>
<input type="text" id="email"
class="form-control form-control-sm border-0 bg-white"
placeholder="Email Address:">
</div>
<div class="form-group mb-2">
<label class="sr-only" for="message">Message</label>
<textarea type="text"
class="form-control border-0"
id="message"
placeholder="Message..."></textarea>
</div>
<button type="submit"
class="btn btn-primary btn-block btn-sm">Send
Message
</button>
</form>
</div>
</div>
</div>Related listing widget with gray background #
related listing
<div class="py-6">
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="card p-4 widget border-0 relate-listing bg-gray-06 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span>related listing</span>
</div>
<div class="card-body px-0 pb-0 pt-3">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent text-dark px-0 py-3 h-100">
<div class="store media align-items-stretch">
<a href="../listing-details-full-image.html" class="store-image">
<img src="../images/shop/recent-view-1.jpg"
alt="Recent view 1">
</a>
<div class="media-body pl-0 pl-sm-3 pt-4 pt-sm-0 pr-0">
<a href="../listing-details-full-image.html"
class="font-size-md font-weight-semibold text-dark d-inline-block mb-1 lh-11"><span
class="letter-spacing-25">Canabo View Street,<br> Main St</span>
</a>
<div class="d-flex align-items-center mb-1">
<div class="pr-3"><span class="badge badge-warning d-inline-block mr-1">4.3</span><span
class="number">6 rating</span>
</div>
</div>
<div><span class="d-inline-block mr-1"><i class="fal fa-map-marker-alt"></i></span>
<a href="#"
class="text-secondary text-decoration-none address">77
Main
St, Queen,
NY</a>
</div>
</div>
</div>
</li>
<li class="list-group-item bg-transparent text-dark px-0 py-3 h-100">
<div class="store media align-items-stretch">
<a href="../listing-details-full-image.html" class="store-image">
<img src="../images/shop/recent-view-2.jpg"
alt="Recent view 1">
</a>
<div class="media-body pl-0 pl-sm-3 pt-4 pt-sm-0 pr-0">
<a href="../listing-details-full-image.html"
class="font-size-md font-weight-semibold text-dark d-inline-block mb-1 lh-11"><span
class="letter-spacing-25">Japan's Sushi <br> 10th Ave St</span>
</a>
<div class="d-flex align-items-center mb-1">
<div class="pr-3"><span class="badge badge-success d-inline-block mr-1">5.0</span><span class="number">7 rating</span>
</div>
</div>
<div><span class="d-inline-block mr-1"><i class="fal fa-map-marker-alt"></i></span>
<a href="#"
class="text-secondary text-decoration-none address">99
10th Ave
St,
Mahattan</a>
</div>
</div>
</div>
</li>
<li class="list-group-item bg-transparent text-dark px-0 py-3 h-100">
<div class="store media align-items-stretch">
<a href="../listing-details-full-image.html" class="store-image">
<img src="../images/shop/recent-view-3.jpg"
alt="Recent view 1">
</a>
<div class="media-body pl-0 pl-sm-3 pt-4 pt-sm-0 pr-0">
<a href="../listing-details-full-image.html"
class="font-size-md font-weight-semibold text-dark d-inline-block mb-1 lh-11"><span
class="letter-spacing-25">Korean Bingsu Shop</span></a>
<div class="d-flex align-items-center mb-1">
<div class="pr-3"><span
class="badge badge-success d-inline-block mr-1">5.0</span><span
class="number">7 rating</span>
</div>
</div>
<div><span class="d-inline-block mr-1"><i class="fal fa-map-marker-alt"></i></span>
<a href="#"
class="text-secondary text-decoration-none address">534
Salem Rd
St, Newark</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Booking form widget with gray background #
<div class="card p-4 widget border-0 rounded-0 reservation bg-gray-06 mb-6">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<div class="text-secondary mr-3"><i class="fal fa-calendar"></i>
</div>
<span> Make An online Reservation</span>
</div>
<div class="card-body px-0">
<div class="text-danger font-weight-semibold mb-2">
<span>From: $49/Night</span>
</div>
<div class="form-reservation">
<form method="get" action="">
<div class="d-flex">
<div class="form-group person">
<label for="person">Persons:</label>
<div class="arrows">
<select id="person"
class="form-control form-control-sm">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group type">
<label for="type">Type</label>
<div class="select-custom">
<select class="form-control form-control-sm"
id="type">
<option value="1">Standard Room
($49.00/Ni)
</option>
<option value="2">Vip Room
($100.00/Ni)
</option>
</select>
</div>
</div>
</div>
<div class="form-group mb-2">
<div class="datepicker-style-01"
data-datepicker="true"
data-picker-option='{"inline":true,"language":"my-lang"}'></div>
<input type="hidden"
id="datepicker_send">
</div>
<button class="btn btn-primary btn-block" type="submit">
Book Now
</button>
</form>
</div>
</div>
</div><link rel="stylesheet" href="../vendors/air-datepicker/css/datepicker.min.css"><script src="../vendors/air-datepicker/js/datepicker.min.js"></script>
<script src="../vendors/air-datepicker/js/i18n/datepicker.en.js"></script>Information widget with map #
<div class="widget map mb-6 position-relative mb-6 rounded-0">
<div id="googleMap" data-google-map="true" class="small-map"
style="width:100%;height:240px;"></div>
<div class="button-direction position-absolute">
<a href="#" class="btn btn-sm btn-icon-left">
<i class="fas fa-location-arrow"></i>
Get Direction
</a>
</div>
<div class="card p-4 widget border-0 infomation pt-0 bg-gray-06">
<div class="card-body px-0 py-2">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<span class="item-icon mr-3"><i
class="fal fa-map-marker-alt"></i></span>
<span class="card-text">125 Mountain St, Brooklyn,NY
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<span class="item-icon mr-3">
<svg class="icon icon-telephone">
<use xlink:href="#icon-telephone"></use>
</svg>
</span>
<span class="card-text">(301) 453-8688</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<span class="item-icon mr-3"><i
class="fal fa-globe"></i></span>
<span class="card-text"><a
href="#">www.thaistaste.com</a>
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0 pt-4">
<div class="social-icon origin-color si-square text-center">
<ul class="list-inline">
<li class="list-inline-item si-facebook">
<a target="_blank" title="Facebook"
href="#">
<i class="fab fa-facebook-f">
</i>
<span>Facebook</span>
</a>
</li>
<li class="list-inline-item si-twitter">
<a target="_blank" title="Twitter"
href="#">
<i class="fab fa-twitter">
</i>
<span>Twitter</span>
</a>
</li>
<li class="list-inline-item si-google">
<a target="_blank" title="Google plus"
href="#">
<svg class="icon icon-google-plus-symbol">
<use xlink:href="#icon-google-plus-symbol"></use>
</svg>
<span>Google plus</span>
</a>
</li>
<li class="list-inline-item si-tumblr">
<a target="_blank" title="Tumblr"
href="#">
<i class="fab fa-tumblr"></i>
<span>Tumblr</span>
</a>
</li>
<li class="list-inline-item si-rss">
<a target="_blank" title="RSS" href="#">
<i class="fas fa-rss"></i>
<span>RSS</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>Photo gallery widget #
photo gallery
<div class="card p-4 widget border-0 gallery bg-gray-06 rounded-0 mb-6">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3">
<svg class="icon icon-ionicons_svg_md-images">
<use xlink:href="#icon-ionicons_svg_md-images"></use>
</svg>
</span>
<span> photo gallery</span>
</div>
<div class="card-body px-0 pt-6 pb-3">
<div class="photo-gallery d-flex flex-wrap justify-content-between">
<a href="../images/shop/full-hotels-shop-2.jpg"
class="photo-item"
data-gtf-mfp="true" data-gallery-id="01">
<img src="../images/listing/gallery-01.jpg"
alt="Gallery 01">
</a>
<a href="../images/listing/full-gallery-02.jpg"
class="photo-item"
data-gtf-mfp="true" data-gallery-id="01">
<img src="../images/listing/gallery-02.jpg"
alt="Gallery 02"></a>
<a href="../images/listing/full-gallery-03.jpg"
class="photo-item"
data-gtf-mfp="true" data-gallery-id="01">
<img src="../images/listing/gallery-03.jpg"
alt="Gallery 03"></a>
<a href="../images/listing/full-gallery-04.jpg"
class="photo-item"
data-gtf-mfp="true" data-gallery-id="01">
<img src="../images/listing/gallery-04.jpg"
alt="Gallery 04"></a>
</div>
</div>
</div><link rel="stylesheet" href="vendors/magnific-popup/magnific-popup.css"><script src="vendors/magnific-popup/jquery.magnific-popup.js"></script>Additional details widget with gray background #
<div class="card p-4 widget border-0 bg-gray-06 rounded-0 mb-6">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span>additional details</span>
</div>
<div class="card-body px-0 pb-0">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Self Check-in</label>
<span class="ml-auto font-weight-semibold">Smartlock
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Room Type</label>
<span class="ml-auto font-weight-semibold">Private Room
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Beds</label>
<span class="ml-auto font-weight-semibold">6</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Bed Type</label>
<span class="ml-auto font-weight-semibold">Fixed With Air
Condition
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Happy Hours</label>
<span class="text-green ml-auto font-weight-semibold">
Yes
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Smoking</label>
<span class="text-danger ml-auto font-weight-semibold">
No
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0 pt-3">
<a href="#">Show More <span class="d-inline-block ml-2"><i
class="fal fa-chevron-down"></i></span>
</a>
</li>
</ul>
</div>
</div>Search form widget #
Search
<div class="card search bg-white mb-6 border-0 rounded-0 px-6">
<div class="card-header bg-transparent border-0 pt-4 pb-0 px-0">
<h5 class="card-title mb-0">Search</h5>
</div>
<div class="card-body px-0 pb-42">
<div class="form-search form-search-style-03">
<div class="form-group">
<div class="input-group d-flex align-items-center">
<label for="what"
class="input-group-prepend text-dark font-weight-semibold">What</label>
<input type="text"
class="form-control bg-transparent" id="what"
placeholder="Any keywords...">
</div>
</div>
<div class="form-group">
<div class="input-group d-flex align-items-center">
<label for="where"
class="input-group-prepend text-dark font-weight-semibold">Where</label>
<input type="text"
class="form-control bg-transparent"
id="where"
placeholder="City, postcode...">
</div>
</div>
<button type="submit"
class="btn btn-primary btn-block btn-icon-left font-size-md">
<i class="fal fa-search"></i>
Search
</button>
</div>
</div>
</div>Filter widget #
<div class="card widget-filter bg-white mb-6 border-0 rounded-0 px-6">
<div class="card-header bg-transparent border-0 pt-4 pb-0 px-0">
<h5 class="card-title mb-0">Filter</h5>
</div>
<div class="card-body px-0">
<div class="form-filter">
<form>
<div class="form-group category">
<div class="select-custom">
<select class="form-control">
<option value="0">Categories</option>
<option value="1">New York</option>
<option value="1">LA</option>
</select>
</div>
</div>
<div class="form-group price-range">
<label class="form-label">
Price Range
</label>
<div id="price-01" data-slider="true"
data-slider-options='{"min":0,"max":4000,"values":[0,2000]}'></div>
<div class="description">
From <input type="text" class="amount" readonly
class="border-0">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" value="Open Now"
class="form-control bg-transparent">
<span class="input-group-append"><i
class="fal fa-clock"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" value="Highest Rated"
class="form-control bg-transparent">
<span class="input-group-append"><i
class="fas fa-star"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" value="Most Reviewed"
class="form-control bg-transparent">
<span class="input-group-append"><i
class="fal fa-comment"></i></span>
</div>
</div>
<div class="form-group filter-tags">
<label class="form-label">Filter by tags</label>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="electronics">
<label class="custom-control-label"
for="electronics">
Electronics
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="books">
<label class="custom-control-label" for="books">
Books
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="fashion">
<label class="custom-control-label"
for="fashion">
Fashion
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input"
type="checkbox" id="vintage">
<label class="custom-control-label"
for="vintage">
Vintage
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="gift">
<label class="custom-control-label" for="gift">
Gift
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="furniture">
<label class="custom-control-label"
for="furniture">
Furniture
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="women-clothing">
<label class="custom-control-label"
for="women-clothing">
Women Clothing
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="men-clothing">
<label class="custom-control-label"
for="men-clothing">
Men Clothing
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="shoes">
<label class="custom-control-label" for="shoes">
Shoes
</label>
</div>
<div class="custom-control custom-checkbox lh-19">
<input class="custom-control-input"
type="checkbox" id="jewelry">
<label class="custom-control-label"
for="jewelry">
Jewelry
</label>
</div>
</div>
</form>
</div>
</div>
</div><link rel="stylesheet" href="vendors/jquery-ui/jquery-ui.min.css"><script src="vendors/jquery-ui/jquery-ui.min.js"></script>Schedule widget with white background #
<div class="card p-4 widget border-0 schedule bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Tuesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Wednesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Thursday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Saturday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div><div class="card p-4 widget border-0 schedule bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Tuesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Wednesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Thursday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Saturday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div><div class="card p-4 widget border-0 schedule bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Tuesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Wednesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Thursday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Saturday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div><div class="card p-4 widget border-0 schedule bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Tuesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Wednesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Thursday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Saturday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div><div class="card p-4 widget border-0 schedule bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Tuesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Wednesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Thursday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Saturday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div><div class="card p-4 widget border-0 schedule bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3"><i class="fal fa-clock"></i>
</span>
<span> Opening Hours</span>
</div>
<div class="card-body px-0 pb-0">
<div class="d-flex align-items-center mb-2 font-size-md">
<label class="text-dark font-weight-semibold mb-0">Today</label>
<span class="text-green ml-auto">Open Now!</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0 border-top-0">
<label class="text-dark font-weight-semibold mb-0">Monday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Tuesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Wednesday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Thursday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Friday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Saturday
</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="text-dark font-weight-semibold mb-0">Sunday</label>
<span class="text-dark ml-auto">08:00AM - 09:00PM</span>
</li>
</ul>
</div>
</div>Price status widget with white background #
<div class="card p-4 widget border-0 price-status bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span class="text-secondary mr-3">
<svg class="icon icon-dollar-sign">
<use xlink:href="#icon-dollar-sign"></use>
</svg>
</span>
<span>Price status</span>
</div>
<div class="card-body px-0 pb-0">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="font-weight-semibold text-dark mb-0">Status</label>
<span class="text-green ml-auto">Ultra High End</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="font-weight-semibold text-dark mb-0">Price
Range
</label>
<span class="text-danger font-weight-semibold font-size-md ml-auto">$10.00 - $55.00</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="font-italic mb-0">Own or work here?</label>
<a href="#claim-popup"
class="font-weight-semibold font-size-md ml-auto text-decoration-none"
data-gtf-mfp="true"
data-mfp-options='{"type":"inline"}'>Claim Now!</a>
</li>
</ul>
</div>
</div>Additional details widget with white background #
<div class="card p-4 widget border-0 addition-detail bg-white mb-6 rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span>additional details</span>
</div>
<div class="card-body px-0 pb-0">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Accept Card Pay</label>
<span class="font-weight-semibold text-danger ml-auto">
No
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">By Appointment Only</label>
<span class="font-weight-semibold text-green ml-auto">
Yes
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Good for:</label>
<span class="font-weight-semibold text-dark ml-auto">
All
</span>
</li>
<li class="list-group-item bg-transparent d-flex text-dark px-0">
<label class="mb-0">Wait Service</label>
<span class="font-weight-semibold text-green ml-auto">
Yes
</span>
</li>
</ul>
</div>
</div>Contact widget with white background #
Contact me
<div class="card p-4 widget border-0 contact bg-white mb-6 rounded-0">
<div class="card-title mb-0 border-bottom pb-2 pt-1">
<div class="media">
<div class="image mr-3"><img
src="../images/listing/jobs-testimonial-1.png"
alt="Contact me" class="rounded-circle"></div>
<div class="media-body lh-14">
<span class="font-weight-semibold text-dark text-capitalize d-block font-size-md name">Ron Weasley</span>
<span class="text-gray d-block mb-2">San Francisco, CA, USA</span>
<div class="d-flex pb-4 align-items-center">
<a href="#"
class="btn btn-primary font-size-base py-0 px-1 mr-2 rounded-sm">Follow</a>
<span class="text-dark font-weight-semibold d-inline-block mr-2">2,865</span>
<span class="text-gray">Followers</span>
</div>
</div>
</div>
</div>
<div class="card-body px-0 pb-3">
<div class="card-title text-uppercase text-dark font-weight-semibold font-size-md">
<span class="text-secondary d-inline-block mr-2"><i
class="fas fa-envelope"></i></span>
<span>Contact me</span>
</div>
<div class="contact-form">
<form>
<div class="form-group mb-2">
<label class="sr-only" for="name">Name</label>
<input type="text" id="name"
class="form-control form-control-sm bg-white"
placeholder="Name:">
</div>
<div class="form-group mb-2">
<label class="sr-only"
for="email-address">Email</label>
<input type="text" id="email-address"
class="form-control form-control-sm bg-white"
placeholder="Email Address:">
</div>
<div class="form-group mb-2">
<label class="sr-only"
for="message-01">Message</label>
<textarea type="text"
class="form-control"
id="message-01"
placeholder="Message..."></textarea>
</div>
<button type="submit"
class="btn btn-primary btn-block btn-sm">Send
Message
</button>
</form>
</div>
</div>
</div>Related listing widget with white background #
related listing
<div class="p-6 bg-gray-06">
<div class="row">
<div class="col-md-5">
<div class="card p-4 widget border-0 relate-listing bg-white rounded-0">
<div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1">
<span>related listing</span>
</div>
<div class="card-body px-0 pb-0 pt-3">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent text-dark px-0 py-3 h-100">
<div class="store media align-items-stretch">
<a href="../listing-details-full-image.html" class="store-image">
<img src="../images/shop/recent-view-1.jpg"
alt="Recent view 1">
</a>
<div class="media-body pl-0 pl-sm-3 pt-4 pt-sm-0 pr-0">
<a href="../listing-details-full-image.html"
class="font-size-md font-weight-semibold text-dark d-inline-block mb-1 lh-11"><span
class="letter-spacing-25">Canabo View Street,<br> Main St</span>
</a>
<div class="d-flex align-items-center mb-1">
<div class="pr-3"><span class="badge badge-warning d-inline-block mr-1">4.3</span><span class="number">6 rating</span>
</div>
</div>
<div>
<span class="d-inline-block mr-1"><i class="fal fa-map-marker-alt"></i></span>
<a href="#"
class="text-secondary text-decoration-none address">77
Main
St, Queen,
NY</a>
</div>
</div>
</div>
</li>
<li class="list-group-item bg-transparent text-dark px-0 py-3 h-100">
<div class="store media align-items-stretch">
<a href="../listing-details-full-image.html" class="store-image">
<img src="../images/shop/recent-view-2.jpg"
alt="Recent view 1">
</a>
<div class="media-body pl-0 pl-sm-3 pt-4 pt-sm-0 pr-0">
<a href="../listing-details-full-image.html"
class="font-size-md font-weight-semibold text-dark d-inline-block mb-1 lh-11"><span
class="letter-spacing-25">Japan's Sushi <br> 10th Ave St</span>
</a>
<div class="d-flex align-items-center mb-1">
<div class="pr-3"><span class="badge badge-success d-inline-block mr-1">5.0</span><span class="number">7 rating</span>
</div>
</div>
<div>
<span class="d-inline-block mr-1"><i class="fal fa-map-marker-alt"></i></span>
<a href="#"
class="text-secondary text-decoration-none address">99
10th
Ave St,
Mahattan</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Search form widget #
Search
<div class="card border-0 mb-7 search">
<h5 class="card-title mb-6">Search</h5>
<div class="card-body p-0">
<form>
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" class="form-control"
placeholder="Type & Hit Enter...">
</form>
</div>
</div>Categories widget #
<div class="row">
<div class="col-md-5">
<div class="card border-0 mb-8 search">
<h5 class="card-title mb-6">Search</h5>
<div class="card-body p-0">
<form>
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" class="form-control"
placeholder="Type & Hit Enter...">
</form>
</div>
</div>
<div class="card border-0 mb-6 category">
<h5 class="card-title mb-0">Categories</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0 py-2">
<a href="#" class="link-hover-dark-primary">All</a>
</li>
<li class="list-group-item px-0 py-2">
<a href="#" class="link-hover-dark-primary">Culture</a>
</li>
<li class="list-group-item px-0 py-2">
<a data-toggle="collapse" href="#travel" role="button"
aria-expanded="false"
aria-controls="travel"
class="d-flex link-hover-dark-primary"><span>Travel</span>
<span class="ml-auto"><i
class="fal fa-angle-down"></i></span>
</a>
<ul id="travel"
class="sub-categories collapse show list-unstyled pl-3 py-2">
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Destination</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Foody</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Experience</a>
</li>
</ul>
</li>
<li class="list-group-item px-0 py-2">
<a data-toggle="collapse" href="#location" role="button"
aria-expanded="false"
aria-controls="location"
class="d-flex link-hover-dark-primary"><span>Location</span>
<span class="dropdown-icon ml-auto"><i
class="fal fa-angle-down"></i></span>
</a>
<ul id="location" class="sub-categories collapse">
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Destination</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Foody</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Experience</a>
</li>
</ul>
</li>
<li class="list-group-item px-0 py-2">
<a href="#" class="link-hover-dark-primary">Tips</a>
</li>
<li class="list-group-item px-0 py-2">
<a href="#"
class="link-hover-dark-primary">Community</a>
</li>
<li class="list-group-item px-0 py-2">
<a href="#" class="link-hover-dark-primary">Entertainment</a>
</li>
</ul>
</div>
</div>
<div class="card border-0 mb-7 twitter">
<h5 class="card-title mb-3">Latest Tweets</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush list-group-borderless">
<li class="list-group-item bg-transparent p-0 mb-6">
<span class="mb-2 d-block">Free stock footage from @videvo acani</span>
<a href="http://t.co/L1mGsTovdZ "
class="d-block mb-2 link">http://t.co/L1mGsTovdZ </a>
<div class="tags">
<a href="#" class="link-hover-secondary-dark">#filmmaking</a>
<a href="#"
class="link-hover-secondary-dark">#stock </a>
<a href="#" class="link-hover-secondary-dark">#ootage</a>
<a href="#" class="link-hover-secondary-dark">#freebie</a>
</div>
<span class="text-uppercase text-gray d-block mt-3">a day ago</span>
</li>
<li class="list-group-item bg-transparent p-0 mb-6">
<span class="mb-2 d-block">Installation with one clik so easy</span>
<div class="d-flex mb-2">
<a href="http://t.co/L1mGsTovdZ " class="link">http://t.co/nvpUXOWRCp </a>@YouTube
</div>
<span class="text-uppercase text-gray d-block mt-3">two day ago</span>
</li>
<li class="list-group-item bg-transparent p-0">
<a href="#"
class="link-hover-dark-primary font-weight-semibold text-uppercase">view
all</a>
</li>
</ul>
</div>
</div>
<div class="card border-0 mb-7 recent-posts">
<h5 class="card-title mb-3">Recent Posts</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush list-group-borderless">
<li class="list-group-item bg-transparent p-0 mb-4">
<a href="blog-single-image.html"
class="font-size-md font-weight-semibold link-hover-dark-primary">10
Best
Homestay In Florencia
That You Don’t Miss
Out</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-4">
<a href="#"
class="font-size-md font-weight-semibold link-hover-dark-primary">MadCap
Coffee At Brooklyn Town For Who Love Black
Coffee</a>
</li>
<li class="list-group-item bg-transparent p-0">
<a href="#"
class="font-size-md font-weight-semibold link-hover-dark-primary">Connect
Anyone That You Want At Coffee Talk
Event</a>
</li>
</ul>
</div>
</div>
<div class="card border-0 mb-8 tags">
<h5 class="card-title mb-0">Popular tags</h5>
<div class="card-body px-0 bg-transparent">
<a href="#" class="link-hover-secondary-dark">Envato,</a>
<a href="#" class="link-hover-secondary-dark">WordPress,</a>
<a href="#" class="link-hover-secondary-dark">Theme,</a>
<a href="#" class="link-hover-secondary-dark">Directory,</a>
<a href="#" class="link-hover-secondary-dark">Blog,</a>
<a href="#" class="link-hover-secondary-dark">Business,</a>
<a href="#" class="link-hover-secondary-dark">PSD Template,</a>
<a href="#" class="link-hover-secondary-dark">Clean,</a>
<a href="#" class="link-hover-secondary-dark">Services,</a>
<a href="#" class="link-hover-secondary-dark">Listing</a>
</div>
</div>
<div class="card border-0 mb-6 archives">
<h5 class="card-title lh-13 letter-spacing-25">Archives</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush list-group-borderless">
<li class="list-group-item bg-transparent p-0 mb-2">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>May, 2017</span>
</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-2">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>April, 2017</span>
</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-2">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>March, 2017</span>
</a>
</li>
<li class="list-group-item bg-transparent p-0">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>
February, 2017
</span></a>
</li>
</ul>
</div>
</div>
<div class="card rounded-0 border-0 bg-transparent">
<div class="datepicker-style-02" data-datepicker="true"
data-picker-option='{"inline":true,"language":"my-lang"}'></div>
</div>
</div>
</div><div class="card border-0 mb-6 category">
<h5 class="card-title mb-0">Categories</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0 py-1">
<a href="#" class="link-hover-dark-primary">All</a>
</li>
<li class="list-group-item px-0 py-1">
<a href="#" class="link-hover-dark-primary">Culture</a>
</li>
<li class="list-group-item px-0 py-1">
<a data-toggle="collapse" href="#travel" role="button"
aria-expanded="false"
aria-controls="travel"
class="d-flex link-hover-dark-primary"><span>Travel</span>
<span class="ml-auto"><i
class="fal fa-angle-down"></i></span>
</a>
<ul id="travel"
class="sub-categories collapse show list-unstyled pl-3 py-2">
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Destination</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Foody</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Experience</a>
</li>
</ul>
</li>
<li class="list-group-item px-0 py-1">
<a data-toggle="collapse" href="#location" role="button"
aria-expanded="false"
aria-controls="location"
class="d-flex link-hover-dark-primary"><span>Location</span>
<span class="dropdown-icon ml-auto"><i
class="fal fa-angle-down"></i></span>
</a>
<ul id="location" class="sub-categories collapse">
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Destination</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Foody</a>
</li>
<li class="sub-category"><a href="#"
class="link-hover-gray-dark">Experience</a>
</li>
</ul>
</li>
<li class="list-group-item px-0 py-1">
<a href="#" class="link-hover-dark-primary">Tips</a>
</li>
<li class="list-group-item px-0 py-1">
<a href="#"
class="link-hover-dark-primary">Community</a>
</li>
<li class="list-group-item px-0 py-1">
<a href="#" class="link-hover-dark-primary">Entertainment</a>
</li>
</ul>
</div>
</div>Latest tweets widget #
Latest Tweets
- Free stock footage from @videvo acani http://t.co/L1mGsTovdZ a day ago
-
Installation with one clik so easy
http://t.co/nvpUXOWRCp @YouTubetwo day ago
- view all
<div class="card border-0 mb-7 twitter">
<h5 class="card-title mb-2">Latest Tweets</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush list-group-borderless">
<li class="list-group-item bg-transparent p-0 mb-6">
<span class="mb-1 d-block">Free stock footage from @videvo acani</span>
<a href="http://t.co/L1mGsTovdZ "
class="d-block mb-1 link">http://t.co/L1mGsTovdZ </a>
<div class="tags">
<a href="#" class="link-hover-secondary-dark">#filmmaking</a>
<a href="#"
class="link-hover-secondary-dark">#stock </a>
<a href="#" class="link-hover-secondary-dark">#ootage</a>
<a href="#" class="link-hover-secondary-dark">#freebie</a>
</div>
<span class="text-uppercase text-gray d-block mt-2">a day ago</span>
</li>
<li class="list-group-item bg-transparent p-0 mb-6">
<span class="mb-2 d-block">Installation with one clik so easy</span>
<div class="d-flex mb-2">
<a href="http://t.co/L1mGsTovdZ " class="link">http://t.co/nvpUXOWRCp </a>@YouTube
</div>
<span class="text-uppercase text-gray d-block mt-3">two day ago</span>
</li>
<li class="list-group-item bg-transparent p-0">
<a href="#"
class="link-hover-dark-primary font-weight-semibold text-uppercase">view
all</a>
</li>
</ul>
</div>
</div>Recent posts widget #
<div class="card border-0 mb-7 recent-posts">
<h5 class="card-title mb-3">Recent Posts</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush list-group-borderless">
<li class="list-group-item bg-transparent p-0 mb-4">
<a href="blog-single-image.html"
class="font-size-md font-weight-semibold link-hover-dark-primary">10
Best
Homestay In Florencia
That You Don’t Miss
Out</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-4">
<a href="#"
class="font-size-md font-weight-semibold link-hover-dark-primary">MadCap
Coffee At Brooklyn Town For Who Love Black
Coffee</a>
</li>
<li class="list-group-item bg-transparent p-0">
<a href="#"
class="font-size-md font-weight-semibold link-hover-dark-primary">Connect
Anyone That You Want At Coffee Talk
Event</a>
</li>
</ul>
</div>
</div>Tags widget #
<div class="card border-0 mb-8 tags">
<h5 class="card-title mb-0">Popular tags</h5>
<div class="card-body px-0 bg-transparent">
<a href="#" class="link-hover-secondary-dark">Envato,</a>
<a href="#" class="link-hover-secondary-dark">WordPress,</a>
<a href="#" class="link-hover-secondary-dark">Theme,</a>
<a href="#" class="link-hover-secondary-dark">Directory,</a>
<a href="#" class="link-hover-secondary-dark">Blog,</a>
<a href="#" class="link-hover-secondary-dark">Business,</a>
<a href="#" class="link-hover-secondary-dark">PSD Template,</a>
<a href="#" class="link-hover-secondary-dark">Clean,</a>
<a href="#" class="link-hover-secondary-dark">Services,</a>
<a href="#" class="link-hover-secondary-dark">Listing</a>
</div>
</div>Archives widget #
Archives
<div class="card border-0 mb-6 archives">
<h5 class="card-title lh-13 letter-spacing-25">Archives</h5>
<div class="card-body px-0 bg-transparent">
<ul class="list-group list-group-flush list-group-borderless">
<li class="list-group-item bg-transparent p-0 mb-2">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>May, 2017</span>
</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-2">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>April, 2017</span>
</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-2">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>March, 2017</span>
</a>
</li>
<li class="list-group-item bg-transparent p-0">
<a href="#"
class="d-flex align-items-center text-decoration-none link-hover-dark-primary">
<span class="d-flex align-items-center d-inline-block mr-2"><i
class="fal fa-angle-right"></i></span>
<span>February, 2017</span>
</a>
</li>
</ul>
</div>
</div>Calendar widget #
<div class="card rounded-0 border-0 bg-transparent">
<div class="datepicker-style-02" data-datepicker="true"
data-picker-option='{"inline":true,"language":"my-lang"}'></div>
</div><link rel="stylesheet" href="../vendors/air-datepicker/css/datepicker.min.css"><script src="../vendors/air-datepicker/js/datepicker.min.js"></script>
<script src="../vendors/air-datepicker/js/i18n/datepicker.en.js"></script>Categories widget #
<div class="card border-0 rounded-0 p-0">
<div class="card-body product-category p-0">
<h5 class="card-title mb-7 lh-1">Product Categories</h5>
<ul class="list-group list-group-flush list-group-borderless mb-0">
<li class="list-group-item bg-transparent p-0 mb-1">
<a href="#"
class="link-hover-gray-dark">New
Arrivals</a></li>
<li class="list-group-item bg-transparent p-0 mb-1">
<a href="#"
class="link-hover-gray-dark">Clothings</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-1">
<a href="#"
class="link-hover-gray-dark">Bags</a>
</li>
<li class="list-group-item bg-transparent p-0 mb-1">
<a href="#"
class="link-hover-gray-dark">Shoes</a>
</li>
<li class="list-group-item bg-transparent p-0"><a
href="#"
class="link-hover-gray-dark">Accessories</a>
</li>
</ul>
</div>
</div>Color filter widget #
<div class="card border-0 rounded-0 p-0">
<div class="card-body px-0 py-8">
<h5 class="card-title mb-4 lh-1">Color</h5>
<select class="form-control mb-2">
<option selected>Any color</option>
<option>Red</option>
<option>Blue</option>
</select>
</div>
</div>Size filter widget #
<div class="card border-0 rounded-0 p-0">
<div class="card-body px-0 py-8">
<h5 class="card-title mb-4 lh-1">Size</h5>
<div class="mb-2">
<select class="form-control">
<option selected>Any size</option>
<option>Big</option>
<option>Small</option>
</select>
</div>
</div>
</div>Price filter-widget #
<ul class="list-group list-group-flush shop-sidebar">
<li class="list-group-item p-0">
<div class="card border-0 rounded-0 p-0">
<div class="card-body px-0 py-8">
<h5 class="card-title mb-6">Price</h5>
<div class="form-group price-range mb-0">
<label class="form-label">
</label>
<div id="price" data-slider="true"
data-slider-options='{"min":0,"max":490,"values":[0,490]}'></div>
<div class="description text-gray text-center mt-7">
<input type="text" readonly
class="amount border-0 text-center text-gray">
</div>
</div>
</div>
</div>
</li>
</ul><link rel="stylesheet" href="vendors/jquery-ui/jquery-ui.min.css"><script src="vendors/jquery-ui/jquery-ui.min.js"></script>Tags widget #
<div class="card border-0 rounded-0 p-0 tags">
<div class="card-body px-0 py-8">
<h5 class="card-title mb-7 lh-1">Product Tags</h5>
<a href="#"
class="link-hover-secondary-dark">tshirt, </a>
<a href="#"
class="link-hover-secondary-dark">sneaker, </a>
<a href="#" class="link-hover-secondary-dark">herschuply, </a>
<a href="#"
class="link-hover-secondary-dark">charlie, </a>
<a href="#"
class="link-hover-secondary-dark">adidas, </a>
<a href="#" class="link-hover-secondary-dark">zara, </a>
<a href="#"
class="link-hover-secondary-dark">mango, </a>
<a href="#"
class="link-hover-secondary-dark">jacket, </a>
<br>
<a href="#"
class="link-hover-secondary-dark">snapback, </a>
<a href="#" class="link-hover-secondary-dark">cat </a>
</div>
</div>Order information widget #
<div class="card border-0 rounded-0 mb-4 p-6 bg-gray-02 sidebar-checkout">
<div class="card-header d-flex bg-transparent px-0 pt-0 pb-2 mb-6">
<div class="text-gray text-uppercase">Product</div>
<div class="text-gray text-uppercase ml-auto">Total</div>
</div>
<div class="card-body p-0">
<div class="border-bottom pb-8 mb-5">
<div class="font-size-md mb-2 d-flex lh-15">
<label class="text-dark mb-0">Black Printed T-shirt</label>
<span class="text-dark ml-auto"> $39.00</span>
</div>
<div class="font-size-md mb-2 d-flex lh-15">
<label class="text-dark mb-0">White Retro Sneaker</label>
<span class="text-dark ml-auto">$29.00</span>
</div>
<div class="font-size-md mb-2 d-flex lh-15">
<label class="text-dark mb-0">Shipping Standard</label>
<span class="text-danger ml-auto">+$10.00</span>
</div>
</div>
<div class="d-flex align-items-center border-bottom pb-5 mb-6">
<label class="text-dark font-size-md mb-0">Order Totals</label>
<span class="text-danger ml-auto font-size-h5 font-weight-semibold">
$78.00
</span>
</div>
<div class="form-check pl-0">
<div class="custom-control custom-radio mb-5">
<input class="custom-control-input" type="radio"
name="payment-method"
id="direct-bank" value="option1" checked>
<label class="custom-control-label text-dark ml-2"
for="direct-bank">
Direct Bank Transfer
</label>
<div class="text-gray pl-2 pt-4">Donec sed odio dui.
Nulla vitae elit
libero, a
phara
etra augue. Nullam id dolor id nibh ultricies
vehicula ut id elit.
</div>
</div>
<div class="custom-control custom-radio mb-5">
<input class="custom-control-input" type="radio"
name="payment-method"
id="cheque" value="option1">
<label class="custom-control-label text-dark ml-2"
for="cheque">
Cheque Payment
</label>
</div>
<div class="custom-control custom-radio mb-5">
<input class="custom-control-input" type="radio"
name="payment-method"
id="cash" value="option1">
<label class="custom-control-label text-dark ml-2"
for="cash">
Cash On Delivery
</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio"
name="payment-method"
id="paypal" value="option1">
<label class="custom-control-label text-dark ml-2"
for="paypal">
Paypal
</label>
</div>
</div>
</div>
</div>Billing addresses widget #
<div class="account-sidebar">
<div class="card rounded-0 border-0 px-6 pt-4 pb-8 bg-gray-02">
<div class="card-header bg-transparent p-0 d-flex align-items-center mb-4">
<div class="card-title font-size-lg font-weight-semibold text-dark pb-3 lh-15 mb-0">
Billing Adresses
</div>
</div>
<div class="card-body p-0">
<p class="card-text text-gray mb-8 pb-1">The following
addresses<br> will be
used on
the
checkout page
by
default.</p>
<div class="billing-info mb-8">
<div class="font-weight-semibold text-uppercase text-dark mb-4">
billing
information
</div>
<div class="info-item d-flex mb-2">
<label class="label text-gray mb-0">Name: </label>
<span class="value text-dark"> Logan Cee </span>
</div>
<div class="info-item d-flex mb-2">
<label class="label text-gray mb-0">Country: </label>
<span class="value text-dark"> Australia </span>
</div>
<div class="info-item d-flex mb-2">
<label class="label text-gray mb-0">Address: </label>
<span class="value text-dark"> 789 Orchard St, Melbourne, VIC 1020</span>
</div>
<div class="info-item d-flex mb-2">
<label class="label text-gray mb-0">Post Code: </label>
<span class="value text-dark"> 100000 </span>
</div>
</div>
<a href="#" class="font-italic text-decoration-none">Edit
your billing address</a>
</div>
</div>
</div>Order information widget #
<div class="cart-sidebar">
<div class="card border-0 rounded-0 p-6 mb-4 font-size-md">
<div class="card-body p-0">
<div class="cart-totals">
<div class="border-bottom text-dark d-flex pb-4 mb-5">
<label class="mb-0">Subtotal</label>
<span class="ml-auto"> $68.00</span>
</div>
<div class="border-bottom pb-6 mb-6">
<div class="text-dark mb-3">Shipping</div>
<div class="form-group standard mb-0">
<div class="form-check d-flex p-0">
<div class="custom-control custom-radio">
<input class="custom-control-input"
type="radio" name="shipping"
id="standard" value="option1"
checked>
<label class="custom-control-label"
for="standard">
Standard
</label>
</div>
<div class="text-dark-red ml-auto"> +
$10.00
</div>
</div>
</div>
<div class="form-group express text-gray mb-0">
<div class="form-check d-flex p-0">
<div class="custom-control custom-radio">
<input class="custom-control-input"
type="radio" name="shipping"
id="express" value="option1">
<label class="custom-control-label"
for="express">
Express
</label>
</div>
<div class="value ml-auto">+ $19.00</div>
</div>
</div>
</div>
<div class="cart-total-item total d-flex">
<label class="font-size-lg text-dark mb-0">Total</label>
<span class="font-size-h5 text-dark font-weight-semibold ml-auto"> $78.00</span>
</div>
</div>
</div>
</div>
</div>