Lungo.js/example/app/asides/features.html

<aside id="features" class="left">
    <header data-title="Features">
        <nav class="right">
            <a href="#" class="buttons" data-icon="settings"></a>
        </nav>
    </header>

    <article class="list scroll active">
        <ul>
            <!-- Basic Layout -->
            <li class="active" data-view-article="main-article" data-title="Lungo Framework">
                <a href="#">
                    <strong>Meet the framework</strong>
                </a>
            </li>

            <!-- Layout & Navigation -->
            <li data-view-section="layout" data-async="app/sections/layout.html">
                <a href="#">
                    <strong>Layout</strong>
                    <div class="tag right">5</div>
                </a>
            </li>

            <!-- List -->
            <li>
                <a href="#" data-view-article="list" data-async="app/articles/list.html">
                    <strong>Lists</strong>
                    <div class="tag right">22</div>
                </a>
            </li>

            <!-- Forms -->
            <li>
                <a href="#" data-view-section="form" data-async="app/sections/form.html">
                    <div class="tag right">8</div>
                    <strong>Form Elements</strong>
                </a>
            </li>

            <!-- Asides -->
            <li>
                <a href="#" data-view-section="aside" data-async="app/sections/aside.html">
                    <div class="tag right">8</div>
                    <strong>Asides</strong>
                </a>
            </li>

            <!-- Menu -->
            <li>
                <a href="#" data-view-section="menu" data-async="app/sections/menu.html">
                    <div class="tag right">1</div>
                    <strong>Menu</strong>
                </a>
            </li>

            <!-- Data-Attributes -->
            <li>
                <a href="#" data-view-article="data" data-async="app/articles/data.html">
                    <div class="tag right">9</div>
                    <strong>Data-attributes</strong>
                </a>
            </li>

            <!-- Icons -->
            <li>
                <a href="#" data-view-article="icons" data-async="app/articles/icon.html">
                    <div class="tag right">109</div>
                    <strong>Icons</strong>
                </a>
            </li>

            <!-- Scrolls -->
            <li>
                <a href="#scroll" data-router="section" data-async="app/sections/scroll.html">
                    <div class="tag right">2</div>
                    <strong>Scrolls</strong>
                </a>
            </li>

            <!-- Touch Events -->
            <li>
                <a href="#" data-view-article="touchevents" data-async="app/articles/touchevents.html">
                    <div class="tag right">19</div>
                    <strong>Touch Events</strong>
                </a>
            </li>

            <!-- Layout Events -->
            <li>
                <a href="#" data-view-section="layoutevents" data-async="app/sections/layoutevents.html">
                    <div class="tag right">2</div>
                    <strong>Layout Events</strong>
                </a>
            </li>

            <!-- Notifications -->
            <li>
                <a href="#" data-view-article="notification" data-async="app/articles/notification.html">
                    <div class="tag right">8</div>
                    <strong>Notifications</strong>
                </a>
            </li>

            <!-- Pull & Refresh -->
            <li>
                <a href="#" data-view-section="pull" data-async="app/sections/pull.html">
                    <div class="tag right">1</div>
                    <strong>Pull & Refresh</strong>
                </a>
            </li>

            <!-- Carousel -->
            <li>
                <a href="#" data-view-section="carousel" data-async="app/sections/carousel.html">
                    <div class="tag right">1</div>
                    <strong>Carousel</strong>
                </a>
            </li>

            <!-- Environment -->
            <li>
                <a href="#" data-view-article="environment" data-async="app/articles/environment.html">
                    <div class="tag right">1</div>
                    <strong>Environment</strong>
                </a>
            </li>

            <!-- Buttons & Colours -->
            <li>
                <a href="#" data-view-article="buttons" data-async="app/articles/buttons.html">
                    <div class="tag right">14</div>
                    <strong>Buttons & Colours</strong>
                </a>
            </li>

            <!-- Theme roller -->
            <li>
                <a href="#" data-view-article="themeroller" data-async="app/articles/theme.html">
                    <div class="tag right">4</div>
                    <strong>Theme roller</strong>
                </a>
            </li>

            <!-- Grid System -->
            <li>
                <a href="#" data-view-article="grid" data-async="app/articles/grid.html">
                    <strong>Grid System</strong>
                </a>
            </li>
        </ul>
    </article>
</aside>