List View

A List View displays data in rows. Each row displays the same set of attributes, although not necessarily displayed in columns, and the attributes may wrap. The List View omits column headers and other visual noise, making it a cleaner visualization than a Table View.

Jump to Standard List View, List View with Expanding Rows or Row Variation Examples

Standard List View

List view

View full page example

List View with Expanding Rows

Use a List View with expanding rows when you want to display details in place without requiring drill-down to a new page. This is useful when you want to allow users to view details of an object without reloading the page, or when the detail information is small and does not require its own page. Simple expansion and compound expansion are two variants of this pattern.

Simple Expansion

Simple expansion supports a single expansion state to expose more detail for a selected row.

List view with an expanded row

Compound Expansion

Compound expansion supports multiple expansion panels to examine multiple attributes of the selected row.

List view with compound row expansion

List View with Draggable Rows

Provide customizable sorting capabilities to users by applying the Drag and Drop pattern to a standard List View. Drag and Drop allows users to dynamically reorder items in the list.

List view with draggable rows

Row Variation Examples

The following row variations provide some examples of how you might visualize content within a row. You are not limited to these layouts. You may need to adjust the visualizations to best fit your application’s needs. Each row within a List Vsiew should have a consistent layout. Do not mix and match.

List view row variations

List View

Standard List View

List view

Toolbar: The Toolbar pattern may include Filter, Sort, Actions, Find, and Change View.
Row:
- Clicking on a row will select it (and deselect other rows) if single selection is enabled (i.e., no checkbox selection).
- Each item in List View should have the same layout.
- When including titles, make the title bold rather than appending a colon.
- Links may be displayed within an item.
- The background color of the row will be used to reflect state. See States and Row Styling for details.
- When the viewport size is decreased:
  - Content should wrap, displaying multiple rows of data.
  - Content could be eliminated.
Disabled Row (optional): Rows that are currently not available will be disabled. The cursor should appear visually disabled when user hovers over the row.
Multi-Selection via Checkboxes (optional): If multi-selection is supported, checkboxes appear on the left. Actions in the Data Toolbar apply to the selected items.
Item Hover: A hover state should be shown visually when a user hovers over an item.
Inline Actions: Inline actions should be included if the user needs to be able to quickly perform an action on a single item.

List View with Simple Expansion

List view with an expanded row

Icon: Placing the caret at the front of the row signifies that this row is expandable. The caret icon points to the right when it is closed and down when it is expanded.
Interaction:
- Hovering over a row highlights it. Single clicking anywhere in the row expands the row.
- If the list supports both expansion and drill-down to details, a button or link must be added to the row to support the drill-down action.
Expansion Panel: When the row is expanded, a panel is inserted between the bottom of the row and the top of the next row. All other content is pushed down the page. Content can be anything that is required to convey details of a selected object. If content overflows the height of the panel, a scroll bar will be exposed.
Close/Collapse (optional): Clicking the Close icon will collapse the expansion panel and return the list to its original (collapsed) state. Alternatively, clicking anywhere on the row again will have the same effect. Note: Use of the Close/Collapse icon is not advised if the content of the panel requires its full width.

List View with Compound Expansion

List view with compound expansion

Icon: When the list supports compound expansion, the caret is placed in front of each attribute that is expandable.
Expandable Attribute:
- Hovering over an expandable attribute highlights it. Note that in this case there is no action that applies to single clicking on the entire row. The user must explicitly click on the element they want to expand.
- Clicking on any expandable attribute opens the expansion panels with details for the selected attribute only. The caret changes direction to point down, and the attribute remains highlighted.
- Hovering over another expandable attribute will highlight it. Clicking will close the current expansion panel and expand this attribute by opening its row expansion. This action is exactly equivalent to closing the first panel (by clicking close) and expanding the second panel.
Close/Collapse (optional): Click the Close icon to close/collapse the expansion panel.

States and Row Styling

The background color of a row will change to indicate current states. These are listed with corresponding hex color values below:

