P
CUI v1.20.1177
- • Color Palette
- • Icon
- • Media Query
- • Spacing
- • String Validation
- • Tooltip
- • Truncate
- • Typography
- • Badge
- • Buttons
- • Change Tracker
- • Checkboxes
- • Flat Text Buttons
- • Header Branded Panel
- • Loading bars
- • Overlay Container Sliding
- • Language Switcher
- • Pie Chart
- • Progress
- • Radio Sliders
- • Relative Date
- • Rich Text Field
- • Text Fields
- • Complex Table
- • DatePicker
- • DatePickerV2
- • Dismissible Alert
- • Floating Panel
- • Headers - Sections
- • Leaflet
- • List Groups
- • List Group Accordion
- • Menu
- • Reusable Modal
- • Save Changes Modal
- • Simple Table
- • Standard View
- • Stepper
- • Tabs
- • Timeline
- • Upload
- • View Toggle Container
P
C
U
I
F
R
A
M
E
W
O
R
K
M
E
N
U
List Groups
Documentation and examples in using List Groups with PCUI
Include in your HTML
Copied successfully!
<link href="~/PCUIAssets/PCUI/Components/ListGroups/css/ListGroups.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/Buttons/css/Buttons.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/Checkboxes/css/Checkboxes.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/ListGroups/js/ListGroups.js"></script>
Small - default
Copied successfully!
<ul class="list-group general">
<li class="list-items active">
<div class="text-container">
<label>Selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container">
<label>Not selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container">
<label>Hover</label>
</div>
</li>
</ul>
Large - default
Copied successfully!
<ul class="list-group general large">
<li class="list-items active">
<div class="text-container">
<label>Selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container">
<label>Not selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container">
<label>Hover</label>
</div>
</li>
</ul>
Small, with thumbnails
Copied successfully!
<ul class="list-group general">
<li class="list-items active with-image">
<div class="text-container with-icon">
<img src="~/PCUIAssets/PCUI/Common/images/streets-24-x-24.png" />
<label>Selected</label>
</div>
</li>
<li class="list-items with-image">
<div class="text-container with-icon">
<img src="~/PCUIAssets/PCUI/Common/images/satellite-24-x-24.png" />
<label>Not selected</label>
</div>
</li>
<li class="list-items with-image">
<div class="text-container with-icon">
<img src="~/PCUIAssets/PCUI/Common/images/terrain-24-x-24.png" />
<label>Hover</label>
</div>
</li>
</ul>
Large, with thumbnails
Copied successfully!
<ul class="list-group general large">
<li class="list-items active with-image">
<div class="text-container with-icon">
<img src="~/PCUIAssets/PCUI/Common/images/streets-24-x-24.png" />
<label>Selected</label>
</div>
</li>
<li class="list-items with-image">
<div class="text-container with-icon">
<img src="~/PCUIAssets/PCUI/Common/images/satellite-24-x-24.png" />
<label>Not selected</label>
</div>
</li>
<li class="list-items with-image">
<div class="text-container with-icon">
<img src="~/PCUIAssets/PCUI/Common/images/terrain-24-x-24.png" />
<label>Hover</label>
</div>
</li>
</ul>
Small, with icons
Copied successfully!
<ul class="list-group general">
<li class="list-items active">
<div class="text-container with-icon">
<i class="fa fa-user-circle fa-2x"></i>
<label>Selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<i class="ion-android-settings"></i>
<label>Not selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<i class="fas fa-sign-out-alt"></i>
<label>Hover</label>
</div>
</li>
</ul>
Large with icons
Copied successfully!
<ul class="list-group general large">
<li class="list-items active">
<div class="text-container with-icon">
<i class="fa fa-user-circle fa-2x"></i>
<label>Selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<i class="ion-android-settings"></i>
<label>Not selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<i class="fas fa-sign-out-alt"></i>
<label>Hover</label>
</div>
</li>
</ul>
Small, with counters
Copied successfully!
<ul class="list-group general">
<li class="list-items active">
<div class="text-container with-icon">
<label>Selected</label>
</div>
<div class="default-base-container">
<label>1</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<label>Not selected</label>
</div>
<div class="default-base-container">
<label>1</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<label>Hover</label>
</div>
<div class="default-base-container">
<label>1</label>
</div>
</li>
</ul>
Large, with counters
Copied successfully!
<ul class="list-group general large">
<li class="list-items active">
<div class="text-container with-icon">
<label>Selected</label>
</div>
<div class="default-base-container">
<label>1</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<label>Not selected</label>
</div>
<div class="default-base-container">
<label>1</label>
</div>
</li>
<li class="list-items">
<div class="text-container with-icon">
<label>Hover</label>
</div>
<div class="default-base-container">
<label>1</label>
</div>
</li>
</ul>
Small, with checkboxes
Copied successfully!
<ul class="list-group general">
<li class="list-items-with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary">Ticked</label>
</div>
</div>
</li>
<li class="list-items-with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary">Not ticked</label>
</div>
</div>
</li>
<li class="list-items-with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary">Hover</label>
</div>
</div>
</li>
<li class="list-items-with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox" disabled="disabled">
<label class="checkbox-label-primary">Disabled, not ticked</label>
</div>
</div>
</li>
<li class="list-items-with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox" disabled="disabled" checked="">
<label class="checkbox-label-primary">Disabled, ticked</label>
</div>
</div>
</li>
</ul>
Small, with Radio Buttons
Copied successfully!
<ul class="list-group general">
<li class="list-items-with-radio-buttons">
<div class="ui radio checkbox checked">
<input type="radio" name="list" tabindex="0" class="hidden" checked="">
<label>Selected</label>
</div>
</li>
<li class="list-items-with-radio-buttons">
<div class="ui radio checkbox">
<input type="radio" name="list" tabindex="0" class="hidden">
<label>Not Selected</label>
</div>
</li>
<li class="list-items-with-radio-buttons">
<div class="ui radio checkbox">
<input type="radio" name="list" tabindex="0" class="hidden" disabled="disabled">
<label>Hover</label>
</div>
</li>
<li class="list-items-with-radio-buttons">
<div class="ui radio checkbox">
<input type="radio" name="list" tabindex="0" class="hidden" disabled="disabled">
<label>Disable, not selected</label>
</div>
</li>
</ul>
Small - default with header
Copied successfully!
<div class="list-group-general-list-heading">
<label>Header</label>
</div>
<ul class="list-group general">
<li class="list-items active">
<div class="text-container">
<label>Selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container">
<label>Not selected</label>
</div>
</li>
<li class="list-items">
<div class="text-container">
<label>Hover</label>
</div>
</li>
</ul>
With heading, and supporting text
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items">
<div class="text-container">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
</ul>
With heading, supporting text, & default
"outline" buttons
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</li>
</ul>
With heading, supporting text, & default
"outline" buttons (2 rows)
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</li>
</ul>
With heading, supporting text, & checkboxes
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
</ul>
With heading, supporting text, checkboxes
& default "outline" buttons
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="with-button truncate-string">
<div class="text-container">
<label class="truncate-string">Heading string Heading string Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="with-button truncate-string">
<div class="text-container">
<label class="truncate-string">Heading string Heading string Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="with-button truncate-string">
<div class="text-container">
<label class="truncate-string">Heading string Heading string Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
<button class="ui button button-default">Default size</button>
</div>
</div>
</li>
</ul>
With heading, supporting text, & 1x thumbnail
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items with-thumbnail">
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items with-thumbnail">
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items with-thumbnail">
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string Heading string Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
</li>
<li class="list-items with-thumbnail">
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
</ul>
With heading, supporting text, & 2x thumbnail
Copied successfully!
<ul class="list-group detailed-list">
<li class="list-items with-checkbox with-thumbnail">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="with-button truncate-string">
<div class="text-container">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
</div>
</div>
</li>
<li class="list-items with-checkbox with-thumbnail">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="with-button truncate-string">
<div class="text-container">
<label class="truncate-string">Heading string Heading string Heading string Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
</div>
</div>
</li>
<li class="list-items with-checkbox with-thumbnail">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="thumbnail-container">
<img src="http://www.outdooralabama.com/sites/default/files/Wildlife/Birds/American%20White%20Pelican.jpg" />
</div>
<div class="with-button truncate-string">
<div class="text-container">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
<div class="button-container">
<button class="ui button button-default">Default size</button>
</div>
</div>
</li>
</ul>
With heading, supporting text, & list-header
Copied successfully!
<div class="list-group-detailed-list-heading">
<label>List-header string</label>
</div>
<ul class="list-group detailed-list">
<li class="list-items">
<div class="text-container">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
</li>
<li class="list-items">
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
</ul>
With heading, supporting text, list-header,
icon, & checkboxes
Copied successfully!
<div class="list-group-detailed-list-heading">
<a class="fa fa-envelope fa-2x"></a>
<label>List-header string</label>
</div>
<ul class="list-group detailed-list">
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string Supporting text string Supporting text string</label>
</div>
</li>
<li class="list-items with-checkbox">
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-primary">
<input type="checkbox">
<label class="checkbox-label-primary"></label>
</div>
</div>
<div class="text-container truncate-string">
<label class="truncate-string">Heading string</label>
<label class="truncate-string">Supporting text string</label>
</div>
</li>
</ul>