patternfly/tests/pages/_includes/widgets/list-view/list-view-variation-4.html

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.

{% assign id = include.id | default: 'pf-list-var4' %}
<div id="{{id}}" 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-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>
      </div>
    </div>
  </div>
</div>
<script>
  // Row Checkbox Selection
  $(document).ready(function () {
    $("#{{id}} 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>