Aggregate Status Card

The Aggregate Status Card shows a total number of objects and an aggregated status for those objects. The most common use case for this pattern is seen in a dashboard view to illustrate the total count and the status of objects in an environment. The mini card alternate can be used in the case when there is less space available for the status card as well as when there is less information to show in the card.

Standard Card

Standard Card Example

Mini Card Alternate

Aggregate Status Card

Top Accent, Object Name and Icon

Standard Card

Header Callout 1

Mini Card Alternate

Header Callout 2

Top Accent (optional): - If the aggregate status card is located at the top of a dashboard view, you may opt to add the the blue stripe to the top of the card. If the card is located somewhere other than a dashboard, there is no blue stripe.
Object Icon (optional): - An object icon can be used before the count and object name. Be consistent; either use the icon on all the cards throughout your application, or don’t use it in any. Do not mix and match by applying icons to some cards but not others. Use icons thoughtfully and sparingly. Ensure that the icon’s symbol metaphor provides valuable meaning. Note: In the case of the mini card alternate, it is strongly recommended to use this object icon.
Total Number: - This is a number that represents a count for the total number of objects in the environment.
Total Number: - Include a label that states the object type.

Aggregate Status and Actions

Standard Card

Content Callout 1

Mini Card Alternate

Content Callout 2

Status Icon(s): - This represents the status of the objects in the card. If everything is OK, one status icon for OK should be shown. Otherwise, multiple status icons can be shown to represent each status. Note: In the case of the mini card alternate, it is recommended to limit this to one status icon due to space restrictions.
Number Count: - This shows the count associated with the icon. In general, a number next to the OK icon is redundant since the total count is already shown in the header area. Therefore, an OK status should be visually represented by an icon only. Alternatively, a card, not located in the dashboard view, may require the number count to be displayed with the OK icon. Note: In the case of the mini card alternate, it is recommended to limit this to one number due to space restrictions.
Action Icon (optional): - If no objects exist, you may want to display the create or add icon, whichever is the primary action. Note: Currently, only one action icon is supported in this design.
Tooltips: - Use tooltips as necessary. It is recommended that tooltips are used for the status and action icons.
Links: - Blue text with an underline that appears on hover reinforces that elements are interactive.

HTML/CSS
AngularJS

Jump to Regular Card or Mini Card Alternate

Regular Card

0 Ipsum

20 Amet

4 1

9 Adipiscing

Reference Markup

    <body class="cards-pf">
      ...
      <div class="container-fluid container-cards-pf">
        <div class="row row-cards-pf">
          <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="card-pf card-pf-accented card-pf-aggregate-status">
  <h2 class="card-pf-title">
    <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
    </p>
  </div>
</div>

          </div>
          <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="card-pf card-pf-accented card-pf-aggregate-status">
  <h2 class="card-pf-title">
    <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
    </p>
  </div>
</div>

          </div>
          <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="card-pf card-pf-accented card-pf-aggregate-status">
  <h2 class="card-pf-title">
    <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
    </p>
  </div>
</div>

          </div>
        </div><!-- /row -->
      </div><!-- /container -->
      <script src="/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
      <script>
      $(function() {
        // matchHeight the contents of each .card-pf and then the .card-pf itself
        $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
        // initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();
      });
      </script>
    </body>

Mini Card Alternate

0 Ipsum

20 Amet

9 Adipiscing

Reference Markup

    <body class="cards-pf">
      ...
      <div class="container-fluid container-cards-pf">
        <div class="row row-cards-pf">
          <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
  <h2 class="card-pf-title">
    <span class="fa fa-rebel"></span>
    <span class="card-pf-aggregate-status-count">0</span> Ipsum
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
    </p>
  </div>
</div>

          </div>
          <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
  <h2 class="card-pf-title">
    <a href="#">
      <span class="fa fa-paper-plane"></span>
      <span class="card-pf-aggregate-status-count">20</span> Amet
    </a>
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
    </p>
  </div>
</div>

          </div>
          <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
  <h2 class="card-pf-title">
    <a href="#">
      <span class="pficon pficon-cluster"></span>
      <span class="card-pf-aggregate-status-count">9</span> Adipiscing
    </a>
  </h2>
  <div class="card-pf-body">
    <p class="card-pf-aggregate-status-notifications">
      <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
    </p>
  </div>
</div>

          </div>
        </div><!-- /row -->
      </div><!-- /container -->
      <script src="/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
      <script>
      $(function() {
        // matchHeight the contents of each .card-pf and then the .card-pf itself
        $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
        $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
        // initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();
      });
      </script>
    </body>