List is a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Three different types of lists are defined in Bootstrap: Unordered List, Ordered List, and Unstyled List.
In a single-line list, each tile contains a single line of text. The amount of text can vary between tiles within the same list.
Add .pmd-list
and .pmd-card-list
followed by .list-group
for the formatting of your list according to Material Design Standards.
Add badges to a list to display count of notifications, unread messages, no of appointments etc.
Add .pmd-list-icon
to the icons to align them properly with the list items. It can majorly be used in the menus, dropdowns etc.
Add .pmd-list-avatar
to the avatar image to for aligning it properly with the list items. This list is used mainly to display list of users, contacts, followers etc.
This list is mainly used when you want to select some users from the list of followers, users, contacts etc to perfrom an action.
In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.
Use class .pmd-list-title
and .pmd-list-subtitle
for heading and secondary text respectively.
Secondary text
Secondary text
Secondary text
This type of list can be used to showcase menus of functions or menu list on dashboard etc.
Secondary text
Secondary text
Secondary text
Avatar with Secondary text can be used in cases where you want to display some more information about the item or person like designation of person, category of the item, no of common friends, rating of an item etc.
If the secondary text is of two lines, it will appear like this.
Sales and Sourcing of off price goods, clearances, stock lots and opportunity buys based out of Montreal, Quebec
Sales and Sourcing of off price goods, clearances, stock lots and opportunity buys based out of Montreal, Quebec
Sales and Sourcing of off price goods, clearances, stock lots and opportunity buys based out of Montreal, Quebec
2852 Canis Heights Drive, Los Angeles
California
2852 Canis Heights Drive, Los Angeles
California
2852 Canis Heights Drive, Los Angeles
California
Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec
Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec
Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec
Make list group items clickable by using anchor tags instead of list items (that also means a parent <div>
instead of an <ul>
). No need for individual parents around each element.
Add .disabled
to a .list-group-item
to gray it out to appear disabled.
Add .list-group-flush
to remove the borders and rounded corners of the list-group.
Use contextual classes to style default list items using class .list-group-item-*
classes.
success
class.info
class.warning
class.danger
class.Contextual classes also work with .list-group-item-action.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.The Propeller CSS classes apply various predefined visual enhancements to the Lists. The table lists the available classes and their effects.
Propeller Classes | Effect | Remark |
---|---|---|
.pmd-list |
Add this class for all the list items. | Required |
.pmd-card-list |
Class to be added to the list for formatting purpose. | Required |
.pmd-list-icon |
Add this class to the icon tag when your list contains icons. | Optional |
.pmd-list-title |
Add this class to the heading of the two-line and three-line list item. | Optional |
.pmd-list-subtitle |
Add this class to the secondary text of the two-line and three-line list item. | Optional |
.pmd-list-avatar |
Add this class when your single line list contains profile pic. | Optional |
.pmd-avatar-list-img |
Add this class to the profile pic in the list. | Optional |