default.html

<div class="col-lg-12 control-section">
    <div id="flat-list">
        <h4>Flat List</h4>
        <!-- ListView element -->
        <div id="listview-def" tabindex="1">
            <ul>
                <li>Hennessey Venom</li>
                <li>Bugatti Chiron</li>
                <li>Bugatti Veyron Super Sport</li>
                <li>SSC Ultimate Aero</li>
                <li>Koenigsegg CCR</li>
                <li>McLaren F1</li>
                <li>Aston Martin One-77</li>
                <li>Jaguar XJ220</li>
                <li>McLaren P1</li>
                <li>Ferrari LaFerrari</li>
            </ul>
        </div>
    </div>
    <div id="group-list">
        <h4>Group List</h4>
        <!-- Group ListView element -->
        <div id="listview-grp" tabindex="1">
        </div>
    </div>

    <div id="action-description">
        <p>This sample demonstrates the default functionalities of the ListView. Click any list item to select and highlight
            an item.</p>
    </div>

    <div id="description">
        <p>ListView component represent data in interactive hierarchical structure interface across different layouts or views,
            that also has the features of data-binding, template rendering, and grouping.</p>

        <p>The group list allows to group the relevant items under a logical category by mapping the <code>groupBy</code> field.</p>

        <p>In this sample, <b>Cars</b> are grouped based on their <b>category</b>.</p>
    </div>
</div>
<style>
    #listview-def,
    #listview-grp {
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
    
    .control-section {
        overflow: auto;
    }
    
    #flat-list,
    #group-list {
        width: 49%;
        margin: auto;
        margin-bottom: 15px;
    }
    
    #flat-list h4,
    #group-list h4 {
        padding-left: 16px;
    }
    
    #flat-list {
        float: left;
    }
    
    #group-list {
        float: right;
    }
    
    @media screen and (max-width: 590px) {
        #flat-list,
        #group-list {
            width: 100%;
        }
    }
</style>