Build your finanical tab

Build your financial tab

Module position: home-4

Module class suffix: Not used

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:

Step-2:

Step-3:

Step-4:

Add the following code in your custom module

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