patternfly
Version:
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.
159 lines (158 loc) • 6.88 kB
HTML
<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">
{% include widgets/cards/aggregate-status-ipsum.html %}
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
{% include widgets/cards/aggregate-status-amet.html %}
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
{% include widgets/cards/aggregate-status-adipiscing.html %}
</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 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">
{% include widgets/cards/aggregate-status-ipsum-mini.html %}
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
{% include widgets/cards/aggregate-status-amet-mini.html %}
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
{% include widgets/cards/aggregate-status-adipiscing-mini.html %}
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<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>
<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">
{% include widgets/cards/utilization-bar-top-labels.html %}
</div>
<div class="col-xs-12 col-sm-6">
{% include widgets/cards/utilization-bar-side-labels.html %}
</div>
</div><!-- /row -->
<div class="row row-cards-pf">
<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">
<!-- 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-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 -->