{% extends "overview/base.html" %}

{% block content %}
<div class="container">
  <div class="row row-cards-pf">
    <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
    <div class="col-xs-12 col-sm-6 col-md-3">
      <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-12 col-sm-6 col-md-3">
      <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-12 col-sm-6 col-md-3">
      <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 class="col-xs-12 col-sm-6 col-md-3">
      <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">12</span> Lorem</a>
        </h2>
        <div class="card-pf-body">
          <p class="card-pf-aggregate-status-notifications">
            <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
          </p>
        </div>
      </div>
    </div>
  </div><!-- /row -->
</div>
{% endblock %}