Hover - when the user hovers over a row (#edf8ff)
Selected - when the user selects a row via single click or selecting the checkbox (pf-blue-50, #def3ff)
Open - when a row is expanded (pf-blue-50, #def3ff)
Edit - when a row is in edit mode via inline edit (pf-blue-50, #def3ff)
Disabled - when a row is disabled (pf-black-100, #fafafa)

Additional Notes about Behavior

Empty State: If no items exist, display an Empty State page. See the Empty State pattern for more details. If there are no items to display as the result of a null filter result, see the Filter pattern for more information about how to display this.
Loading State: If content is not loaded, display the Loading State pattern.
Pagination: List View can also support pagination. See Pagination for more details.
Vertical Scroll: Use a vertical scrollbar as needed. A horizontal scrollbar should NOT be used. Instead, the page containing the List View should be responsive.
View Selector: If alternate views are supported, a View Selector will be displayed in the top right corner. This will allow the user to switch to another view.

PatternFly Core Example

Jump to Standard List View, Simple Expansion, Compound Expansion, Default Row, Row Variation #1, Row Variation #2, Row Variation #3, Row Variation #4, Row Variation #5 or Row Variation #6

Standard List View

View full page example

Reference Markup

    <nav class="navbar navbar-default navbar-pf" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
          <img src="/assets/img/brand.svg" alt="PatternFly Enterprise Application" />
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-collapse-1">
        <ul class="nav navbar-nav navbar-utility">
          <li class="dropdown">
            <button class="btn btn-link nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span title="Help" class="fa pficon-help dropdown-title"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#0">Help</a></li>
              <li><a href="#0">About</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
              <span class="pficon pficon-user"></span>
              <span class="dropdown-title">
                Brian Johnson <b class="caret"></b>
              </span>
            </button>
            <ul class="dropdown-menu">
              <li>
                <a href="#0">Link</a>
              </li>
              <li>
                <a href="#0">Another link</a>
              </li>
              <li>
                <a href="#0">Something else here</a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#0">More options</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#0">Link</a>
                  </li>
                  <li>
                    <a href="#0">Another link</a>
                  </li>
                  <li>
                    <a href="#0">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li>
                    <a href="#0">Separated link</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#0">One more separated link</a>
                  </li>
                </ul>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#0">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-primary">
        </ul>
      </div>
    </nav>

      <div class="container-fluid">
        <div class="row toolbar-pf">
          <div class="col-sm-12">
            <form class="toolbar-pf-actions">
              <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">Name</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" id="input-filter-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li class="selected"><a href="#">Name</a></li>
                      <li><a href="#">Type</a></li>
                      <li><a href="#">Color</a></li>
                    </ul>
                  </div><!-- /btn-group -->
                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
                </div><!-- /input-group -->
              </div>
              <div class="form-group">
                <div class="dropdown btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" id="filter-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li class="selected"><a href="#">Name</a></li>
                    <li><a href="#">Type</a></li>
                    <li><a href="#">Last Modified</a></li>
                  </ul>
                </div>
                <button class="btn btn-link" type="button">
                  <span class="fa fa-sort-alpha-asc"></span>
                </button>
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button">Action</button>
                <button class="btn btn-default" type="button">Action</button>
                <div class="dropdown btn-group  dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

              </div>
              
              
              <div class="toolbar-pf-action-right">
                <div class="form-group toolbar-pf-find">
                  <button class="btn btn-link btn-find" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                  <div class="find-pf-dropdown-container">
                    <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                    <div class="find-pf-buttons">
                      <span class="find-pf-nums">1 of 3</span>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-up"></span>
                      </button>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-down"></span>
                      </button>
                      <button class="btn btn-link btn-find-close" type="button">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group toolbar-pf-view-selector">
                  <button class="btn btn-link "><i class="fa fa-th"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-large"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-list"></i></button>
                </div>
              </div>
            </form>
            <div class="row toolbar-pf-results">
              <div class="col-sm-12">
                <h5>40 Results</h5>
                <p>Active filters:</p>
                <ul class="list-inline">
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="fa fa-times"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="fa fa-times"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="fa fa-times"></span></a>
                    </span>
                  </li>
                </ul>
                <p><a href="#">Clear All Filters</a></p>
              </div><!-- /col -->
            </div><!-- /row -->
          </div><!-- /col -->
        </div><!-- /row -->
      </div><!-- /container -->

<div class="container-fluid">

<div id="pf-list-standard" class="list-group list-view-pf list-view-pf-view">
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </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>6</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>8</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight10">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-magic 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 Two
          </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>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>11</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-gamepad 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 Three
          </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>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-linux 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 Four
          </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>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-briefcase 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 Five
          </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>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-coffee 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 Six
          </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>4</strong> Hosts
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-cluster"></span>
            <strong>2</strong> Clusters
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-container-node"></span>
            <strong>10</strong> Nodes
          </div>
          <div class="list-view-pf-additional-info-item">
            <span class="pficon pficon-image"></span>
            <strong>6</strong> Images
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    // Row Checkbox Selection
    $("#pf-list-standard 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");
      }
    });
    // toggle dropdown menu
    $('#pf-list-standard .list-view-pf-actions').on('show.bs.dropdown', function () {
      var $this = $(this);
      var $dropdown = $this.find('.dropdown');
      var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
      $dropdown.toggleClass('dropup', space < 10);
    });
    // allow users to select multiple list items with shift key
    $('#pf-list-standard .list-group').on('click', '.list-view-pf-checkbox>input', function(event) {
      var $list = $('.list-group');
      var prevIndex = $list.data('preIndex');
      var $listItems = $list.children('.list-group-item');
      var $currentItem = $(this).closest('.list-group-item');
      if(event.shiftKey && prevIndex > -1 && this.checked) {
        var currentIndex = $listItems.index($currentItem);
        var $selectScope = currentIndex - prevIndex > 0
          ? $currentItem.prevAll().not($listItems.eq(prevIndex).prevAll().addBack())
          : $listItems.eq(prevIndex).prevAll().not($currentItem.prevAll().addBack());
        $selectScope.addClass('active').find('.list-view-pf-checkbox').children('input').prop('checked', true);
      }
      $list.data('preIndex', this.checked ? $listItems.index($currentItem) : -1);
    });

  });
