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

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
    Reference item
</p>
<p class="text-body2 layout-row layout-align-start-center">
    Used in lists and on its own in News, Contributors, Sharing, Notes
</p>


<p class="text-subhead2 h48 m0 bm8 layout-row layout-align-start-center">
    Example
</p>

<img src="http://i.imgur.com/Ie91769.png" class="pip-sample-pic">

<div class="pip-ref-item">
    <img class="pip-pic" src="images/ES_Goals.svg">
    <div class="pip-content">
        <p class="pip-title">Pip.Life - Small scale beta</p>
        <p class="pip-subtitle">goal</p>
    </div>
</div>

<div class="pip-ref-item">
    <img class="pip-pic" src="images/ES_Goals.svg">
    <div class="pip-content">
        <p class="pip-title">Pip.Life - Small scale beta</p>
        <p class="pip-subtitle">goal</p>
    </div>
</div>

<div class="pip-ref-item">
    <img class="pip-pic" src="images/ES_Goals.svg">
    <div class="pip-content">
        <p class="pip-title">Pip.Life - Small scale beta</p>
    </div>
</div>

<div class="pip-ref-item">
    <img class="pip-pic" src="images/ES_Goals.svg">
    <div class="pip-content">
        <p class="pip-title">Pip.Life - Small scale beta</p>
        <p class="pip-subtitle">
            <md-icon md-svg-icon="icons:help" class="pip-icon"></md-icon>
            goal
        </p>
    </div>
</div>

<div class="pip-ref-item">
    <img class="pip-pic-sm" src="images/ES_Goals.svg">
    <div class="pip-content">
        <p class="pip-title">Pip.Life - Small scale beta</p>
        <p class="pip-subtitle">goal</p>
    </div>
</div>

<div class="pip-ref-item">
    <img class="pip-pic-sm" src="images/ES_Goals.svg">
    <div class="pip-content">
        <p class="pip-title">Pip.Life - Small scale beta</p>
    </div>
</div>