community-app/app/views/products/products.html

<div class="content-container">
    <div class="card">
        <div class="content">
            <div class="toolbar">
                <h4>Products</h4>
            </div>
            <br>
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="list-group">
                        <a class="list-group-item" href="#/loanproducts" has-permission='READ_LOANPRODUCT'>
                            <h4 class="list-group-item-heading"><i class="fa fa-tags fa fa-large"></i>&nbsp;&nbsp;{{
                                'label.anchor.loanproducts' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.addnewloanproductor' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/savingproducts" has-permission='READ_SAVINGSPRODUCT'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-briefcase"></i>&nbsp;&nbsp;{{
                                'label.anchor.savingproducts' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.addnewsavingproductor' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/shareproducts" has-permission='READ_SHAREPRODUCT'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-briefcase"></i>&nbsp;&nbsp;{{
                                'label.anchor.shareproducts' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.addnewshareproductor' | translate}}</p>
                        </a>

                        <a class="list-group-item" href="#/charges" has-permission='READ_CHARGE'>
                            <h4 class="list-group-item-heading"><i class="fa fa-money fa fa-large"></i>&nbsp;&nbsp;{{
                                'label.anchor.charges' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.definecharges' | translate}}</p>
                        </a>
                        <!--Rates Module-->
                        <a class="list-group-item" href="#/rates" has-permission='READ_RATE'>
                            <h4 class="list-group-item-heading"><i class="fa fa-bar-chart-o fa fa-large"></i>&nbsp;&nbsp;{{
                              'label.anchor.rates' | translate }}</h4>
                            <p class="list-group-item-text">{{'label.rates' | translate}}</p>
                        </a>

                        <a class="list-group-item" href="#/collaterals" has-permission='READ_COLLATERALS'>
                            <h4 class="list-group-item-heading"><i class="fa fa-bar-chart-o fa fa-large"></i>&nbsp;&nbsp;{{
                              'label.anchor.collaterals' | translate }}</h4>
                            <p class="list-group-item-text">{{'label.collaterals' | translate}}</p>
                        </a>

                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="list-group">
                        <a class="list-group-item" href="#/productmix" has-permission='READ_PRODUCTMIX'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-random"></i>&nbsp;&nbsp;{{
                                'label.anchor.productsmix' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.definesrulesfortakingmul' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/fixeddepositproducts" has-permission='READ_FIXEDDEPOSITPRODUCT'>
                            <h4 class="list-group-item-heading">
                                <i class="fa fa-large fa fa-briefcase"></i>&nbsp;&nbsp;{{
                                'label.anchor.fixeddepositproducts' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.fixeddepositproduct.def' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/recurringdepositproducts" has-permission='READ_RECURRINGDEPOSITPRODUCT'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-briefcase"></i>&nbsp;&nbsp;{{
                                'label.anchor.recurringdepositproducts' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.recurringdepositproduct.def' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/taxconfiguration" has-permission='READ_TAXGROUP'>
                            <h4 class="list-group-item-heading"><i class="fa fa-cogs fa fa-large"></i>&nbsp;&nbsp;
                                {{'label.anchor.managetaxconfigurations' | translate}}</h4>

                            <p class="list-group-item-text">{{'label.view.taxconfiguration' |
                                translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/floatingrates" has-permission='READ_FLOATINGRATE'>
                            <h4 class="list-group-item-heading"><i class="fa fa-money fa fa-large"></i>&nbsp;&nbsp;{{
                                'label.anchor.floatingrates' | translate }}</h4>

                            <p class="list-group-item-text">{{'label.definefloatingrates' | translate}}</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>