Lungo2.0.js/example/app/sections/list.html

<section id="list" data-transition="slide">
    <header data-title="Lists" class="extended">
        <nav class="box">
            <a href="#back" data-router="section" data-label="back"></a>
        </nav>
    </header>

    <nav class="groupbar">
        <a href="#list-normal" data-router="article" class="active" data-icon="checkmark" data-label="Normal"></a>
        <a href="#list-indented" data-router="article" data-label="Indented"></a>
        <a href="#list-examples" data-router="article" data-label="Examples"></a>
    </nav>

    <article id="list-normal" class="active list scroll">
        <ul>
            <li>
                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
            </li>

            <li class="selectable">
                <strong>&lt;li .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">colors</li>

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

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

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

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

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

            <li class="arrow">
                <strong>&lt;li .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="#">
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                    <div class="right">.right</div>
                </a>
            </li>

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

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

            <li>
                <a href="#">
                    <a href="#" class="button small red right" data-label="button"></a>
                    <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://lungo.tapquo.com/resources/icon-144.png">
                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon-144.png">
                <strong>&lt;li .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 .thumb data-icon&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="anchor">With colours</li>
            <li class="accept">
                <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="cancel">
                <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="secondary">
                <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
        </ul>
    </article>

    <article id="list-indented" class="list scroll indented">
        <ul>
            <li>
                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
            </li>

            <li class="selectable">
                <strong>&lt;li .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">colors</li>

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

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

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

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

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

            <li class="arrow">
                <strong>&lt;li .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="#">
                    <strong>&lt;strong&gt; element</strong>
                    <small>with &lt;small&gt; element</small>
                    <div class="right">.right</div>
                </a>
            </li>

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

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

            <li>
                <a href="#">
                    <a href="#" class="button small red right" data-label="button"></a>
                    <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://lungo.tapquo.com/resources/icon-144.png">
                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon-144.png">
                <strong>&lt;li .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 .thumb data-icon&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>

            <li class="anchor">With colours</li>
            <li class="theme">
                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="accept">
                <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="cancel">
                <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
            <li class="secondary">
                <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
                <small>&lt;small&gt;</small>
            </li>
        </ul>
    </article>



    <article id="list-examples" class="list scroll">
        <ul>
            <li class="feature">
                <div class="right  ">15:49</div>
                <strong class="text bold">Enrique Amodeo Rubio</strong>
                <div class="text small">[madridJS] [JOB] Front Developer Position</div>
                <small>
                    <div class="right tag ">theme</div>
                    Hola a todos, nos llega esta oportunida muy inteeresante
                </small>
            </li>
            <li class="feature">
                <div class="right ">15:49</div>
                <strong class="text normal">Enrique Amodeo Rubio</strong>
                <small class="text small">[madridJS] [JOB] Front Developer Position</small>
                <small>
                    <div class="right tag cancel">important</div>
                    Hola a todos, nos llega esta oportunida muy inteeresante
                </small>
            </li>
            <li class="feature">
                <div class="right tag accept">sended</div>
                <strong class="text bold">Open Source Project</strong>
                <p class="text thin">Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.</p>
            </li>
            <li class="feature">
                <strong>Powerfull JavaScript API</strong>
                Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
            </li>
            <li class="feature">
                <strong>Multi-Device full support</strong>
                Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
            </li>

            <li>
                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
                <button data-icon="brand twitter" class="anchor theme" data-label="Tweet me"></button>
            </li>
        </ul>
    </article>
</section>