</script>
</div>

Simple Expansion

Event One

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Event Two

The following snippet of text is rendered as link text.

4 Hosts

2 Clusters

11 Nodes

6 Images

Event Three

The following snippet of text is rendered as link text.

4 Hosts

2 Clusters

10 Nodes

6 Images

Event Four

The following snippet of text is rendered as link text.

4 Hosts

2 Clusters

10 Nodes

6 Images

Event Five

The following snippet of text is rendered as link text.

4 Hosts

2 Clusters

10 Nodes

6 Images

Event Six

The following snippet of text is rendered as link text.

4 Hosts

2 Clusters

10 Nodes

6 Images

Reference Markup

<div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight9">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </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>6</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div id="utilizationDonutChart11" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="utilizationDonutChart12"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart13"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart14"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#utilizationDonutChart11';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#utilizationDonutChart11", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#utilizationDonutChart12';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#utilizationDonutChart12", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#utilizationDonutChart13';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#utilizationDonutChart13", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#utilizationDonutChart14';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#utilizationDonutChart14", "60", "MHz Used");
</script>

        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight10">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-magic 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 Two
            </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>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>11</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div id="utilizationDonutChart21" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="utilizationDonutChart22"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart23"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart24"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#utilizationDonutChart21';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#utilizationDonutChart21", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#utilizationDonutChart22';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#utilizationDonutChart22", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#utilizationDonutChart23';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#utilizationDonutChart23", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#utilizationDonutChart24';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#utilizationDonutChart24", "60", "MHz Used");
</script>

        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight11">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-gamepad 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 Three
            </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>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div id="utilizationDonutChart31" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="utilizationDonutChart32"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart33"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart34"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#utilizationDonutChart31';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#utilizationDonutChart31", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#utilizationDonutChart32';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#utilizationDonutChart32", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#utilizationDonutChart33';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#utilizationDonutChart33", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#utilizationDonutChart34';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#utilizationDonutChart34", "60", "MHz Used");
