Featured Brands with Video

To show Featured Brands with Video on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.

In field HTML block:

After that, input sample content below:
<div class="halo-block halo-home-section" id="popularBrands">
<div class="popularBrands--header" data-halo-load="animation">
<div class="popularBrands--heading pos-relative text-center halo-fadeInUp" data-halo-animate="0">
<h3 class="page-heading">Shop Wheels + Rims</h3>
</div>
<div class="popularBrands--video">
<img class="popularBrands--image" src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-banner-video.jpg" alt="">
<div class="container">
<div class="popularBrands--body halo-fadeInUp" data-halo-animate="1">
<h3 class="title">Operate exceptionally well both on trails and highways</h3>
<p class="description">These tires are a good combo if you love doing street and trail riding. Built trail-tough yet also engineered for daily driving duties, the Fuel Off-Road 1-piece line is a true "no excuses" upgrade.</p>
<div class="button-group">
<a class="button button--transparent button--videos" href="#" data-reveal-id="halo-video-popup" data-url-video="https://www.youtube.com/embed/ZeKC2myhQf8?autoplay=1&mute=1" aria-label="Watch Video"><span>Watch Video</span></a>
<a class="button button--tertiary button--white" href="#" aria-label="View Products"><span>View Products</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="popularBrands--container" data-halo-load="animation">
<div class="popularBrands--heading pos-relative text-center halo-fadeInUp" data-halo-animate="1">
<h3 class="page-heading">Featured Brands</h3>
<a href="#" class="halo-link" aria-label="View All">View All</a>
</div>
<div class="popularBrands--carousel" data-halo-load="init-carousel">
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="1">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-1.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">Niche® Wheels</h4>
<div class="description">
<p>Designed for exceptional style & performance</p>
<svg>
<title>Niche® Wheels</title>
<desc>Niche® Wheels</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Niche® Wheels"></a>
</article>
</div>
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="2">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-2.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">BBS® Wheels</h4>
<div class="description">
<p>Ready to outperform & outlast the competition</p>
<svg>
<title>BBS® Wheels</title>
<desc>BBS® Wheels</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="BBS® Wheels"></a>
</article>
</div>
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="3">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-3.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">Vorsteiner® Wheels</h4>
<div class="description">
<p>Make a bold statement of style and strength</p>
<svg>
<title>Vorsteiner® Wheels</title>
<desc>Vorsteiner® Wheels</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Vorsteiner® Wheels"></a>
</article>
</div>
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="1">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-4.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">Daventry Meers®</h4>
<div class="description">
<p>Crafted with a strong commitment to luxury</p>
<svg>
<title>Daventry Meers®</title>
<desc>Daventry Meers®</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Daventry Meers®"></a>
</article>
</div>
</div>
</div>
<div id="halo-video-popup" class="modal halo-video-popup" data-reveal></div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Last updated