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.
56 lines • 2.07 kB
HTML
<div class="list-group list-view-pf">
<div class="list-group-item">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-plane list-view-pf-icon-sm"></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>8</strong> Clusters
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-container-node"></span>
<strong>18</strong> Nodes
</div>
<div class="list-view-pf-additional-info-item">
<span class="pficon pficon-image"></span>
<strong>4</strong> Images
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Row Checkbox Selection
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('.list-group-item').addClass("active");
} else {
$(this).closest('.list-group-item').removeClass("active");
}
});
});
</script>