Lungo.js/example/static/articles/list.html

<article id="list" class="active list scroll">
    <ul>
        <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 contrast">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 contrast">.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 contrast">.right element</li>

        <li>
            <a href="#">
                <div class="on-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="on-right">.right</div>
            </a>
        </li>

        <li>
            <a href="#">
                <div class="on-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="on-right" data-icon="globe">.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 on-right" data-label="button"></a>
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
            </a>
        </li>

        <li class="anchor contrast">With data-icon or data-image attribute</li>
        <li class="thumb">
            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
            <div>
                <div class="on-right text tiny">lorem ipsum</div>
                <strong>&lt;strong&gt;</strong>
                <span class="text small">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
                </span>
            </div>
        </li>

        <li class="thumb big">
            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
            <div>
                <div class="on-right text tiny">lorem ipsum</div>
                <strong>&lt;strong&gt;</strong>
                <span class="text tiny opacity">lorem ipsum</span>
                <small>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
                </small>
            </div>
        </li>

        <li data-icon="user">
            <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="anchor contrast">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="warning">
            <strong>&lt;li .warning&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class="color">
            <strong>&lt;li .color&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
    </ul>
</article>

<article id="list-indented" class="list scroll indented">
    <ul>


        <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 contrast">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 contrast">.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 contrast">.right element</li>

        <li>
            <a href="#">
                <div class="on-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="on-right">.right</div>
            </a>
        </li>

        <li>
            <a href="#">
                <div class="on-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="on-right" data-icon="globe">.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 on-right" data-label="button"></a>
                <strong>&lt;strong&gt; element</strong>
                <small>with &lt;small&gt; element</small>
            </a>
        </li>

        <li class="anchor contrast">With data-icon or data-image attribute</li>
        <li class="thumb">
            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
            <div>
                <div class="on-right text tiny">lorem ipsum</div>
                <strong>&lt;strong&gt;</strong>
                <span class="text small">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
                </span>
            </div>
        </li>

        <li class="thumb big">
            <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
            <div>
                <div class="on-right text tiny">lorem ipsum</div>
                <strong>&lt;strong&gt;</strong>
                <span class="text tiny opacity">lorem ipsum</span>
                <small>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
                </small>
            </div>
        </li>

        <li data-icon="user">
            <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>

        <li class="anchor contrast">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="warning">
            <strong>&lt;li .warning&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
        <li class="color">
            <strong>&lt;li .color&gt; + &lt;strong&gt; </strong>
            <small>&lt;small&gt;</small>
        </li>
    </ul>
</article>

<article id="list-examples" class="list scroll">
    <ul>
        <li>
            <h1>text example</h1>
            <h2>text example</h2>
            <h3>text example</h3>
            <h4>text example</h4>
            <strong>text example</strong>
            <small>text example</small>
            <span class="block text big">text example</span>
            <span class="block text bold">text example</span>
            <span class="block text normal">text example</span>
            <span class="block text thin">text example</span>
            <span class="block text small">text example</span>
            <span class="block text tiny">text example</span>
        </li>

        <li class="feature">
            <div class="on-right  ">15:49</div>
            <strong class="text bold">Javi Jimenez Villar</strong>
            <div class="text small">[JavaScript] [JOB] FrontEnd Developer</div>
            <small>
                <div class="on-right tag ">theme</div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
            </small>
        </li>
        <li class="feature">
            <div class="on-right ">15:49</div>
            <strong class="text normal">Ignacio Olalde</strong>
            <small class="text small">[Python] [JOB] BackEnd Developer</small>
            <small>
                <div class="on-right tag cancel">important</div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam delectus unde.
            </small>
        </li>
        <li class="feature">
            <div class="on-right tag accept">sended</div>
            <strong class="text bold">Open Source Project</strong>
            <p class="text thin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos officia dolore in perferendis eum ducimus molestias...</p>
        </li>
        <li class="feature">
            <strong>Lorem ipsum dolor sit amet</strong>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut corporis sint facilis cupiditate adipisci ab blanditiis porro dolorem nam velit saepe sed unde minima in nesciunt nostrum laboriosam fugit.
        </li>
    </ul>
</article>