<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>