</script>

        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight12">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-linux 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 Four
            </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>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div id="utilizationDonutChart41" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="utilizationDonutChart42"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart43"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart44"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#utilizationDonutChart41';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#utilizationDonutChart41", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#utilizationDonutChart42';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#utilizationDonutChart42", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#utilizationDonutChart43';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#utilizationDonutChart43", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#utilizationDonutChart44';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#utilizationDonutChart44", "60", "MHz Used");
</script>

        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight13">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-briefcase 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 Five
            </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>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div id="utilizationDonutChart51" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="utilizationDonutChart52"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart53"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart54"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#utilizationDonutChart51';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#utilizationDonutChart51", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#utilizationDonutChart52';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#utilizationDonutChart52", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#utilizationDonutChart53';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#utilizationDonutChart53", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#utilizationDonutChart54';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#utilizationDonutChart54", "60", "MHz Used");
</script>

        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-header">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
        <input type="checkbox">
      </div>
      <div class="list-view-pf-actions">
        <button class="btn btn-default">Action</button>
        <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight14">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-coffee 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 Six
            </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>4</strong> Hosts
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-cluster"></span>
              <strong>2</strong> Clusters
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-image"></span>
              <strong>6</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div id="utilizationDonutChart61" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="utilizationDonutChart62"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart63"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="utilizationDonutChart64"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#utilizationDonutChart61';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#utilizationDonutChart61", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#utilizationDonutChart62';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#utilizationDonutChart62", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#utilizationDonutChart63';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#utilizationDonutChart63", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#utilizationDonutChart64';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#utilizationDonutChart64", "60", "MHz Used");
</script>

        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>Hostceph1</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    // Row Checkbox Selection
    $("#pf-list-simple-expansion 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");
      }
    });
    // toggle dropdown menu
    $("#pf-list-simple-expansion .list-view-pf-actions").on('show.bs.dropdown', function () {
      var $this = $(this);
      var $dropdown = $this.find('.dropdown');
      var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
      $dropdown.toggleClass('dropup', space < 10);
    });

    // click the list-view heading then expand a row
    $("#pf-list-simple-expansion .list-group-item-header").click(function(event){
      if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
        $(this).find(".fa-angle-right").toggleClass("fa-angle-down")
          .end().parent().toggleClass("list-view-pf-expand-active")
            .find(".list-group-item-container").toggleClass("hidden");
      } else {
      }
    })

    // click the close button, hide the expand row and remove the active status
    $("#pf-list-simple-expansion .list-group-item-container .close").on("click", function (){
      $(this).parent().addClass("hidden")
        .parent().removeClass("list-view-pf-expand-active")
          .find(".fa-angle-right").removeClass("fa-angle-down");
    })

  });
</script>

Compound Expansion

Event One

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Event Two

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Event Three

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Event Four

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Event Five

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Event Six

The following snippet of text is rendered as link text.

8 Hosts

6 Clusters

10 Nodes

8 Images

Reference Markup

