# Featured Categories

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FVt7KLuWKyzr5x89uZsE5%2Fimage.png?alt=media&#x26;token=5fcd8cf1-7d66-43c6-a2e9-d9ae56a19384" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FmEMwAOE5gpfrliBoPN3D%2Fimage.png?alt=media&#x26;token=15610e4a-8008-45da-9ece-9422feb04aab" alt=""><figcaption></figcaption></figure>

In field **HTML block**:

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FX4EYjl3sYjVzZTa4DiEe%2Fimage.png?alt=media&#x26;token=40e6c99d-302d-4665-ac4a-9a9815725043" 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 halo-bgGray" id="featuredCates" data-halo-load="animation">
    <div class="container">
        <div class="featuredCates--heading pos-relative text-center halo-fadeInUp" data-halo-animate="1">
            <h3 class="page-heading">Featured Categories</h3>
            <a href="#" class="halo-link" aria-label="Browse All">Browse All</a>
        </div>
        <div class="c-3">
            <div class="featuredCates--carousel" data-row="1" data-halo-load="init-carousel">
                <div class="item">
                    <article class="featuredCates--card halo-fadeInUp" data-halo-animate="1">
                        <figure class="featuredCates--figure">
                            <img class="featuredCates--image"
                                src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-1.jpg"
                                alt="Headlights">
                        </figure>
                        <div class="featuredCates--body">
                            <h4 class="title">Headlights</h4>
                            <div class="description">
                                <p>Full beam headlights</p>
                                <svg>
                                    <title>Headlights</title>
                                    <desc>Headlights</desc>
                                    <use xlink:href="#icon-chevron-right" />
                                </svg>
                            </div>
                        </div>
                        <a href="#" aria-label="Headlights"></a>
                    </article>
                    <article class="featuredCates--card halo-fadeInUp" data-halo-animate="1">
                        <figure class="featuredCates--figure">
                            <img class="featuredCates--image"
                                src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-2.jpg"
                                alt="Body Kits">
                        </figure>
                        <div class="featuredCates--body">
                            <h4 class="title">Body Kits</h4>
                            <div class="description">
                                <p>Looking for car, truck, and SUV</p>
                                <svg>
                                    <title>Body Kits</title>
                                    <desc>Body Kits</desc>
                                    <use xlink:href="#icon-chevron-right" />
                                </svg>
                            </div>
                        </div>
                        <a href="#" aria-label="Body Kits"></a>
                    </article>
                </div>
                <div class="item">
                    <article class="featuredCates--card halo-fadeInUp" data-halo-animate="2">
                        <figure class="featuredCates--figure">
                            <img class="featuredCates--image"
                                src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-3.jpg"
                                alt="Brakes">
                        </figure>
                        <div class="featuredCates--body">
                            <h4 class="title">Brakes</h4>
                            <div class="description">
                                <p>Just lightly press the brake</p>
                                <svg>
                                    <title>Brakes</title>
                                    <desc>Brakes</desc>
                                    <use xlink:href="#icon-chevron-right" />
                                </svg>
                            </div>
                        </div>
                        <a href="#" aria-label="Brakes"></a>
                    </article>
                    <article class="featuredCates--card halo-fadeInUp" data-halo-animate="2">
                        <figure class="featuredCates--figure">
                            <img class="featuredCates--image"
                                src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-4.jpg"
                                alt="Wheels & Rims">
                        </figure>
                        <div class="featuredCates--body">
                            <h4 class="title">Wheels & Rims</h4>
                            <div class="description">
                                <p>Energy saving</p>
                                <svg>
                                    <title>Wheels & Rims</title>
                                    <desc>Wheels & Rims</desc>
                                    <use xlink:href="#icon-chevron-right" />
                                </svg>
                            </div>
                        </div>
                        <a href="#" aria-label="Wheels & Rims"></a>
                    </article>
                </div>
                <div class="item">
                    <article class="featuredCates--card halo-fadeInUp" data-halo-animate="3">
                        <figure class="featuredCates--figure">
                            <img class="featuredCates--image"
                                src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-5.jpg"
                                alt="Seat Covers">
                        </figure>
                        <div class="featuredCates--body">
                            <h4 class="title">Seat Covers</h4>
                            <div class="description">
                                <p>High-grade waterproof</p>
                                <svg>
                                    <title>Seat Covers</title>
                                    <desc>Seat Covers</desc>
                                    <use xlink:href="#icon-chevron-right" />
                                </svg>
                            </div>
                        </div>
                        <a href="#" aria-label="Seat Covers"></a>
                    </article>
                    <article class="featuredCates--card halo-fadeInUp" data-halo-animate="3">
                        <figure class="featuredCates--figure">
                            <img class="featuredCates--image"
                                src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-6.jpg"
                                alt="Tail Lights">
                        </figure>
                        <div class="featuredCates--body">
                            <h4 class="title">Tail Lights</h4>
                            <div class="description">
                                <p>Very bright in the night</p>
                                <svg>
                                    <title>Tail Lights</title>
                                    <desc>Tail Lights</desc>
                                    <use xlink:href="#icon-chevron-right" />
                                </svg>
                            </div>
                        </div>
                        <a href="#" aria-label="Tail Lights"></a>
                    </article>
                </div>
            </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/oNQjZOB" %}

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