Hero Products
Ready-to-use Shop product blocks and components.
Products hero #1
New Era 9Forty LA Dodgers adjustable cap in black
American label New Era manufacturing baseball hats for teams since the 1930s.
Total price:
$159.99We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.
If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.
Need Help?
Chat now
<!-- Hero Section -->
<div class="container space-top-1 space-top-sm-2">
<div class="row">
<div class="col-lg-7 mb-7 mb-lg-0">
<div class="pr-lg-4">
<div class="position-relative">
<!-- Main Slider -->
<div id="heroSlider" class="js-slick-carousel u-slick border rounded"
data-fade="true"
data-infinite="true"
data-autoplay-speed="7000"
data-arrows-classes="d-none d-sm-inline-block u-slick__arrow u-slick__arrow--flat-white content-centered-y shadow-soft rounded-circle"
data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-3"
data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-3"
data-nav-for="#heroSliderNav">
<div class="js-slide">
<img class="img-fluid w-100 rounded" src="../../assets/img/600x600/img12.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100 rounded" src="../../assets/img/600x600/img13.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100 rounded" src="../../assets/img/600x600/img14.jpg" alt="Image Description">
</div>
</div>
<!-- End Main Slider -->
<!-- Slider Nav -->
<div class="position-absolute bottom-0 right-0 left-0 px-4 py-3">
<div id="heroSliderNav" class="js-slick-carousel u-slick u-slick--gutters-1 u-slick--transform-off max-width-27 mx-auto"
data-slides-show="3"
data-infinite="true"
data-autoplay-speed="7000"
data-is-thumbs="true"
data-is-thumbs-progress="true"
data-thumbs-progress-options='{
"color": "#377DFF",
"width": 8
}'
data-thumbs-progress-container=".js-slick-thumb-progress"
data-nav-for="#heroSlider">
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img16.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img17.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress position-relative d-block u-avatar border rounded-circle p-1" href="javascript:;">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img18.jpg" alt="Image Description">
</a>
</div>
</div>
</div>
<!-- End Slider Nav -->
</div>
</div>
</div>
<!-- Product Description -->
<div class="col-lg-5">
<!-- Rating -->
<div class="d-flex align-items-center small mb-2">
<div class="text-warning mr-2">
<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>
</div>
<a class="js-go-to link-muted" href="#reviewSection"
data-target="#reviewSection"
data-compensation="#header"
data-type="static">Read all 287 reviews</a>
</div>
<!-- End Rating -->
<!-- Title -->
<div class="mb-5">
<h1 class="h3 font-weight-medium">New Era 9Forty LA Dodgers adjustable cap in black</h1>
<p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
</div>
<!-- End Title -->
<!-- Price -->
<div class="mb-5">
<h2 class="font-size-1 text-secondary font-weight-medium mb-0">Total price:</h2>
<span class="font-size-2 font-weight-medium">$159.99</span>
<span class="text-secondary ml-2"><del>$179.99</del></span>
</div>
<!-- End Price -->
<!-- Quantity -->
<div class="border rounded py-2 px-3 mb-3">
<div class="js-quantity row align-items-center">
<div class="col-7">
<small class="d-block text-secondary font-weight-medium">Select quantity</small>
<input class="js-result form-control h-auto border-0 rounded p-0" type="text" value="1">
</div>
<div class="col-5 text-right">
<a class="js-minus btn btn-icon btn-xs btn-outline-secondary rounded-circle" href="javascript:;">
<small class="fas fa-minus btn-icon__inner"></small>
</a>
<a class="js-plus btn btn-icon btn-xs btn-outline-secondary rounded-circle" href="javascript:;">
<small class="fas fa-plus btn-icon__inner"></small>
</a>
</div>
</div>
</div>
<!-- End Quantity -->
<!-- Accordion -->
<div id="shopCartAccordion" class="accordion mb-5">
<!-- Card -->
<div class="card">
<div class="card-header card-collapse" id="shopCardHeadingOne">
<h3 class="mb-0">
<button type="button" class="btn btn-link btn-block card-btn collapsed"
data-toggle="collapse"
data-target="#shopCardOne"
aria-expanded="false"
aria-controls="shopCardOne">
<span class="row align-items-center">
<span class="col-9">
<span class="media align-items-center">
<span id="icon65" class="svg-preloader ie-height-48 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-65.svg" alt="SVG"
data-parent="#icon65">
</span>
<span class="media-body">
<span class="d-block font-size-1 font-weight-medium">Free shipping</span>
</span>
</span>
</span>
<span class="col-3 text-right">
<span class="card-btn-arrow">
<span class="fas fa-arrow-down small"></span>
</span>
</span>
</span>
</button>
</h3>
</div>
<div id="shopCardOne" class="collapse" aria-labelledby="shopCardHeadingOne" data-parent="#shopCartAccordion">
<div class="card-body">
<p class="small mb-0">We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.</p>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-header card-collapse" id="shopCardHeadingTwo">
<h4 class="mb-0">
<button type="button" class="btn btn-link btn-block card-btn collapsed"
data-toggle="collapse"
data-target="#shopCardTwo"
aria-expanded="false"
aria-controls="shopCardTwo">
<span class="row align-items-center">
<span class="col-9">
<span class="media align-items-center">
<span id="icon64" class="svg-preloader ie-height-48 w-100 max-width-6 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-64.svg" alt="SVG"
data-parent="#icon64">
</span>
<span class="media-body">
<span class="d-block font-size-1 font-weight-medium">30 Days return</span>
</span>
</span>
</span>
<span class="col-3 text-right">
<span class="card-btn-arrow">
<span class="fas fa-arrow-down small"></span>
</span>
</span>
</span>
</button>
</h4>
</div>
<div id="shopCardTwo" class="collapse" aria-labelledby="shopCardHeadingTwo" data-parent="#shopCartAccordion">
<div class="card-body">
<p class="small mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<div class="mb-4">
<button type="button" class="btn btn-block btn-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
<!-- Help Link -->
<div class="media align-items-center">
<span 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">
</span>
<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>
<!-- End Product Description -->
</div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.quantity-counter.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
}
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of quantity counter
$.HSCore.components.HSQantityCounter.init('.js-quantity');
});
</script>