<div id="pf-list-compound-expansion" class="list-group list-view-pf list-view-pf-view">
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </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">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Host 1</li>
            <li>Host 2</li>
            <li>Host 3</li>
            <li>Host 4</li>
            <li>Host 5</li>
            <li>Host 6</li>
            <li>Host 7</li>
            <li>Host 8</li>
            <li>Host 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>file1.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Cluster 1</li>
            <li>Cluster 2</li>
            <li>Cluster 3</li>
            <li>Cluster 4</li>
            <li>Cluster 5</li>
            <li>Cluster 6</li>
            <li>Cluster 7</li>
            <li>Cluster 8</li>
            <li>Cluster 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Cluster Name</dt>
            <dd>file2.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Nodes 1</li>
            <li>Nodes 2</li>
            <li>Nodes 3</li>
            <li>Nodes 4</li>
            <li>Nodes 5</li>
            <li>Nodes 6</li>
            <li>Nodes 7</li>
            <li>Nodes 8</li>
            <li>Nodes 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Node Name</dt>
            <dd>file3.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            <li>Image 4</li>
            <li>Image 5</li>
            <li>Image 6</li>
            <li>Image 7</li>
            <li>Image 8</li>
            <li>Image 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Image Name</dt>
            <dd>file4.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-magic 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 Two
          </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">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Host 1</li>
            <li>Host 2</li>
            <li>Host 3</li>
            <li>Host 4</li>
            <li>Host 5</li>
            <li>Host 6</li>
            <li>Host 7</li>
            <li>Host 8</li>
            <li>Host 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>file1.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Cluster 1</li>
            <li>Cluster 2</li>
            <li>Cluster 3</li>
            <li>Cluster 4</li>
            <li>Cluster 5</li>
            <li>Cluster 6</li>
            <li>Cluster 7</li>
            <li>Cluster 8</li>
            <li>Cluster 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Cluster Name</dt>
            <dd>file2.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Nodes 1</li>
            <li>Nodes 2</li>
            <li>Nodes 3</li>
            <li>Nodes 4</li>
            <li>Nodes 5</li>
            <li>Nodes 6</li>
            <li>Nodes 7</li>
            <li>Nodes 8</li>
            <li>Nodes 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Node Name</dt>
            <dd>file3.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            <li>Image 4</li>
            <li>Image 5</li>
            <li>Image 6</li>
            <li>Image 7</li>
            <li>Image 8</li>
            <li>Image 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Image Name</dt>
            <dd>file4.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-gamepad 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 Three
          </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">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Host 1</li>
            <li>Host 2</li>
            <li>Host 3</li>
            <li>Host 4</li>
            <li>Host 5</li>
            <li>Host 6</li>
            <li>Host 7</li>
            <li>Host 8</li>
            <li>Host 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>file1.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Cluster 1</li>
            <li>Cluster 2</li>
            <li>Cluster 3</li>
            <li>Cluster 4</li>
            <li>Cluster 5</li>
            <li>Cluster 6</li>
            <li>Cluster 7</li>
            <li>Cluster 8</li>
            <li>Cluster 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Cluster Name</dt>
            <dd>file2.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Nodes 1</li>
            <li>Nodes 2</li>
            <li>Nodes 3</li>
            <li>Nodes 4</li>
            <li>Nodes 5</li>
            <li>Nodes 6</li>
            <li>Nodes 7</li>
            <li>Nodes 8</li>
            <li>Nodes 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Node Name</dt>
            <dd>file3.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            <li>Image 4</li>
            <li>Image 5</li>
            <li>Image 6</li>
            <li>Image 7</li>
            <li>Image 8</li>
            <li>Image 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Image Name</dt>
            <dd>file4.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-linux 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 Four
          </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">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Host 1</li>
            <li>Host 2</li>
            <li>Host 3</li>
            <li>Host 4</li>
            <li>Host 5</li>
            <li>Host 6</li>
            <li>Host 7</li>
            <li>Host 8</li>
            <li>Host 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>file1.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Cluster 1</li>
            <li>Cluster 2</li>
            <li>Cluster 3</li>
            <li>Cluster 4</li>
            <li>Cluster 5</li>
            <li>Cluster 6</li>
            <li>Cluster 7</li>
            <li>Cluster 8</li>
            <li>Cluster 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Cluster Name</dt>
            <dd>file2.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Nodes 1</li>
            <li>Nodes 2</li>
            <li>Nodes 3</li>
            <li>Nodes 4</li>
            <li>Nodes 5</li>
            <li>Nodes 6</li>
            <li>Nodes 7</li>
            <li>Nodes 8</li>
            <li>Nodes 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Node Name</dt>
            <dd>file3.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            <li>Image 4</li>
            <li>Image 5</li>
            <li>Image 6</li>
            <li>Image 7</li>
            <li>Image 8</li>
            <li>Image 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Image Name</dt>
            <dd>file4.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight5">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-briefcase 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 Five
          </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">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Host 1</li>
            <li>Host 2</li>
            <li>Host 3</li>
            <li>Host 4</li>
            <li>Host 5</li>
            <li>Host 6</li>
            <li>Host 7</li>
            <li>Host 8</li>
            <li>Host 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>file1.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Cluster 1</li>
            <li>Cluster 2</li>
            <li>Cluster 3</li>
            <li>Cluster 4</li>
            <li>Cluster 5</li>
            <li>Cluster 6</li>
            <li>Cluster 7</li>
            <li>Cluster 8</li>
            <li>Cluster 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Cluster Name</dt>
            <dd>file2.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Nodes 1</li>
            <li>Nodes 2</li>
            <li>Nodes 3</li>
            <li>Nodes 4</li>
            <li>Nodes 5</li>
            <li>Nodes 6</li>
            <li>Nodes 7</li>
            <li>Nodes 8</li>
            <li>Nodes 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Node Name</dt>
            <dd>file3.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            <li>Image 4</li>
            <li>Image 5</li>
            <li>Image 6</li>
            <li>Image 7</li>
            <li>Image 8</li>
            <li>Image 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Image Name</dt>
            <dd>file4.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
  <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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight6">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-coffee 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 Six
          </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">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-screen"></span>
              <strong>8</strong> Hosts
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-cluster"></span>
              <strong>6</strong> Clusters
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-container-node"></span>
              <strong>10</strong> Nodes
            </div>
          </div>
          <div class="list-view-pf-additional-info-item">
            <div class="list-view-pf-expand">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-image"></span>
              <strong>8</strong> Images
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Host 1</li>
            <li>Host 2</li>
            <li>Host 3</li>
            <li>Host 4</li>
            <li>Host 5</li>
            <li>Host 6</li>
            <li>Host 7</li>
            <li>Host 8</li>
            <li>Host 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Host Name</dt>
            <dd>file1.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Cluster 1</li>
            <li>Cluster 2</li>
            <li>Cluster 3</li>
            <li>Cluster 4</li>
            <li>Cluster 5</li>
            <li>Cluster 6</li>
            <li>Cluster 7</li>
            <li>Cluster 8</li>
            <li>Cluster 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Cluster Name</dt>
            <dd>file2.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Nodes 1</li>
            <li>Nodes 2</li>
            <li>Nodes 3</li>
            <li>Nodes 4</li>
            <li>Nodes 5</li>
            <li>Nodes 6</li>
            <li>Nodes 7</li>
            <li>Nodes 8</li>
            <li>Nodes 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Node Name</dt>
            <dd>file3.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">
        <div class="col-md-3">
          <ul>
            <li>Image 1</li>
            <li>Image 2</li>
            <li>Image 3</li>
            <li>Image 4</li>
            <li>Image 5</li>
            <li>Image 6</li>
            <li>Image 7</li>
            <li>Image 8</li>
            <li>Image 9</li>
          </ul>
        </div>
        <div class="col-md-9">
          <dl class="dl-horizontal">
            <dt>Image Name</dt>
            <dd>file4.nay.redhat.com</dd>
            <dt>Device Path</dt>
            <dd>/dev/disk/pci-0000.05:00-sas-0.2-part1</dd>
            <dt>Time</dt>
            <dd>January 15, 2016 10:45:11 AM</dd>
            <dt>Severity</dt>
            <dd>Warning</dd>
            <dt>Cluster</dt>
            <dd>Cluster 1</dd>
          </dl>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    // Row Checkbox Selection
    $("#pf-list-compound-expansion 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");
      }
    });
    // toggle dropdown menu
    $("#pf-list-compound-expansion .list-view-pf-actions").on("show.bs.dropdown", function () {
      var $this = $(this);
      var $dropdown = $this.find(".dropdown");
      var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find(".dropdown-menu").outerHeight(true);
      $dropdown.toggleClass("dropup", space < 10);
    });
    // compound expansion
    $("#pf-list-compound-expansion .list-view-pf-expand").on("click", function () {
      var $this = $(this);
      var $heading = $(this).parents(".list-group-item");
      //var $row = $heading.parent();
      var $subPanels = $heading.find(".list-group-item-container");
      var index = $heading.find(".list-view-pf-expand").index(this);

      //Remove all active status
      $heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
        .end().removeClass("active")
          .end().removeClass("list-view-pf-expand-active");
      // Add active to the clicked item
      $(this).addClass("active")
        .parents(".list-group-item").addClass("list-view-pf-expand-active")
          .end().find(".fa-angle-right").addClass("fa-angle-down");
      // check if it needs to hide
      if($subPanels.eq(index).hasClass("hidden")){
        $heading.find(".list-group-item-container:visible").addClass("hidden");
        $subPanels.eq(index).removeClass("hidden");
      } else {
        $subPanels.eq(index).addClass("hidden");
        $heading.find(".list-view-pf-expand.active").find(".fa-angle-right").removeClass("fa-angle-down")
         .end().removeClass("active")
          .end().removeClass("list-view-pf-expand-active");
      }
    });

    // click close button to close the panel
    $("#pf-list-compound-expansion .list-group-item-container .close").on("click", function (){
      var $this = $(this);
      var $panel = $this.parent();

      // close the container and remove the active status
      $panel.addClass("hidden")
        .parent().removeClass("list-view-pf-expand-active")
          .find(".list-view-pf-expand.active").removeClass("active")
            .find(".fa-angle-right").removeClass("fa-angle-down")
    });
  });
