List group Default
List groups are a flexible and powerful component for displaying not only simple lists of elements.
- Lorem ipsum dolor sit amet
- Mauris placerat justo ut augue
- Donec ac venenatis elit
- Maecenas mauris diam
- Curabitur porttitor massa justo
List group Badges
Add the badges component to any list group item and it will automatically be positioned on the right.
- Lorem ipsum dolor sit amet14
- Mauris placerat justo ut augue8
- Donec ac venenatis elit7
- Maecenas mauris diam25
- Curabitur porttitor massa justo58
List group Linked Items
Linkify list group items by using anchor tags instead of list items. No need for individual parents around each element.
List Default
Use .list > .list-item
structure for simple listing with title or without it.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tellus nisi, at laoreet leo hendrerit et.
Duis odio libero
Maecenas non felis tincidunt, rhoncus risus commodo, interdum erat. Ut metus augue, tristique eu nisi nec.
Etiam suscipit dictum nulla
Nulla non venenatis nisl, nec sodales dolor. Ut leo ante, sodales vitae semper a, rutrum sit amet nibh.
List Controls
Add .list-item-controls
to use controls block. Try to click on list item.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tellus nisi, at laoreet leo hendrerit et.
Duis odio libero
Maecenas non felis tincidunt, rhoncus risus commodo, interdum erat. Ut metus augue, tristique eu nisi nec.
Etiam suscipit dictum nulla
Nulla non venenatis nisl, nec sodales dolor. Ut leo ante, sodales vitae semper a, rutrum sit amet nibh.
List Trigger
Use .list-item-trigger
to control item controls block. Also use same button to hide it.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tellus nisi, at laoreet leo hendrerit et.
Duis odio libero
Maecenas non felis tincidunt, rhoncus risus commodo, interdum erat. Ut metus augue, tristique eu nisi nec.
Etiam suscipit dictum nulla
Nulla non venenatis nisl, nec sodales dolor. Ut leo ante, sodales vitae semper a, rutrum sit amet nibh.