> For the complete documentation index, see [llms.txt](https://jdocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jdocs.themeparrot.com/joomla-templates/business/layout-customization/home-style-1/feature-tab.md).

# Feature tab

### Features tab

> Module position: home-2
>
> Module class suffix: Not used

![](/files/Ktd5emZReeRHfKsEoa2D)

If you want to create your feature tab like this you have to create a custom and publish the custom module like below

#### Step-1:

![](/files/DqHWUJNABcArN3MACQDR)

#### Step-2:

![](/files/CDUjIBqkvBCO52eD2gyX)

#### Step-3:

![](/files/ueTiCpXGaXaEo0Xt3d0g)

#### Step-4:

Add the following code in your custom module

```html
<div class="h-block-2 white h-block">
  <div class="h-block-content">
    <div class="features-content">
      <h2>Happy Clients. Happy You.</h2>
      <p>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
    </div>
    <div class="features-tab">
      <ul class="nav nav-pills">
          <li class="active">
          <a data-toggle="tab" href="#feature-button-1">
            <img src="images/themeparrot/tab_images/template.png" alt="template_icon" class="img-responsive" />
            <h4>Template modeling</h4>
          <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
          </a>
      </li>
          <li>
          <a data-toggle="tab" href="#feature-button-2">
            <img src="images/themeparrot/tab_images/shopping.png" alt="product_icon" class="img-responsive" />
            <h4>Product Modeling</h4>
              <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
            </a>
          </li>
          <li>
          <a data-toggle="tab" href="#feature-button-3">
            <img src="images/themeparrot/tab_images/support_icons.png" alt="support_icon" class="img-responsive" />
              <h4>Support service</h4>
              <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
          </a>
          </li>
      </ul>
    </div>
    <div class="features-tab-content">
      <div class="tab-content">
        <div class="tab-pane fade active in" id="feature-button-1"><img alt="sell just about anything" class="img-responsive" src="images/themeparrot/tab_images/template_image.png" />
        </div>
        <div class="tab-pane fade in" id="feature-button-2"><img alt="sell stuff with us" class="img-responsive" src="images/themeparrot/tab_images/shopping_image.png" />
        </div>
        <div class="tab-pane fade in" id="feature-button-3"><img alt="cut it out" class="img-responsive" src="images/themeparrot/tab_images/support_image.png" />
        </div>
      </div>
    </div>
    <span class="bg-span corner-top-left-bg"></span>
    <span class="bg-span corner-top-right-bg"></span>
  </div>
</div>
```