Components
List Group
List groups provide a flexible framework for displaying a sequence of content. They can be customized and expanded to fit virtually any type of content.
Basic example
Default
The most basic list group is an unordered list with list items.
- Recent Posts
- Upcoming Events
- Notifications
State
Button
Use the `button` element to develop interactive list group items that include hover, active, and disabled states.
Illustrations
Icons
The standard list group featuring icons.
- Recent Posts
- Upcoming Events
- Notifications
Badge
Incorporate `badges` into any list group item to display unread Notifications, activity levels, and additional information.
- Recent Posts New
- Upcoming Events 2
- Notifications +99
Horizontal
The horizontal list will change to vertical order at small resolutions. Reduce browser size to see it in action.
- Recent Posts
- Upcoming Events
- Notifications
Flush
Eliminate certain borders and soften the corners to allow list group items to fit seamlessly edge-to-edge within a parent container, such as cards.
- Recent Posts
- Upcoming Events
- Notifications
No gutters
No paddings in left and right.
- Recent Posts
- Upcoming Events
- Notifications
Striped
Applying alternate shading to list items.
- Recent Posts
- Upcoming Events
- Downloads
- Team Account
- Notifications
Checkbox
List group with checkbox.
Select your skills:
Radio
List group with radio.
Select your expertise:
Switch
List group with switch.
Switch your preferred certifications:
Invoice list group
An example of a basic list group with an emphasized footer.
- Payment to Front ₹ 264
- Discount ₹ 50
- Amount paid ₹ 214
User list
Presenting user profiles in a structured list group format.
-
Danish sesame snaps halvah
13 minutesOnline -
Cake halvah biscuit cheesecake
11 minutesAway -
Tart cheesecake jujubes caramels
7 minutesOffline -
Icing sweet gummies
15 minutesIn meeting
Progress
A list group displaying progress indicators.
-
Bootstrap is an open source toolkit
-
Vue.js is the Progressive JavaScript Framework
-
Angular implements Functional Programming concepts
-
React version update
Cards
List Item with Icon
Present a list item with an icon in a structured card layout.
List Item with Switch
Organize a list item with a switch in a well-structured card.
-
Google
-
Twitter
-
Linkedin
-
Dribbble
-
Behance
List Item With Action
Include a list item with an action option in a structured card format.
Angel Dorwart
sbaker@hotmail.com
Skylar Rosser
gbaker@yahoo.com
Dulce Botosh
tlee@gmail.com
Ahmad Stanton
kdavis@hotmail.com
Randy Gouse
ijackson@yahoo.comList Item With Avatar
Presenting List Item With Avatar in a structured card layout.
-
Phillip George
Hii samira, thanks for...9.00AM 1 -
Jaylon Donin
I’ll send the texts...10.00PM 3 -
8.30AM
Tiana Curtis
That’s Great! -
Zaire Vetrovs
https://www.youtub...5.50AM 2 -
6.45PM
Kianna Philips
It was awesome.
List Item Advanced
Displaying an advanced list item in a structured card format.
-
08:30
Daily Project Review
Team organization
-
09:00
Sprint Surge
Daily Boost for Agile Progress
+9 -
11:45
Project Status Update
Progress Overview Update
-
06:30
Team Performance
Team Metrics Evaluation
+9 -
10:50
Stakeholder Feedback
Feedback from Stakeholders