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.
121 lines (120 loc) • 4.43 kB
HTML
{% assign id = include.id | default: 'pf-list-var5' %}
<div id="{{id}}" class="list-group list-view-pf list-view-pf-equalized-column">
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-ok list-view-pf-icon-md list-view-pf-icon-success"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event One
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>108</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-info list-view-pf-icon-md list-view-pf-icon-info"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event One
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-warning-triangle-o list-view-pf-icon-md list-view-pf-icon-warning"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event One
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>108</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="pficon pficon-error-circle-o list-view-pf-icon-md list-view-pf-icon-danger"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event One
</div>
<div class="list-group-item-text">
The following snippet of text is <a href="#">rendered as link text</a>.
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-screen"></span>
<strong>8</strong> Hosts
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-cluster"></span>
<strong>28</strong> Clusters
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Equalize column width
$(document).ready(function () {
var widest = 0;
$('#{{id}} .list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
widest = $(this).width() > widest ? $(this).width() : widest;
}).width(widest);
});
</script>