<div class="card-pf card-pf-view card-pf-view-xs">
    <div class="card-pf-body">
        <div class="card-pf-heading-kebab">
            <div class="dropdown pull-right dropdown-kebab-pf">
                <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span class="fa fa-ellipsis-v"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropupKebabRight2">
                    <li *ngIf="app.effectiveUrl"><a href="{{app.effectiveUrl}}">Go to Application</a></li>
                    <li><a href="#">Revoke Grant</a></li>
                    <li><a href="#">Logout Session(s)</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>

            <h2 class="card-pf-title">
                <span class="pficon {{app.icon}}"></span> {{app.name}}
            </h2>
        </div>
        <div class="progress-pf-legend">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
                    <span class="sr-only">25% Used</span>
                </div>
                <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
                    <span class="sr-only">75% Available</span>
                </div>
            </div>
            <script>
                // Initialize Tooltip
                jQuery(document).ready(function () {
                    jQuery('[data-toggle="tooltip"]').tooltip();
                });
            </script>

            <p><span class="pficon pficon-warning-triangle-o"></span> <strong>10%</strong> in use</p>
        </div>
    </div>
</div>