Index

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 Index.js plugin.

Primary index

The main classes you need to apply are index to the container element, and index-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.

Primary Index

This index 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 index-item-meta. Use the index-bordered class to add borders between the items.

First Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada dapibus lacus, quis placerat ligula blandit at.

3 pages. Source: The New York Times. Created: Jul 8, 2014. Special

Second Item

Nulla ut suscipit ex, ac tempor lorem. Phasellus eleifend viverra ex, et sollicitudin mauris vehicula et.

3 pages. Source: The New York Times. Created: Jul 8, 2014.
{% highlight html %}

First Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada dapibus lacus, quis placerat ligula blandit at.

3 pages. Source: The New York Times. Created: Jul 8, 2014. Special

Second Item

Nulla ut suscipit ex, ac tempor lorem. Phasellus eleifend viverra ex, et sollicitudin mauris vehicula et.

3 pages. Source: The New York Times. Created: Jul 8, 2014.
{% endhighlight %}

Contextual classes

Use contextual classes along with the table-state class on the index to add partial highlighting to select items in your list.

Active

Success

Info

Warning

Danger

{% highlight html %}
...
...
...
...
...
{% endhighlight %}

Compact version

A more compact version of the index is available by applying the .index-compact class to the container element.

Active
Success
Info
Warning
Danger
{% highlight html %}
...
...
...
...
...
{% endhighlight %}

Single-action lists

Turn the entire list item into a link by making the item container an <a> element.

{% highlight html %}

First Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada dapibus lacus, quis placerat ligula blandit at.

First Item

Nulla ut suscipit ex, ac tempor lorem. Phasellus eleifend viverra ex, et sollicitudin mauris vehicula et.

{% endhighlight %}

Toggle Index

A set of lightweight styles to show a single row of text that represents items to be toggled on and off.

{% highlight html %}
First Item Second Item Third Item
{% endhighlight %}