# Feature tab

### Features tab

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

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FkTaXoF0173kdeqvq7J4a%2FFeatures_tab.png?alt=media\&token=b69643d1-e219-4183-b726-47ca81d2507c)

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:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FGZZAJzC2SGabrLIUwQpM%2F3_Offcanvas_menu_configuration_step1.png?alt=media\&token=8824c42e-997f-4266-8595-cea89c4e68bd)

#### Step-2:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2Fgswjw5Yf1Poa6BKoMshQ%2FHome_page_banner_step2.png?alt=media\&token=172aefbe-ee77-4dfb-aee4-9e06c9ea5413)

#### Step-3:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FZn7SksgYJYnWwaY9Ojg1%2FFeatures_tab_step1.png?alt=media\&token=c2529c6c-98d3-48b2-b5a6-ce405f8f444f)

#### 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>
```