List Group Sink
Default
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Small
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Large
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
With Metadata
Single Item
32
With Header
Variations
Default
Small
Text
Icon
Button
With Sublists
Home
Getting Started
triangle-fill-down--s
Visual Language
Color
Icons
triangle-fill-down--s
Components
Buttons
angle-right--s
Forms
Modals
Popovers
Table
Tooltips
With Icons
Single Item
32
bell
Cloud Icon
32
download-cloud
Focus, Hover, & Disabled
Hover State
Default
Focus State
Text
Disabled List Item
Button
No Items
One Item
Single Item
Items with Long Labels, Last Label Empty
A really long first label that gets way too long, making me wonder how long these labels really should be
angle-right--s
Second item
A really long first label that gets way too long, making me wonder how long these labels really should be
Really long metadata
Multiple Combinations
Variations
Item 1
Item 2 (Active)
21
angle-right--s
triangle-fill-down--s
Item 3, href and children, two targets
Sub Item, child of Item 3
Item 4
175
triangle-fill-down--s
Item 5, no href
Sub Item, child of Item 5
Sub Item 2, child of Item 5
triangle-fill-down--s
Item 6, sublist open by default
Sub Item, child of Item 6
Sub Item 2, child of Item 6
Sub Item 3, child of Item 6
Sub Item 4, child of Item 6
Default
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Small
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Large
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
With Metadata
Single Item
32
With Header
Variations
Default
Small
Text
Icon
Button
With Sublists
Home
Getting Started
triangle-fill-down--s
Visual Language
Color
Icons
triangle-fill-down--s
Components
Buttons
angle-right--s
Forms
Modals
Popovers
Table
Tooltips
With Icons
Single Item
32
bell
Cloud Icon
32
download-cloud
Focus, Hover, & Disabled
Hover State
Default
Focus State
Text
Disabled List Item
Button
No Items
One Item
Single Item
Items with Long Labels, Last Label Empty
A really long first label that gets way too long, making me wonder how long these labels really should be
angle-right--s
Second item
A really long first label that gets way too long, making me wonder how long these labels really should be
Really long metadata
Multiple Combinations
Variations
Item 1
Item 2 (Active)
21
angle-right--s
triangle-fill-down--s
Item 3, href and children, two targets
Sub Item, child of Item 3
Item 4
175
triangle-fill-down--s
Item 5, no href
Sub Item, child of Item 5
Sub Item 2, child of Item 5
triangle-fill-down--s
Item 6, sublist open by default
Sub Item, child of Item 6
Sub Item 2, child of Item 6
Sub Item 3, child of Item 6
Sub Item 4, child of Item 6
Default
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Small
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Large
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
With Metadata
Single Item
32
With Header
Variations
Default
Small
Text
Icon
Button
With Sublists
Home
Getting Started
triangle-fill-down--s
Visual Language
Color
Icons
triangle-fill-down--s
Components
Buttons
angle-right--s
Forms
Modals
Popovers
Table
Tooltips
With Icons
Single Item
32
bell
Cloud Icon
32
download-cloud
Focus, Hover, & Disabled
Hover State
Default
Focus State
Text
Disabled List Item
Button
No Items
One Item
Single Item
Items with Long Labels, Last Label Empty
A really long first label that gets way too long, making me wonder how long these labels really should be
angle-right--s
Second item
A really long first label that gets way too long, making me wonder how long these labels really should be
Really long metadata
Multiple Combinations
Variations
Item 1
Item 2 (Active)
21
angle-right--s
triangle-fill-down--s
Item 3, href and children, two targets
Sub Item, child of Item 3
Item 4
175
triangle-fill-down--s
Item 5, no href
Sub Item, child of Item 5
Sub Item 2, child of Item 5
triangle-fill-down--s
Item 6, sublist open by default
Sub Item, child of Item 6
Sub Item 2, child of Item 6
Sub Item 3, child of Item 6
Sub Item 4, child of Item 6
Default
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Small
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
Large
Item 1
Item 2 (Active)
21
angle-right--s
Showing Item 3
Showing Item 4 (Disabled)
Showing Item 5
Item 6
175
Item 7 has an icon
check--s
With Metadata
Single Item
32
With Header
Variations
Default
Small
Text
Icon
Button
With Sublists
Home
Getting Started
triangle-fill-down--s
Visual Language
Color
Icons
triangle-fill-down--s
Components
Buttons
angle-right--s
Forms
Modals
Popovers
Table
Tooltips
With Icons
Single Item
32
bell
Cloud Icon
32
download-cloud
Focus, Hover, & Disabled
Hover State
Default
Focus State
Text
Disabled List Item
Button
No Items
One Item
Single Item
Items with Long Labels, Last Label Empty
A really long first label that gets way too long, making me wonder how long these labels really should be
angle-right--s
Second item
A really long first label that gets way too long, making me wonder how long these labels really should be
Really long metadata
Multiple Combinations
Variations
Item 1
Item 2 (Active)
21
angle-right--s
triangle-fill-down--s
Item 3, href and children, two targets
Sub Item, child of Item 3
Item 4
175
triangle-fill-down--s
Item 5, no href
Sub Item, child of Item 5
Sub Item 2, child of Item 5
triangle-fill-down--s
Item 6, sublist open by default
Sub Item, child of Item 6
Sub Item 2, child of Item 6
Sub Item 3, child of Item 6
Sub Item 4, child of Item 6