ListViewcomponent

Excel 2013

Price: $1

Word 2013

Price: $1

Word 2013

Download...75%

Excel 2013

Word 2013

Word 2013

Excel 2013

General definition

<div class="listview">
    <a href="#" class="list">
        <div class="list-content">...</div>
    </a>
    ...
</div>

<div class="listview small">
    <a href="#" class="list">
        <div class="list-content">...</div>
    </a>
    ...
</div>

Examples of

<div class="listview">
    <a href="#" class="list">
        <div class="list-content">
            <img src="images/excel2013icon.png" class="icon">
            <div class="data">
                <span class="list-title">Excel 2013</span>
                <div class="rating small no-margin" data-role="rating"
                        data-stars="5"></div>
                <span class="list-remark">Price: $1</span>
            </div>
        </div>
    </a>

    <a href="#" class="list shadow">
        <div class="list-content">
            <span class="icon icon-location fg-lightBlue"></span>
            <div class="data">
                <span class="list-title">You location</span>
                <div class="rating small no-margin fg-dark" data-score="4"
                        data-role="rating" data-stars="5"></div>
                <span class="list-remark">Price: $1</span>
            </div>
        </div>
    </a>

    <a href="#" class="list selected">
        <div class="list-content">
            <img src="images/onenote2013icon.png" class="icon">
            <div class="data">
                <span class="list-title">Word 2013</span>
                <div class="progress-bar small" data-role="progress-bar"
                        data-value="75"></div>
                <span class="list-remark">Download...75%</span>
            </div>
        </div>
    </a>
</div>

List with Outlook 2013 style

// Simple
<div class="listview-outlook">
    <a href="#" class="list">
        <div class="list-content">...</div>
    </a>
    ...
</div>

// With group
<div class="listview-outlook" data-role="listview">
    <div class="list-group">
        <a href="" class="group-title">Group name</a>
        <div class="group-content">
            <a href="#" class="list">
                <div class="list-content">...</div>
            </a>
            ...
        </div>
    </div>
    <div class="list-group collapsed">
        <a href="" class="group-title">Group name</a>
        <div class="group-content">
            <a href="#" class="list">
                <div class="list-content">...</div>
            </a>
            ...
        </div>
    </div>
</div>

List with group required metro-listview.js