Tronic247 Material
Components

Lists

Usage

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

Sections

Left
Middle
Right 
<div class="list">
    <a href="#!" class="item ripple-e">
        <div class="left">
            Left
        </div>
        <div class="middle">
            Middle
        </div>
        <div class="right">
            Right
        </div>
    </a>
</div>

Active Item

Add the class active to the item you want to be active.

Item #1 Item #2 Item #3 Item #4 Item #5 

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

Small list

Add the class small to the list to make it smaller.

Item #1 Item #2 Item #3 Item #4 Item #5 

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