Render a collection of items into a clear, compact list that supports common requirements like active states and metadata. All of these style sets work with the List.js plugin.
The main classes you need to apply are list
to the container element, and list-item
to each item in the collection. By itself, Adcom some very light adjustments to padding and margin to ready your list for a stacked list of items that can contain one or several rows of text.
This list is suited well for a main index page of objects: when you want more control than a table, more content than a title, and want to associate multiple actions with an item. Display metadata about the item within list-item-meta
. Use the list-bordered
class to add borders between the items.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada dapibus lacus, quis placerat ligula blandit at.
Nulla ut suscipit ex, ac tempor lorem. Phasellus eleifend viverra ex, et sollicitudin mauris vehicula et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada dapibus lacus, quis placerat ligula blandit at.
Nulla ut suscipit ex, ac tempor lorem. Phasellus eleifend viverra ex, et sollicitudin mauris vehicula et.
Use contextual classes along with the table-state
class on the list to add partial highlighting to select items in your list.
A more compact version of the list is available by applying the .list-compact
class to the container element.
Left padding is applied to all items that have an explicit state defined.
Add a hover state to your list items by adding the list-hover
class to your container element. This is useful for treating the entire item as a selectable element. It's up to you to use an <a>
tag for the item or specify the cursor hover state another way.
Left padding is added to all items.
list-state
list-state-bg
list-state + <table>
No class |
Default |
Active |
Success |
Info |
Warning |
Danger |
A set of lightweight styles to show a single row of text that represents items to be toggled on and off.
{% highlight html %} {% endhighlight %}