> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/spark-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/spark-documentation/home-automotive/featured-brands-with-video.md).

# Featured Brands with Video

<figure><img src="/files/X0KzuMWWFLgYtcwBTPgX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Recommended Banner Size: **1920x920px** and **380x130px**. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
{% endhint %}

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

<figure><img src="/files/h3P5OhULZClQw8n8cW5j" alt=""><figcaption></figcaption></figure>

In field **HTML block**:

<figure><img src="/files/OoXFkQ9Mi1y7bVzsc1wB" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save HTML** and **Publish** to repackage the edited theme.
{% endhint %}

After that, input sample content below:

```html
<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.

{% embed url="<https://codepen.io/HaloThemes/pen/OJaygEN>" %}

{% hint style="info" %}
Please click the "Run Pen" button to be used
{% endhint %}