patternfly/angular-patternfly

<div ng-if="!$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder, 'card-pf-aggregate-status-alt': $ctrl.isAltLayout}" ng-style="$ctrl.showSpinner ? $ctrl.spinnerHeight : {}">
  <h2 class="card-pf-title">
    <a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
      <image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
      <span class="{{$ctrl.status.iconClass}}"></span>
      <span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
      <span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
    </a>
    <span ng-if="!$ctrl.status.href">
      <image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
      <span class="{{$ctrl.status.iconClass}}"></span>
      <span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
      <span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
    </span>
  </h2>
  <div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
    <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>
    <p class="card-pf-aggregate-status-notifications" ng-class="{'hide-for-spinner': $ctrl.showSpinner}">
      <span class="card-pf-aggregate-status-notification" ng-repeat="notification in $ctrl.status.notifications">
        <a href="{{notification.href}}" ng-if="notification.href">
          <image ng-if="notification.iconImage" ng-src="{{notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
          <span class="{{notification.iconClass}}"></span>{{ notification.count }}
        </a>
        <span ng-if="!notification.href">
          <image ng-if="notification.iconImage" ng-src="{{notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
          <span class="{{notification.iconClass}}"></span>{{ notification.count }}
        </span>
      </span>
    </p>
  </div>
</div>
<div ng-if="$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}" ng-style="$ctrl.showSpinner ? $ctrl.spinnerHeight : {}">
  <h2 class="card-pf-title">
    <a ng-if="$ctrl.status.href" href="{{$ctrl.status.href}}">
      <image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
      <span ng-if="$ctrl.status.iconClass" class="{{$ctrl.status.iconClass}}"></span>
      <span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
      {{$ctrl.status.title}}
    </a>
    <span ng-if="!$ctrl.status.href">
      <span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
      {{$ctrl.status.title}}
    </span>
  </h2>
  <div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
    <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>
    <p ng-if="$ctrl.status.notification.iconImage || $ctrl.status.notification.iconClass || $ctrl.status.notification.count" class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification">
        <a ng-if="$ctrl.status.notification.href" href="{{$ctrl.status.notification.href}}">
          <image ng-if="$ctrl.status.notification.iconImage" ng-src="{{$ctrl.status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
          <span ng-if="$ctrl.status.notification.iconClass" class="{{$ctrl.status.notification.iconClass}}"></span><span ng-if="$ctrl.status.notification.count">{{$ctrl.status.notification.count}}</span>
        </a>
        <span ng-if="!$ctrl.status.notification.href">
          <image ng-if="$ctrl.status.notification.iconImage" ng-src="{{$ctrl.status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
          <span ng-if="$ctrl.status.notification.iconClass" class="{{$ctrl.status.notification.iconClass}}"></span><span ng-if="$ctrl.status.notification.count">{{$ctrl.status.notification.count}}</span>
        </span>
      </span>
    </p>
  </div>
</div>