patternfly/tests-src/_includes/widgets/layouts/cards.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

      <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-6 col-sm-4 col-md-2">
{% include widgets/cards/aggregate-status-ipsum.html %}
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2">
{% include widgets/cards/aggregate-status-amet.html %}
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2">
{% include widgets/cards/aggregate-status-adipiscing.html %}
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2">
          <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 class="col-xs-6 col-sm-4 col-md-2">
          <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">6</span> Dolar Sit</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 class="col-xs-6 col-sm-4 col-md-2">
          <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">199</span> Consectetur</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 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-4 col-md-3 col-lg-2">
{% include widgets/cards/aggregate-status-ipsum-mini.html %}
        </div>
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
{% include widgets/cards/aggregate-status-amet-mini.html %}
        </div>
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
{% include widgets/cards/aggregate-status-adipiscing-mini.html %}
        </div>
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
            <h2 class="card-pf-title">
              <span class="pficon pficon-image"></span>
              <a href="#">
                <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 class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
          <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-shield"></span>
              <a href="#">
                <span class="card-pf-aggregate-status-count">6</span> Dolar Sit
              </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 class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
          <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-rocket"></span>
              <a href="#">
                <span class="card-pf-aggregate-status-count">199</span> Consectetur
              </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>23</span></a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row row-cards-pf">
        <div class="col-xs-12 col-sm-6 col-md-4">
{% include widgets/cards/utilization-bar-top-labels.html %}
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
{% include widgets/cards/utilization-bar-side-labels.html %}
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="card-pf">
            <div class="card-pf-heading">
              <h2 class="card-pf-title">
                Quotas
              </h2>
            </div>
            <div class="card-pf-body">
              <div class="progress-container progress-description-left">
                <div class="progress-description">
                  CPU
                </div>
                <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>
              </div>
              <div class="progress-container progress-description-left">
                <div class="progress-description">
                  Memory
                </div>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
                    <span class="sr-only">50% Used</span>
                  </div>
                  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
                    <span class="sr-only">50% Available</span>
                  </div>
                </div>
              </div>
              <div class="progress-container progress-description-left">
                <div class="progress-description">
                  Pods
                </div>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
                    <span class="sr-only">62.5% Used</span>
                  </div>
                  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
                    <span class="sr-only">37.5% Available</span>
                  </div>
                </div>
              </div>
              <div class="progress-container progress-description-left">
                <div class="progress-description">
                  Services
                </div>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
                    <span class="sr-only">100% Used</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- /row -->
      <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-md-12">
{% include widgets/cards/utilization-trend-multiple-metrics.html id3="chart-pf-donut-1" id4="chart-pf-sparkline-1" id5="chart-pf-donut-2" id6="chart-pf-sparkline-2" id7="chart-pf-donut-3" id8="chart-pf-sparkline-3" %}
        </div>
      </div><!-- /row -->
      <div class="row row-cards-pf">
        <div class="col-xs-12 col-sm-4 col-md-4">
{% include widgets/cards/utilization-trend-single-metric.html id1="chart-pf-donut-4" id2="chart-pf-sparkline-4" %}
        </div>
      </div><!-- /row -->
      <div class="row row-cards-pf">
        <div class="col-xs-12 col-sm-6 col-md-5">
{% include widgets/cards/dashboard-timeframe-header.html %}
        </div>
        <div class="col-xs-12 col-sm-6 col-md-7">
{% include widgets/cards/dashboard-timeframe-footer.html %}
        </div>
      </div><!-- /row -->
      <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-5 col-md-5">
          <div class="card-pf">
            <h2 class="card-pf-title">
              Card Title
            </h2>
            <div class="card-pf-body">
              <p>[card contents]</p>
            </div>
            <div class="card-pf-footer">
              <div class="dropdown card-pf-time-frame-filter">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  Last 30 Days <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                  <li><a href="#">Last 60 Days</a></li>
                  <li><a href="#">Last 90 Days</a></li>
                </ul>
              </div>
              <p>
                <a href="#" class="card-pf-link-with-icon">
                  <span class="pficon pficon-flag"></span>View CPU Events
                </a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-7 col-md-7">
          <div class="card-pf">
            <h2 class="card-pf-title">
              Card Title
            </h2>
            <div class="card-pf-body">
              <p>[card contents]</p>
            </div>
          </div>
        </div>
      </div>
      <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-6 col-sm-8 col-md-8">
          <div class="card-pf">
            <div class="card-pf-body">
              <p>[card contents]</p>
            </div>
            <div class="card-pf-footer">
              <p><a href="#">Footer link</a></p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4">
          <div class="card-pf">
            <div class="card-pf-body">
              <p>[card contents]</p>
            </div>
            <div class="card-pf-footer">
              <p><a href="#">Footer link</a></p>
            </div>
          </div>
        </div>
      </div><!-- /row -->
      <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-6 col-sm-6 col-md-6">
          <div class="card-pf">
            <div class="card-pf-body">
              <p>[card contents]</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6">
          <div class="card-pf">
            <div class="card-pf-body">
              <p>[card contents]</p>
            </div>
          </div>
        </div>
      </div><!-- /row -->