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.
47 lines • 1.87 kB
HTML
<div class="list-group list-view-pf">
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
<div class="list-view-pf-checkbox">
<input type="checkbox">
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default">Action</button>
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight3" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Event Ones
</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 list-view-pf-additional-info-item-stacked">
<strong>113,735</strong> Service One
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>35%</strong> Service Two
</div>
<div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
<strong>22.0%</strong> Service Three
</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>