# Home 1 List Features module

### 11. Home 1 List Features module

> Module position: tp-products Module class suffix: tp-title-center tp-home-intro tp-feature-2

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FYWoweib2lk1kGABZs9WH%2Fhome1_list.png?alt=media\&token=47686bec-e4d9-41fb-b93f-f381e147893a)

If you want your module this way, **Go to backend: Extensions --> Module Manager --> New --> Select type as Custom Html Module** with the settings below:

#### Step-1:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FC7hM4dVUEG3kWKw1bBkr%2Fhome1_list_step1.png?alt=media\&token=6fe641b8-251f-472c-9c65-47c6375d1533)

#### Step-2:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FLi1aupf6ixe7KXViGW4C%2Fhome1_list_step2.png?alt=media\&token=cf3ed07c-c391-4805-8ab1-f17dda87441d)

Add the following html code in your custom html module

#### Step-3:

```html
<div class="col-md-4 col-sm-6">
    <div class="services-box-3"><em class="icon-diamond2"></em>
        <div class="content">
            <h3>Modern Design</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting the 
readable content.</p>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6">
    <div class="services-box-3"><em class="icon-params"></em>
        <div class="content">
            <h3>easy to customize</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting the 
readable content.</p>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6">
    <div class="services-box-3"><em class="icon-heart2"></em>
        <div class="content">
            <h3>Google Fonts</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting the 
readable content.</p>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6">
    <div class="services-box-3"><em class="icon-line-flag"></em>
        <div class="content">
            <h3>100% Translatable</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting the 
readable content.</p>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6">
    <div class="services-box-3"><em class="icon-line-layers"></em>
        <div class="content">
            <h3>Premium Slider</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting the 
readable content.</p>
        </div>
    </div>
</div>
<div class="col-md-4 col-sm-6">
    <div class="services-box-3"><em class="icon-chat-3"></em>
        <div class="content">
            <h3>Awesome Support</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
the readable content.</p>
        </div>
    </div>
</div>
```

#### Step-4:

Once the above code is added Save and close the settings