Tronic247 Material

Lists

Edit this page

Usage

<div class="list">
    <a href="#!" class="list-item ripple-e">Item #1</a>
    <a href="#!" class="list-item ripple-e">Item #2</a>
    <a href="#!" class="list-item ripple-e">Item #3</a>
    <a href="#!" class="list-item ripple-e">Item #4</a>
    <a href="#!" class="list-item ripple-e">Item #5</a>
</div>

Before and after items

<div class="list">
    <a href="#!" class="list-item ripple-e">
        <span class="material-icons">done</span>Item #1
        <span class="after">
            <label class="checkbox">
                <input type="checkbox" />
                <span></span>
            </label>
        </span>
    </a>
    <a href="#!" class="list-item ripple-e">
        <span class="material-icons">done</span>Item #2
        <span class="after">
            <label class="checkbox">
                <input type="checkbox" />
                <span></span>
            </label>
        </span>
    </a>
    <a href="#!" class="list-item ripple-e">
        <span class="material-icons">done</span>Item #3
        <span class="after">
            <label class="checkbox">
                <input type="checkbox" />
                <span></span>
            </label>
        </span>
    </a>
    <a href="#!" class="list-item ripple-e">
        <span class="material-icons">done</span>Item #4
        <span class="after">
            <label class="checkbox">
                <input type="checkbox" />
                <span></span>
            </label>
        </span>
    </a>
    <a href="#!" class="list-item ripple-e">
        <span class="material-icons">done</span>Item #5
        <span class="after">
            <label class="checkbox">
                <input type="checkbox" />
                <span></span>
            </label>
        </span>
    </a>
</div>

Active Item

<div class="list">
    <a href="#!" class="list-item ripple-e">Item #1</a>
    <a href="#!" class="list-item ripple-e">Item #2</a>
    <a href="#!" class="list-item ripple-e active">Item #3</a>
    <a href="#!" class="list-item ripple-e">Item #4</a>
    <a href="#!" class="list-item ripple-e">Item #5</a>
</div>

Small List

<div class="list small">
    <a href="#!" class="list-item ripple-e">Item #1</a>
    <a href="#!" class="list-item ripple-e">Item #2</a>
    <a href="#!" class="list-item ripple-e">Item #3</a>
    <a href="#!" class="list-item ripple-e">Item #4</a>
    <a href="#!" class="list-item ripple-e">Item #5</a>
</div>