</script>

Default Row

Event One

The following snippet of text is rendered as link text.

8 Hosts

8 Clusters

18 Nodes

4 Images

Reference Markup

<div id="pf-list-default" 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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </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 () {
    $("#pf-list-default 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>

Row Variation #1

This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box. Feb 23, 2015 12:32 am

The following snippet of text is rendered as link text.

Reference Markup

<div class="list-group list-view-pf">
  <div class="list-group-item list-view-pf-stacked">
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight15">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-plane list-view-pf-icon-lg"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box.
            <small>Feb 23, 2015 12:32 am</small>
          </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-donut-chart">
              <span id="donut-chart-5"></span>
          </div>
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="donut-chart-6"></span>
          </div>
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="donut-chart-7"></span>
          </div>
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="donut-chart-8"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // Donut Charts
  var c3ChartDefaults = $().c3ChartDefaults();
  var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#donut-chart-5';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 34],
      ["Available", 86]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  var donutChartTitle = d3.select("#donut-chart-5").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);

  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#donut-chart-6';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 21],
      ["Available", 79]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  donutChartTitle = d3.select("#donut-chart-6").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);

  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#donut-chart-7';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 14],
      ["Available", 86]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  donutChartTitle = d3.select("#donut-chart-7").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);

  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#donut-chart-8';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 25],
      ["Available", 75]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  donutChartTitle = d3.select("#donut-chart-8").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
