# Build your finanical tab

### Build your financial tab

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

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2F2FfxpLaQXp2DJ8aRNR5m%2FBuild_your_financial_tab.png?alt=media\&token=67cde097-6c95-4e17-aa76-ff2aa7242e26)

If you want to display your information like this you have to create a custom module and publish the cutom 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%2FXeS72qF4P9eHtrQO9qnJ%2FBuild_your_financial_tab_step1.png?alt=media\&token=04cddd9a-5e8d-44fc-97d2-f2f06b51dcf4)

#### Step-4:

Add the following code in your custom module

```html
<div class="h-block-4 h-block black">
    <div class="h-block-content">
        <div class="intro-block">
            <h2>Build your financial stability with us.</h2>
            <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
        </div>
        <div class="row">
            <div class="col-md-4">
                <ul class="nav nav-stacked">
                  <li class="active">
                    <a href="#design-tab-1" data-toggle="tab">
                      <h4>Product Customization</h4>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                    </a>
                  </li>
                  <li>
                    <a href="#design-tab-2" data-toggle="tab">
                      <h4>Support services</h4>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                    </a>
                  </li>
                  <li>
                    <a href="#design-tab-3" data-toggle="tab">
                      <h4>User interface design</h4>
                      <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                    </a>
                  </li>
                </ul>
            </div>
            <div class="col-md-8">
                <div class="tab-content">
                  <div id="design-tab-1" class="tab-pane fade in active">
                    <img src="images/themeparrot/tab_images/shopping_image.png" alt="shopping_image" />
                   <h3>
                      Curabitur ullamcorper ultricies nisi
                    </h3>
                    <p>
                      Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
                    </p>
                  </div>
                  <div id="design-tab-2" class="tab-pane fade in">
                    <img src="images/themeparrot/tab_images/support_image.png" alt="building a store for your client" />
                   <h3>
                      Curabitur ullamcorper ultricies nisi
                    </h3>
                    <p>
                      Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
                    </p>
                  </div>
                  <div id="design-tab-3" class="tab-pane fade in">
                    <img src="images/themeparrot/tab_images/template_image.png" alt="pricing table 01 min" />
                   <h3>
                      Curabitur ullamcorper ultricies nisi
                    </h3>
                    <p>
                      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
                    </p>
                  </div>
                </div>
            </div>
        </div>
        <span class="bg-span corner-top-left-bg"></span>
        <span class="bg-span corner-top-right-bg"></span>
    </div>
</div>
```