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.
267 lines (266 loc) • 12.1 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-6 col-sm-4 col-md-2">
<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-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">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-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">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-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">
<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-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-paper-plane"></span>
<a href="#">
<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-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-cluster"></span>
<a href="#">
<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-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><!-- /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-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">
<p><a href="#">Footer link</a></p>
</div>
</div>
</div>
<div class="col-xs-6 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><!-- /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-3 col-md-3">
<div class="card-pf">
<div class="card-pf-heading">
<h2 class="card-pf-title">
Card Title
</h2>
</div>
<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-9 col-md-9">
<div class="card-pf">
<div class="card-pf-heading">
<h2 class="card-pf-title">
Card Title
</h2>
</div>
<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-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 -->