</script>

Row Variation #2

March 29

Event One

The following snippet of text is rendered as link text.

8 Clusters

8 Hosts

18 Nodes

4 Images

Reference Markup

<div class="list-group list-view-pf">
  <div class="list-group-item list-view-pf-stacked">
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <div class="list-view-pf-calendar">
          March
          <strong>29</strong>
        </div>
      </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> Clusters
          </div>
          <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-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>

Row Variation #3

Event Ones

The following snippet of text is rendered as link text.

113,735 Service One

35% Service Two

22.0% Service Three

Reference Markup

<div id="pf-list-var3" 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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </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 () {
    $("#pf-list-var3 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>

Row Variation #4

Event One

The following snippet of text is rendered as link text.

8 Hosts

8 Clusters

Reference Markup

<div id="pf-list-var4" 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 () {
    $("#pf-list-var4 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>

Row Variation #5

Event One

The following snippet of text is rendered as link text.

108 Hosts

28 Clusters

Event One

The following snippet of text is rendered as link text.

8 Hosts

28 Clusters

Event One

The following snippet of text is rendered as link text.

108 Hosts

28 Clusters

Event One

The following snippet of text is rendered as link text.

8 Hosts

28 Clusters

Reference Markup

<div id="pf-list-var5" 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;
    $('#pf-list-var5 .list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
      widest = $(this).width() > widest ? $(this).width() : widest;
    }).width(widest);
  });
</script>

Row Variation #6

Event One

The following snippet of text is rendered as link text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

8 Clusters

35% Service Two

Reference Markup

<div id="pf-list-var6" 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>
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another Action</a></li>
    <li><a href="#">Something Else Here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated Link</a></li>
  </ul>
</div>

    </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>.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item">
            <img src="http://placehold.it/60x60" alt="placeholder image">
          </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 list-view-pf-additional-info-item-stacked">
            <strong>35%</strong> Service Two
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // Row Checkbox Selection
  $(document).ready(function () {
    $("#pf-list-var6 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>