patternfly/angular-patternfly

<div class="card-pf" ng-class="{'card-pf-accented': $ctrl.showTopBorder === 'true'}">
  <div ng-if="$ctrl.showHeader()" ng-class="$ctrl.shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
    <div ng-if="$ctrl.showFilterInHeader()" class="card-pf-footer-in-header" ng-class="{'hide-for-spinner': $ctrl.showSpinner}" ng-include="'card/basic/card-filter.html'"></div>
    <h2 class="card-pf-title">{{$ctrl.headTitle}}</h2>
  </div>
  <span ng-if="$ctrl.subTitle" class="card-pf-subtitle">{{$ctrl.subTitle}}</span>

  <div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
    <div ng-class="{'hide-for-spinner': $ctrl.showSpinner}" ng-transclude></div>
    <div ng-if="$ctrl.showSpinner" class="spinner-container">
      <div class="loading-indicator">
        <span class="spinner spinner-lg" aria-hidden="true"></span>
        <span ng-if="$ctrl.spinnerText" class="loading-text">{{$ctrl.spinnerText}}</span>
        <label ng-if="!$ctrl.spinnerText" class="sr-only">Loading</label>
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.footer" class="card-pf-footer" ng-class="{'hide-for-spinner': $ctrl.showSpinner}">
    <div ng-if="$ctrl.showFilterInFooter()" ng-include="'card/basic/card-filter.html'"></div>
    <p>
      <a ng-if="$ctrl.footer.href" href="{{$ctrl.footer.href}}" ng-class="{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}">
        <span ng-if="$ctrl.footer.iconClass" class="{{$ctrl.footer.iconClass}} card-pf-footer-text"></span>
        <span ng-if="$ctrl.footer.text" class="card-pf-footer-text">{{$ctrl.footer.text}}</span>
      </a>
      <a ng-if="$ctrl.footer.callBackFn && !$ctrl.footer.href" ng-click="$ctrl.footerCallBackFn()" ng-class="{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}">
        <span class="{{$ctrl.footer.iconClass}} card-pf-footer-text" ng-if="$ctrl.footer.iconClass"></span>
        <span class="card-pf-footer-text" ng-if="$ctrl.footer.text">{{$ctrl.footer.text}}</span>
      </a>
      <span ng-if="!$ctrl.footer.href && !$ctrl.footer.callBackFn">
        <span ng-if="$ctrl.footer.iconClass" class="{{$ctrl.footer.iconClass}} card-pf-footer-text" ng-class="{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}"></span>
        <span ng-if="$ctrl.footer.text" class="card-pf-footer-text">{{$ctrl.footer.text}}</span>
      </span>
    </p>
  </div>
</div>