Sidebar example
Various forms of information to the right or left side of a page.
Sidebar examples #1
Bio
I love coding and problem solving. I have 3+ years of experience in the web development sector. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.
Languages
English - Advanced French - UnspecifiedRewards
Industry expertise: IT, Technology and Business
Work experience
-
Product Director
- Spotify Inc.
- Jan 2008 to Mar 2010
- San Francisco, California
-
Channel Sales Director
- Dropbox Inc.
- Apr 2010 to Sep 2015
- Newark, NJ
-
Business manager
- Airbnb Inc.
- Oct 2015 to Present
- San Francisco, California
Linked accounts
Slack
jorgefields.slack.com
<!-- Sidebar Info -->
<div class="row">
<div class="col-lg-4 mb-9 mb-lg-0">
<div class="card shadow-sm p-5 mb-5">
<div class="border-bottom text-center pb-5 mb-5">
<!-- Status -->
<div class="d-flex justify-content-end mb-1">
<span class="btn btn-xs btn-soft-success btn-pill">
<small class="fas fa-circle mr-1"></small>
Online
</span>
</div>
<!-- End Status -->
<!-- Avatar -->
<div class="mb-3 mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img22.jpg" width="110" height="110" alt="Image Description">
</div>
<!-- End Avatar -->
<h1 class="h5">Jorge Fields</h1>
<!-- Review -->
<div class="mb-2">
<span class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star-half-alt"></small>
</span>
<span class="font-weight-semi-bold ml-2">4.7</span>
<small class="text-muted">(39 reviews)</small>
</div>
<!-- End Review -->
<!-- Additional Info -->
<ul class="list-inline text-secondary font-size-1 mb-4">
<li class="list-inline-item">
<small class="fas fa-map-marker-alt mr-1"></small>
London, UK
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">
Joined Jun 2015
</li>
</ul>
<!-- End Additional Info -->
<div class="mb-2">
<a class="btn btn-block btn-sm btn-soft-primary transition-3d-hover" href="#">Hire Me</a>
</div>
<a class="text-muted small" href="#">
<small class="fas fa-flag mr-1"></small>
Report this user
</a>
</div>
<div class="border-bottom pb-5 mb-5">
<div id="SVGemployeeStatsIcon" class="svg-preloader row">
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-35.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">$35.00</span>
<span class="d-block text-secondary font-size-1">Hourly rate</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">30</span>
<span class="d-block text-secondary font-size-1">Jobs done</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">85%</span>
<span class="d-block text-secondary font-size-1">Success rate</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">345</span>
<span class="d-block text-secondary font-size-1">Repeat clients</span>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<h2 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Bio</h2>
<p class="font-size-1 mb-0">I love coding and problem solving. I have 3+ years of experience in the web development sector. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.</p>
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Languages</h3>
<!-- Languages -->
<span class="d-block font-size-1 font-weight-medium mb-1">English - <span class="text-muted font-weight-normal">Advanced</span></span>
<span class="d-block font-size-1 font-weight-medium">French - <span class="text-muted font-weight-normal">Unspecified</span></span>
<!-- End Languages -->
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Skills</h3>
<!-- Skills -->
<a class="btn btn-xs btn-gray mb-1" href="#">Android</a>
<a class="btn btn-xs btn-gray mb-1" href="#">iOS</a>
<a class="btn btn-xs btn-gray mb-1" href="#">PHP</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Developer</a>
<a class="btn btn-xs btn-gray mb-1" href="#">JavaScript</a>
<a class="btn btn-xs btn-gray mb-1" href="#">CSS3</a>
<a class="btn btn-xs btn-gray mb-1" href="#">HTML5</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Bootstrap</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Angular</a>
<a class="btn btn-xs btn-gray mb-1" href="#">React.js</a>
<!-- End Skills -->
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Rewards</h3>
<!-- Rewards -->
<div class="mb-3">
<img class="max-width-5 mr-1" src="../../assets/svg/illustrations/top-level-award.svg" alt="Image Description" title="Top Seller">
<img class="max-width-5 mx-1" src="../../assets/svg/illustrations/verified-user.svg" alt="Image Description" title="Verified user">
<img class="max-width-5 ml-1" src="../../assets/svg/illustrations/top-endorsed.svg" alt="Image Description" title="Top Endorsed">
</div>
<!-- End Rewards -->
<p class="small mb-0">Industry expertise: IT, Technology and Business</p>
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Work experience</h3>
<!-- Work Experience Info -->
<ul class="list-unstyled u-indicator-vertical-dashed">
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">S</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Product Director</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Spotify Inc.</a>
</li>
<li>Jan 2008 to Mar 2010</li>
<li>San Francisco, California</li>
</ul>
</div>
</li>
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
<span class="btn-icon__inner">D</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Channel Sales Director</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Dropbox Inc.</a>
</li>
<li>Apr 2010 to Sep 2015</li>
<li>Newark, NJ</li>
</ul>
</div>
</li>
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-danger rounded-circle mr-3">
<span class="btn-icon__inner">A</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Business manager</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Airbnb Inc.</a>
</li>
<li>Oct 2015 to Present</li>
<li>San Francisco, California</li>
</ul>
</div>
</li>
</ul>
<!-- End Work Experience Info -->
</div>
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Linked accounts</h4>
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Slack</h4>
<small class="d-block text-secondary">jorgefields.slack.com</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Twitter</h4>
<small class="d-block text-secondary">twitter.com/jorgefields</small>
</div>
</a>
<!-- End Linked Account -->
</div>
</div>
</div>
<!-- End Sidebar Info -->
Sidebar examples #2
Job seekers also viewed
567k+ reviews
430 reviews
Asana
5k+ reviews
≪!-- Sidebar Info -->
<div class="row">
<div class="col-lg-4 mb-9 mb-lg-0">
<!-- Sidebar Info -->
<div class="card shadow-sm p-5 mb-5">
<div class="border-bottom text-center pb-5 mb-5">
<!-- Avatar -->
<div class="mb-3 mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" width="110" height="110" alt="Image Description">
</div>
<!-- End Avatar -->
<h1 class="h5">Slack</h1>
<!-- Review -->
<div class="mb-2">
<span class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</span>
<span class="font-weight-semi-bold ml-2">4.91</span>
<small class="text-muted">(12k+ reviews)</small>
</div>
<!-- End Review -->
<div class="mb-4">
<a class="font-size-1" href="#">www.slack.com</a>
</div>
<div class="mb-2">
<!-- Buttons -->
<a class="btn btn-sm btn-soft-success transition-3d-hover mr-1" href="#">Follow</a>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">64 Open Jobs</a>
<!-- End Buttons -->
</div>
<a class="text-muted small" href="#">
<small class="fas fa-flag mr-1"></small>
Report
</a>
</div>
<div class="border-bottom pb-5 mb-5">
<div id="SVGCompanyStatsIcon" class="svg-preloader row">
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">San Francisco</span>
<span class="d-block text-secondary font-size-1">Headquarters</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">2014</span>
<span class="d-block text-secondary font-size-1">Founded</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">12,000+</span>
<span class="d-block text-secondary font-size-1">Employees</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-13.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">Internet</span>
<span class="d-block text-secondary font-size-1">Industry</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-22.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">Unknown</span>
<span class="d-block text-secondary font-size-1">Revenue</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-34.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">$25 - $45</span>
<span class="d-block text-secondary font-size-1">Avg. Salary</span>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Linked accounts</h4>
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Slack</h4>
<small class="d-block text-secondary">slack.com</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Twitter</h4>
<small class="d-block text-secondary">twitter.com/slack</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Facebook</h4>
<small class="d-block text-secondary">facebook.com/slack</small>
</div>
</a>
<!-- End Linked Account -->
</div>
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Job seekers also viewed</h4>
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Google</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">567k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Facebook</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>
</span>
<small class="text-muted ml-2">430 reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Asana</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>
<span class="far fa-star"></span>
</span>
<small class="text-muted ml-2">5k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseRelatedCompanies">
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Dribbble</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">15k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Spotify</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">987 reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
</div>
<!-- End View More - Collapse -->
<!-- View More - Link -->
<a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseRelatedCompanies" role="button" aria-expanded="false" aria-controls="collapseRelatedCompanies">
<span class="link-collapse__default">View more</span>
<span class="link-collapse__active">View less</span>
<span class="link__icon ml-1">
<span class="link__icon-inner">+</span>
</span>
</a>
<!-- End View More - Link -->
</div>
</div>
</div>
<!-- End Sidebar Info -->
Sidebar examples #4
- Industry
- E-commerce
- Location
- Seattle, Washington, U.S.
- Goals
- Build campaigns that bring in quality leads who convert from free to paid.
- Type
- B2C
Products used
-
-
Amazon wallet
Send targeted currencies to the right people at the right time.
-
-
Amazon Fire TV
Amazon Fire TV is a digital media player and its microconsole remote.
<div class="row">
<div id="stickyBlockStartPoint" class="col-lg-4 mt-lg-n11 mb-7 mb-lg-0">
<!-- Sidebar Content -->
<div class="js-sticky-block card border-0 bg-white shadow-soft"
data-parent="#stickyBlockStartPoint"
data-sticky-view="lg"
data-start-point="#stickyBlockStartPoint"
data-end-point="#stickyBlockEndPoint"
data-offset-top="24"
data-offset-bottom="24">
<div class="card-header text-center py-5 px-4">
<div class="max-width-27 mx-auto">
<img class="img-fluid" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="border-bottom pb-2 mb-4">
<dl class="row font-size-1">
<dt class="col-sm-4">Industry</dt>
<dd class="col-sm-8 text-secondary">E-commerce</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4">Location</dt>
<dd class="col-sm-8 text-secondary">Seattle, Washington, U.S.</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4">Goals</dt>
<dd class="col-sm-8 text-secondary">Build campaigns that bring in quality leads who convert from free to paid.</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4">Type</dt>
<dd class="col-sm-8 text-secondary">B2C</dd>
</dl>
</div>
<h4 class="h6 mb-3">Products used</h4>
<dl class="row font-size-1">
<dt class="col-sm-4">
<figure id="icon34" class="svg-preloader ie-height-56 max-width-8 w-100">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-34.svg" alt="SVG"
data-parent="#icon34">
</figure>
</dt>
<dd class="col-sm-8 text-secondary">
<h4 class="font-size-1 font-weight-semi-bold mb-0">Amazon wallet</h4>
<p class="font-size-1 mb-0">Send targeted currencies to the right people at the right time.</p>
</dd>
</dl>
<dl class="row font-size-1 mb-0">
<dt class="col-sm-4">
<figure id="icon41" class="svg-preloader ie-height-56 max-width-8 w-100">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-41.svg" alt="SVG"
data-parent="#icon41">
</figure>
</dt>
<dd class="col-sm-8 text-secondary">
<h4 class="font-size-1 font-weight-semi-bold mb-0">Amazon Fire TV</h4>
<p class="font-size-1 mb-0">Amazon Fire TV is a digital media player and its microconsole remote.</p>
</dd>
</dl>
</div>
</div>
<!-- End Sidebar Content -->
</div>
<div class="col-lg-8">
</div>
</div>
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.sticky-block.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of sticky blocks
$.HSCore.components.HSStickyBlock.init('.js-sticky-block');
});
</script>
Sidebar examples #5
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<!-- Order Summary -->
<div class="border shadow-soft rounded p-5 mb-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<h2 class="h5 mb-0">Order summary</h2>
</div>
<!-- End Title -->
<div class="border-bottom pb-4 mb-4">
<div class="media align-items-center mb-3">
<h3 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Item subtotal (2)</h3>
<div class="media-body text-right">
<span class="font-weight-medium">$73.98</span>
</div>
</div>
<div class="media align-items-center mb-3">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Delivery</h4>
<div class="media-body text-right">
<span class="font-weight-medium">Free</span>
</div>
</div>
<!-- Checkbox -->
<div class="card border-0 mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio1Example1" name="deliveryRadioExampleOne" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1Example1">
<span class="d-block font-size-1 font-weight-medium mb-1">Free - Standard delivery</span>
<span class="d-block text-muted">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="card border-0">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio2Example2" name="deliveryRadioExampleOne">
<label class="custom-control-label ml-1" for="deliveryRadio2Example2">
<span class="d-block font-size-1 font-weight-medium mb-1">$7.99 - Express delivery</span>
<span class="d-block text-muted">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
</div>
<div class="media align-items-center mb-3">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Estimated tax</h4>
<div class="media-body text-right">
<span class="font-weight-medium">--</span>
</div>
</div>
<div class="media align-items-center mb-4">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Total</h4>
<div class="media-body text-right">
<span class="font-weight-medium">$73.98</span>
</div>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover" href="checkout.html">Checkout</a>
<button type="submit" class="btn btn-soft-warning btn-pill transition-3d-hover">
<img src="../../assets/img/logos/paypal.png" width="70" alt="PayPal logo">
</button>
</div>
<!-- End Order Summary -->
<!-- Accordion -->
<div id="shopCartAccordionExample1" class="accordion rounded shadow-soft mb-4">
<!-- Card -->
<div class="card rounded">
<div class="card-header card-collapse" id="shopCartHeadingOneExample1">
<h3 class="mb-0">
<button type="button" class="btn btn-link btn-block card-btn font-weight-medium collapsed"
data-toggle="collapse"
data-target="#shopCartOneExample1"
aria-expanded="false"
aria-controls="shopCartOneExample1">
Promo code?
<span class="far fa-question-circle text-secondary ml-1" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Promo code" data-content="Valid on full priced items only. Some products maybe excluded."></span>
</button>
</h3>
</div>
<div id="shopCartOneExample1" class="collapse" aria-labelledby="shopCartHeadingOneExample1" data-parent="#shopCartAccordionExample1">
<form class="js-validate p-5">
<div class="input-group input-group-pill mb-3">
<input type="text" class="form-control" name="name" placeholder="Promo code" aria-label="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-block btn-primary btn-pill">Apply</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<!-- Help Link -->
<div class="media align-items-center">
<figure id="icon4" class="svg-preloader ie-height-48 w-100 max-width-6 mr-2">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4">
</figure>
<div class="media-body text-secondary small">
<span class="font-weight-medium mr-1">Need Help?</span>
<a class="link-muted" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
</div>
<div class="col-lg-8">
</div>
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sidebar examples #6
Order summary
1
Originals national backpack
Gender:
Men
Color:
Grey
Size:
One size
1
Vans large image t-shirt
Gender:
Women
Color:
Core Black / Carbon
Size:
SM
Item subtotal (2)
$73.98
Delivery
Free
Estimated tax
--
Total
$73.98
Need Help?
Chat now
<!-- Order Summary -->
<div class="border shadow-soft rounded p-5 mb-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<h2 class="h5 mb-0">Order summary</h2>
</div>
<!-- End Title -->
<!-- Product Content -->
<div class="border-bottom pb-4 mb-4">
<div class="media">
<div class="position-relative max-width-10 w-100 mr-3">
<img class="img-fluid" src="../../assets/img/320x320/img2.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-pos rounded-circle">1</span>
</div>
<div class="media-body">
<h2 class="h6">Originals national backpack</h2>
<div class="text-secondary font-size-1">
<span>Gender:</span>
<span>Men</span>
</div>
<div class="text-secondary font-size-1">
<span>Color:</span>
<span>Grey</span>
</div>
<div class="text-secondary font-size-1">
<span>Size:</span>
<span>One size</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Product Content -->
<div class="border-bottom pb-4 mb-4">
<div class="media">
<div class="position-relative max-width-10 w-100 mr-3">
<img class="img-fluid" src="../../assets/img/320x320/img3.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-pos rounded-circle">1</span>
</div>
<div class="media-body">
<h2 class="h6">Vans large image t-shirt</h2>
<div class="text-secondary font-size-1">
<span>Gender:</span>
<span>Women</span>
</div>
<div class="text-secondary font-size-1">
<span>Color:</span>
<span>Core Black / Carbon</span>
</div>
<div class="text-secondary font-size-1">
<span>Size:</span>
<span>SM</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Fees -->
<div class="border-bottom pb-4 mb-4">
<div class="media align-items-center mb-3">
<h3 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Item subtotal (2)</h3>
<div class="media-body text-right">
<span class="font-weight-medium">$73.98</span>
</div>
</div>
<div class="media align-items-center mb-3">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Delivery</h4>
<div class="media-body text-right">
<span class="font-weight-medium">Free</span>
</div>
</div>
<!-- Checkbox -->
<div class="card border-0 mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio1Example2" name="deliveryRadioExampleTwo" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1Example2">
<span class="d-block font-size-1 font-weight-medium mb-1">Free - Standard delivery</span>
<span class="d-block text-muted">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="card border-0 mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio2Example2" name="deliveryRadioExampleTwo">
<label class="custom-control-label ml-1" for="deliveryRadio2Example2">
<span class="d-block font-size-1 font-weight-medium mb-1">$7.99 - Express delivery</span>
<span class="d-block text-muted">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<div class="media align-items-center">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Estimated tax</h4>
<div class="media-body text-right">
<span class="font-weight-medium">--</span>
</div>
</div>
</div>
<!-- End Fees -->
<!-- Total -->
<div class="media align-items-center">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Total</h4>
<div class="media-body text-right">
<span class="font-weight-semi-bold">$73.98</span>
</div>
</div>
<!-- End Total -->
</div>
<!-- End Order Summary -->
<!-- Accordion -->
<div id="shopCartAccordionExample2" class="accordion rounded shadow-soft mb-4">
<!-- Card -->
<div class="card rounded">
<div class="card-header card-collapse" id="shopCartHeadingOneExample2">
<h3 class="mb-0">
<button type="button" class="btn btn-link btn-block card-btn font-weight-medium collapsed"
data-toggle="collapse"
data-target="#shopCartOneExample2"
aria-expanded="false"
aria-controls="shopCartOneExample2">
Promo code?
<span class="far fa-question-circle text-secondary ml-1" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Promo code" data-content="Valid on full priced items only. Some products maybe excluded."></span>
</button>
</h3>
</div>
<div id="shopCartOneExample2" class="collapse" aria-labelledby="shopCartHeadingOneExample2" data-parent="#shopCartAccordionExample2">
<form class="js-validate p-5">
<div class="input-group input-group-pill mb-3">
<input type="text" class="form-control" name="name" placeholder="Promo code" aria-label="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-block btn-primary btn-pill transition-3d-hover">Apply</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<!-- Help Link -->
<div class="media align-items-center">
<figure id="icon4Example2" class="svg-preloader ie-height-48 w-100 max-width-6 mr-2">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4Example2">
</figure>
<div class="media-body text-secondary small">
<span class="font-weight-medium mr-1">Need Help?</span>
<a class="link-muted" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sidebar examples #9
<!-- Social Profiles -->
<div class="card mb-4">
<div class="card-header pt-4 pb-3 px-0 mx-4">
<h3 class="h6 mb-0">Social Profiles</h3>
</div>
<div class="card-body pt-3 pb-4 px-4">
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img18.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Behance</span>
<small class="d-block text-secondary">1.2k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Dribbble</span>
<small class="d-block text-secondary">4.5k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Twitter</span>
<small class="d-block text-secondary">2.7k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Facebook</span>
<small class="d-block text-secondary">3k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
</div>
<!-- End Social Profiles -->
Sidebar examples #10
Job Summary
www.slack.com
Website
London, UK
Location
Full time
Job type
1 to 3 months
Project length
Salary
$28k - $32k
Entry level
We are looking for freelancers with the lowest rates.
<!-- Sidebar Info -->
<div class="card border-0 shadow-sm mb-3">
<!-- Header -->
<header id="SVGwave1BottomShapeID1" class="svg-preloader card-header border-bottom-0 bg-primary text-white p-0">
<div class="pt-5 px-5">
<h3 class="h5">Job Summary</h3>
</div>
<figure class="ie-wave-1-bottom mt-n5">
<img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
data-parent="#SVGwave1BottomShapeID1">
</figure>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body pt-1 px-5 pb-5">
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-globe"></span>
</div>
<div class="media-body">
<a class="font-weight-medium" href="#">www.slack.com</a>
<small class="d-block text-secondary">Website</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-map-marked-alt"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">London, UK</span>
<small class="d-block text-secondary">Location</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-clock"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Full time</span>
<small class="d-block text-secondary">Job type</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-business-time"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">1 to 3 months</span>
<small class="d-block text-secondary">Project length</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-money-bill-alt"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Salary</span>
<small class="d-block text-secondary">$28k - $32k</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-briefcase"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Entry level</span>
<small class="d-block text-secondary">We are looking for freelancers with the lowest rates.</small>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Content -->
</div>
<!-- End Sidebar Info -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sidebar examples #12
Developer
Google Drive
Developer links
<div class="row">
<div class="col-md-4 col-lg-3 u-ver-divider u-ver-divider--none-md mb-9 mb-md-0">
<!-- App Info -->
<div class="mr-lg-2">
<div class="mb-7">
<div class="text-center mx-auto mb-3">
<img class="img-fluid" src="../assets/img/160x160/img23.png" alt="Image Description" width="130">
</div>
<a class="btn btn-sm btn-block btn-primary transition-3d-hover" href="#">Install Now</a>
</div>
<div class="mb-md-7">
<h1 class="h6 font-weight-semi-bold">Categories</h1>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Featured</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">File management</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Productivity</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Essential apps</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Free</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Paid</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Google</a></span>
</div>
<div class="d-none d-md-block mb-7">
<h2 class="h6 font-weight-semi-bold">Developer</h2>
<a class="d-inline-block text-secondary" href="#">
<div class="media align-items-center">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
Google Drive
</div>
</div>
</a>
</div>
<div class="d-none d-md-block mb-7">
<h3 class="h6 font-weight-semi-bold">Developer links</h3>
<ul class="list-unstyled">
<li><a class="text-secondary font-size-1" href="#"><span class="fas fa-angle-right mr-1"></span> Support</a></li>
<li><a class="text-secondary font-size-1" href="#"><span class="fas fa-angle-right mr-1"></span> Documentation</a></li>
<li><a class="text-secondary font-size-1" href="#"><span class="fas fa-angle-right mr-1"></span> Privacy Policy</a></li>
</ul>
</div>
<div class="d-none d-md-block">
<a class="small text-secondary" href="#"><span class="far fa-flag mr-1"></span> Report abuse</a>
</div>
</div>
<!-- End App Info -->
</div>
</div>