pip-webui/pip-webui-css/samples/css_components/drilldown_list.html

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
    Drill down list control
</p>

<p class="text-subhead2 h48 m0 bm8 layout-row layout-align-start-center">
    Example
</p>
<img src="http://i.imgur.com/PMf8xwv.png" style="width: 400px">

<div class="pip-drilldown-list">
    <md-button class="pip-drilldown-list-item">
        <div class="pip-content">
            <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
            <p class="pip-title flex">Share</p>
            <md-icon md-svg-icon="icons:chevron-right"></md-icon>
        </div>

    </md-button>
    
    <md-button class="pip-drilldown-list-item pip-selected">

        <div class="pip-content">
        <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
        <p class="pip-title">Share</p>
        <md-icon md-svg-icon="icons:chevron-right"></md-icon>
            </div>
    </md-button>
    
    <md-button class="pip-drilldown-list-item">
        <div class="pip-content">
        <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
        <p class="pip-title">Share</p>
        <p >1/2</p>
        <md-icon md-svg-icon="icons:chevron-right"></md-icon>
            </div>
    </md-button>

    <md-button class="pip-drilldown-list-item pip-drilldown-list-item-lg pip-selected">
        <div class="pip-content">
            <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
            <div class="pip-subcontent flex">
                <p class="pip-title">Share</p>
                <p class="pip-subtitle flex">A: Pip.devs</p>
            </div>
            <p >1/2</p>
            <md-icon md-svg-icon="icons:chevron-right"></md-icon>
        </div>
    </md-button>

    <md-button class="pip-drilldown-list-item pip-drilldown-list-item-lg">
        <div class="pip-content">
            <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
            <div class="pip-subcontent flex">
                <p class="pip-title">Share</p>
                <p class="pip-subtitle flex">A: Monotonectally grow accurate quality vectors rather than performance based infomediaries</p>
            </div>
            <p >1/2</p>
            <md-icon md-svg-icon="icons:chevron-right"></md-icon>
        </div>
    </md-button>
    
    <md-button class="pip-drilldown-list-item pip-selected">
        <div class="pip-content">
        <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
        <p class="pip-title">Share</p>
        <p >1/2</p>
        <md-icon md-svg-icon="icons:chevron-right"></md-icon>
            </div>
    </md-button>

    <md-button class="pip-drilldown-list-item pip-selected">
        <div class="pip-content">
            <md-icon md-svg-icon="icons:document" class="pip-icon"></md-icon>
            <p class="pip-title">Uniquely reinvent process-centric relationships with cross functional e-commerce. Efficiently brand best-of-breed schemas and functional models. Competently morph scalable best practices via excellent growth strategies. Completely streamline enterprise-wide channels before.</p>
            <p>100/101</p>
            <md-icon md-svg-icon="icons:chevron-right"></md-icon>
        </div>
    </md-button>
</div>