Collection
Styles for listings
Summary
Collection lists work with list- and div tags and offer a variety of possible applications.
Options and modifications¶
On the list¶
| Name | Description |
|---|---|
| .bordered | Sets a frame around the list and a border-bottom for the items |
| .rounded | Roundings for the list |
| .compact | Smaller distances for the items in the list. |
| .has-image | Activates the images/icons for the items in the list. |
| .with-header | Activates the header of the list |
On the items¶
| Name | Description |
|---|---|
| .active | Sets an item as active and highlights it |
| .disabled | Sets an item as disabled |
| .has-image | Activates the images/icons for the item. |
Markup¶
<ul class="collection v1"> <li class="collection-item"></li> <li class="collection-item"></li> </ul>
Example¶
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Collection with item-title¶
Item 1
Lorem ipsum dolor sit amet
Item 2
Lorem ipsum dolor sit amet
Item 1
Lorem ipsum dolor sit amet
Collection with item-title and list-heading¶
Lorem Ipsum
Item 1
Lorem ipsum dolor sit amet
Item 2
Lorem ipsum dolor sit amet
Item 1
Lorem ipsum dolor sit amet
Collection with item-states¶
Lorem Ipsum
Item 1
Lorem ipsum dolor sit amet
Item active
Lorem ipsum dolor sit amet
Item disabled
Lorem ipsum dolor sit amet
Collection with component colors¶
Lorem Ipsum
Item primary
Lorem ipsum dolor sit amet
Item secondary
Lorem ipsum dolor sit amet
Item success
Lorem ipsum dolor sit amet
Item info
Lorem ipsum dolor sit amet
Item warning
Lorem ipsum dolor sit amet
Item danger
Lorem ipsum dolor sit amet
Item highlight
Lorem ipsum dolor sit amet
Item royal
Lorem ipsum dolor sit amet
Item light
Lorem ipsum dolor sit amet
Item dark
Lorem ipsum dolor sit amet
Item default
Lorem ipsum dolor sit amet
Item black
Lorem ipsum dolor sit amet
Item white
Lorem ipsum dolor sit amet