Lungo.js/examples/test/app/resources/sections/list.html

<section id="list" data-transition="slide">
    <header data-title="Lists" class="extended" data-back="home"></header>

    <nav class="groupbar">
        <a href="#list-normal" data-target="article" class="current" data-icon="checkmark" data-label="Normal"></a>
        <a href="#list-indented" data-target="article" data-icon="close" data-label="Indented"></a>
    </nav>

    <article id="list-normal" class="list scroll">
        <ul>
            <li class="anchor">With right elements</li>

            <li>
                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
            </li>

            <li class="selectable">
                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
            </li>

            <li>
                <a href="#">
                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
                </a>
            </li>

            <li>
                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="anchor">.arrow class</li>

            <li class="arrow">
                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
            </li>

            <li class="arrow">
                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="arrow">
                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
                <small>&lt;small&gt;</small>
            </li>


            <li class="anchor">.right element</li>

            <li>
                <a href="#">
                    <div class="right">.right</div>
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="right bubble blue">.right.bubble</div>
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                </a>
            </li>

            <li class="anchor">With data-icon or data-image attribute</li>
            <li data-image="http://placehold.it/32x32">
                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class=" thumb" data-image="http://placehold.it/46x46">
                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li data-icon="user">
                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="thumb" data-icon="user">
                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="anchor">With colours</li>
            <li class="blue">
                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="green">
                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="yellow">
                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
        </ul>

    </article>

    <article id="list-indented" class="list scroll indented">
        <ul>
            <li class="anchor">With right elements</li>

            <li>
                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
            </li>

            <li class="selectable">
                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
            </li>

            <li>
                <a href="#">
                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
                </a>
            </li>

            <li>
                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="anchor">.arrow class</li>

            <li class="arrow">
                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
            </li>

            <li class="arrow">
                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="arrow">
                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
                <small>&lt;small&gt;</small>
            </li>


            <li class="anchor">.right element</li>

            <li>
                <a href="#">
                    <div class="right">.right</div>
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="right bubble blue">.right.bubble</div>
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                </a>
            </li>

            <li class="anchor">With data-icon or data-image attribute</li>
            <li data-image="http://placehold.it/32x32">
                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class=" thumb" data-image="http://placehold.it/46x46">
                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li data-icon="user">
                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="thumb" data-icon="user">
                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="anchor">With colours</li>
            <li class="blue">
                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="green">
                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="yellow">
                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
        </ul>

    </article>
</section>