> 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-tools/brands-block.md).

# Brands Block

<figure><img src="/files/53POoMgTGpKrHLT6X92l" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Recommended Banner Size: **170x80px**. 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 **Brands Block** on Home page, In the Page Builder -> Go to **Widgets** -> drag and drop **HTML block** into specified sections.

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

In field **HTML block**:

<figure><img src="/files/FzQj6nMIFryAJeLiKPN3" 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="topBrands" data-halo-load="animation">
    <div class="container">
        <div class="topBrands--heading pos-relative text-left halo-fadeInUp" data-halo-animate="0">
            <h3 class="page-heading">We Carry Top Brands</h3>
            <a class="link" href="#">View More</a>
        </div>
        <div class="topBrands--carousel pos-relative c-6" data-col="8" data-row="2" data-halo-load="init-carousel">
            <div class="item halo-fadeInUp" data-halo-animate="1">
                <a href="#" class="topBrands--item" aria-label="Brand 1">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-1.jpg" alt="Brand 1"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="1">
                <a href="#" class="topBrands--item" aria-label="Brand 2">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-9.jpg" alt="Brand 2"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="2">
                <a href="#" class="topBrands--item" aria-label="Brand 3">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-2.jpg" alt="Brand 3"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="2">
                <a href="#" class="topBrands--item" aria-label="Brand 4">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-10.jpg" alt="Brand 4"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="3">
                <a href="#" class="topBrands--item" aria-label="Brand 5">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-3.jpg" alt="Brand 5"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="3">
                <a href="#" class="topBrands--item" aria-label="Brand 6">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-11.jpg" alt="Brand 6"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="4">
                <a href="#" class="topBrands--item" aria-label="Brand 7">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-4.jpg" alt="Brand 7"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="4">
                <a href="#" class="topBrands--item" aria-label="Brand 8">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-12.jpg" alt="Brand 8"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="5">
                <a href="#" class="topBrands--item" aria-label="Brand 9">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-5.jpg" alt="Brand 9"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="5">
                <a href="#" class="topBrands--item" aria-label="Brand 10">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-13.jpg" alt="Brand 10"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="6">
                <a href="#" class="topBrands--item" aria-label="Brand 11">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-6.jpg" alt="Brand 11"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="6">
                <a href="#" class="topBrands--item" aria-label="Brand 12">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-14.jpg" alt="Brand 12"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="7">
                <a href="#" class="topBrands--item" aria-label="Brand 13">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-7.jpg" alt="Brand 13"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="7">
                <a href="#" class="topBrands--item" aria-label="Brand 14">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-15.jpg" alt="Brand 14"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="8">
                <a href="#" class="topBrands--item" aria-label="Brand 15">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-8.jpg" alt="Brand 15"/>
                </a> 
            </div>
            <div class="item halo-fadeInUp" data-halo-animate="8">
                <a href="#" class="topBrands--item" aria-label="Brand 16">
                    <img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-16.jpg" alt="Brand 16"/>
                </a> 
            </div>
        </div>
    </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/YzRwZLq>" %}

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