# Build your finanical tab

### Build your financial tab

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

![](/files/bYgOOM6Nk8bK3nISRgZ5)

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:

![](/files/DqHWUJNABcArN3MACQDR)

#### Step-2:

![](/files/CDUjIBqkvBCO52eD2gyX)

#### Step-3:

![](/files/R4hyIyFRPZ2k1cFFTjrw)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jdocs.themeparrot.com/joomla-templates/business/layout-customization/home-style-1/build-your-finanical-tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.