list-pf.html
Home
/
themes /
src /
main /
node_modules /
patternfly /
tests /
pages /
list-pf.html
---
categories: [Widgets]
layout: page
title: List
resource: true
---
<!-- empty list with expansion -->
<h3>Basic list with expansion</h3>
<div class="list-pf">
<div class="list-pf-item">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
First line
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
<div class="list-pf-item active">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This item is open by default
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse in">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse in">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
</div>
<!-- empty list with checkbox -->
<h3>Basic list with row selection</h3>
<div class="list-pf">
<div class="list-pf-item ">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content">
Selectable list row content
</div>
</div>
</div>
</div>
<!-- empty list with expansion and checkbox -->
<h3>Basic list with row selection and expansion</h3>
<div class="list-pf">
<div class="list-pf-item ">
<div class="list-pf-container">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content">
Expandable and selectable list row content
</div>
</div>
<!-- expansion --->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div>
</div>
<!-- empty list with expansion and checkbox -->
<h3>Basic list with expand element instead of standard collapse</h3>
<div class="list-pf">
<div class="list-pf-item" data-list="expansion">
<div class="list-pf-container">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
<div class="list-pf-main-content">
<button data-list="toggle">Collapse</button>
<span class="list-pf-title">First line</span>
</div>
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-chevron">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-pf-content">
This is a first level section
</div>
</div> <!-- /list-pf-container -->
<div class="list-pf-expansion collapse">
<div class="list-pf-container" tabindex="0">
<div class="list-pf-content">
This is a second level section
</div>
</div> <!-- /list-pf-container -->
</div> <!-- /list-pf-expansion level 3 -->
</div> <!-- /list-pf-expansion level 2 -->
</div> <!-- /list-pf-expansion level 1 -->
</div>
<!-- row with content -->
<h3>List with content items</h3>
<div class="list-pf">
<div class="list-pf-item ">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content ">
<div class="list-pf-title">Event One</div>
<div class="list-pf-description text-overflow-pf">Description of event one with <a href="">link text.</a></div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight1" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
<div class="list-pf-item ">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content ">
<div class="list-pf-title">Event One with a longer title</div>
<div class="list-pf-description text-overflow-pf">Description of event one with <a href="">link text.</a></div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight2" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
<div class="list-pf-item">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex ">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title">Nonbreakinglongtitle012345678901234567890012345678901234567890012345678901234567890</div>
<div class="list-pf-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia euismod quam. Aliquam nec varius arcu. In dolor nibh, mattis at odio non, imperdiet faucibus elit. Aliquam erat volutpat with <a href="">link text.</a> </div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight3" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
<!-- add .text-overflow-pf to change text to ellipse instead of wrap -->
<div class="list-pf-item ">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex ">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title text-overflow-pf">Ellipsed text variation Nonbreakinglongtitle012345678901234567890012345678901234567890012345678901234567890</div>
<div class="list-pf-description text-overflow-pf">Ellipsed text variation Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia euismod quam. Aliquam nec varius arcu. In dolor nibh, mattis at odio non, imperdiet faucibus elit. Aliquam erat volutpat with <a href="">link text.</a> </div>
</div>
<div class="list-pf-additional-content text-overflow-pf">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight4" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
</div>
<!-- row with main content stacked -->
<h3>List with content items, stacked main content option</h3>
<div class="list-pf list-pf-stacked">
<div class="list-pf-item">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex ">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title text-overflow-pf">Event One</div>
<div class="list-pf-description">This event is shown with a stacked display</div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight5" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
<div class="list-pf-item">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex ">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title text-overflow-pf">Event One with a longer title</div>
<div class="list-pf-description">This event is shown with a stacked display</div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight6" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
<div class="list-pf-item">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex ">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title">Nonbreakinglongtitle012345678901234567890012345678901234567890012345678901234567890</div>
<div class="list-pf-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia euismod quam. Aliquam nec varius arcu. In dolor nibh, mattis at odio non, imperdiet faucibus elit. Aliquam erat volutpat with <a href="">link text.</a> </div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight7" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
<!-- add .text-overflow-pf to change text to ellipse instead of wrap -->
<div class="list-pf-item">
<div class="list-pf-container">
<div class="list-pf-select">
<input type="checkbox">
</div>
<div class="list-pf-content list-pf-content-flex ">
<div class="list-pf-left">
<span class="fa fa-plane list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content">
<div class="list-pf-title text-overflow-pf">Ellipsed title variation Nonbreakinglongtitle012345678901234567890012345678901234567890012345678901234567890</div>
<div class="list-pf-description text-overflow-pf">Ellipsed description variation Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia euismod quam. Aliquam nec varius arcu. In dolor nibh, mattis at odio non, imperdiet faucibus elit. Aliquam erat volutpat with <a href="">link text.</a> </div>
</div>
<div class="list-pf-additional-content">
additional content
</div>
</div>
<div class="list-pf-actions">
<button class="btn btn-default">Action</button>
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight8" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.list-pf').pfList();
});
</script>