Lists
Examples and documentation for the lists component
List Sizes
-
Size SM
-
List Item
sm
-
Size MD
-
List Item
md
-
Size LG
-
List Item
lg
Variant: Default
-
Default Default
-
Another Item
-
Primary Default
-
Another Item
-
Success Default
-
Another Item
-
Warning Default
-
Another Item
-
Danger Default
-
Another Item
-
Info Default
-
Another Item
-
Secondary Default
-
Another Item
Variant: Flush
-
Default Flush
-
Another Item
-
Primary Flush
-
Another Item
-
Success Flush
-
Another Item
-
Warning Flush
-
Another Item
-
Danger Flush
-
Another Item
-
Info Flush
-
Another Item
-
Secondary Flush
-
Another Item
Variant: Bordered
-
Default Bordered
-
Another Item
-
Primary Bordered
-
Another Item
-
Success Bordered
-
Another Item
-
Warning Bordered
-
Another Item
-
Danger Bordered
-
Another Item
-
Info Bordered
-
Another Item
-
Secondary Bordered
-
Another Item
Variant: Striped
-
Default Striped
-
Another Item
-
Primary Striped
-
Another Item
-
Success Striped
-
Another Item
-
Warning Striped
-
Another Item
-
Danger Striped
-
Another Item
-
Info Striped
-
Another Item
-
Secondary Striped
-
Another Item
Lists with Badges
-
Messages Unread messages5
-
Notifications System notifications12
-
Tasks Pending tasks3
Lists with Custom Content
-
Project Alpha Web application project
-
Project Beta Mobile app development
Lists with Slotable Icons
-
ACustom Avatar Using slot for custom icon
-
Status Indicator Custom status icon
-
Progress Ring Custom progress indicator
Lists with Progress Bars
-
Project Alpha Web application project
-
Project Beta Mobile app development
-
Project Gamma API development
Size + Variant Combinations
SM - Primary
-
SM Primary
-
Another Item
SM - Success
-
SM Success
-
Another Item
SM - Warning
-
SM Warning
-
Another Item
MD - Primary
-
MD Primary
-
Another Item
MD - Success
-
MD Success
-
Another Item
MD - Warning
-
MD Warning
-
Another Item
LG - Primary
-
LG Primary
-
Another Item
LG - Success
-
LG Success
-
Another Item
LG - Warning
-
LG Warning
-
Another Item