Lists

Lists present multiple line items in a vertical arrangement as a single continuous element.

---

Live Example

---

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="lists.css">

Basic

<ul class="list">
    <li class="divider">Basic</li>
    <li class="padded-list">Item</li>
    <li class="padded-list">Item</li>
</ul>

With Links

<ul class="list">
    <li><a href="#item" class="padded-list">Link</a></li>
    <li><a href="#item" class="padded-list">Link</a></li>
    <li><a href="#item" class="padded-list">Link</a></li>
</ul>

Left action

<ul class="list">
    <li class="divider">Left action</li>
    <li>
        <a href="#action" class="pull-left icon icon-edit"></a>
        <span class="padded-list">Item</span>
    </li>
    <li>
        <a href="#action" class="pull-left">Text</a>
        <span class="padded-list">Item</span>
    </li>
</ul>

With Links

<ul class="list">
    <li class="divider">Left action</li>
    <li>
        <a href="#action" class="pull-left icon icon-edit"></a>
        <a href="#item" class="padded-list">Link</a>
    </li>
    <li>
        <a href="#action" class="pull-left">Text</a>
        <a href="#item" class="padded-list">Link</a>
    </li>
</ul>

Right action

<ul class="list">
    <li class="divider">Right action</li>
    <li>
        <a href="#action" class="pull-right icon icon-edit"></a>
        <span class="padded-list">Item</span>
    </li>
    <li>
        <a href="#action" class="pull-right">Text</a>
        <span class="padded-list">Item</span>
    </li>
</ul>

With Links

 <ul class="list">
    <li class="divider">Right action</li>
    <li>
        <a href="#action" class="pull-right icon icon-edit"></a>
        <a href="#item" class="padded-list">Item</a>
    </li>
    <li>
        <a href="#action" class="pull-right">Text</a>
        <a href="#item" class="padded-list">Item</a>
    </li>
</ul>

Left and right actions

<ul class="list">
    <li class="divider">Left and right actions</li>
    <li class="item-expanded">
        <a href="#action" class="pull-right icon icon-edit"></a>
        <a href="#action" class="pull-left icon icon-edit"></a>
        <div class="item-content">
            <span class="title">Item</span>
            <span class="body">Small text</span>
        </div>
    </li>
    <li class="item-expanded">
        <a href="#action" class="pull-right">Text</a>
        <a href="#action" class="pull-left">Text</a>
        <div class="item-content">
            <span class="title">Item</span>
            <span class="body">Small text</span>
        </div>
    </li>
</ul>

With Links

<ul class="list">
    <li class="divider">Left and right actions</li>
    <li class="item-expanded">
        <a href="#action" class="pull-right icon icon-edit"></a>
        <a href="#action" class="pull-left icon icon-edit"></a>
        <a href="#item">
            <div class="item-content">
                <span class="title">Item</span>
                <span class="body">Small text</span>
            </div>
        </a>
    </li>
    <li class="item-expanded">
        <a href="#action" class="pull-right">Text</a>
        <a href="#action" class="pull-left">Text</a>
        <a href="#item">
            <div class="item-content">
                <span class="title">Item</span>
                <span class="body">Small text</span>
            </div>
        </a>
    </li>
</ul>

---