Richlist

The reporting application provides a shared view that displays a table of data, referred to as a Details View.

Care example

33 W Monroe

Chicago IL, 60654

33 W Monroe

Chicago IL, 60654

HTML

<h4>Care example</h4>

<div class="t-content">
    <div class="c-richlist">
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-lineOne">
                    33 W Monroe
                </div>
                <div>
                    Chicago IL, 60654
                </div>
            </div>
            <div>
                <inv-icon glyph="'truck'" ng-show="true" title="Default Shipping Address"></inv-icon>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : true
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    33 W Monroe
                </div>
                <div>
                    Chicago IL, 60654
                </div>
            </div>
            <div>
                <inv-icon glyph="'truck'" ng-show="true" title="Default Shipping Address"></inv-icon>
            </div>
        </div>
    </div>
</div>

Richlist with Item Styles

A richlist with styles for item titles and labels.

Care example

Overview

Jonathan Raimer

Head of Household

Jaime Raimer

Johnny Raimer

Heath Raimer

Laurie Raimer

HTML

<h4>Care example</h4>

<div class="t-content">
    <div class="c-richlist">
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-itemTitle">
                    Overview
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : true
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-itemTitle">
                    Jonathan Raimer
                </div>
                <div class="c-richlist-itemLabel u-milli">
                  <inv-icon glyph="'star'" class="u-ml0"></inv-icon> <span>Head of Household</span>
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-itemTitle">
                    Jaime Raimer
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-itemTitle">
                    Johnny Raimer
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-itemTitle">
                    Heath Raimer
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-itemTitle">
                    Laurie Raimer
                </div>
            </div>
        </div>
    </div>
</div>

Richlist with Headers

A richlist with optional headers.

Care example

Head of Household

Jonathan Raimer

Johnathan@notemail.com

Members

Jaime Raimer

Johnny Raimer

Heath Raimer

Laurie Raimer

HTML

<h4>Care example</h4>

<div class="t-content">
    <div class="c-richlist">
        <div class="c-richlist-header">Head of Household</div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-richlist-lineOne">
                    Jonathan Raimer
                </div>
                <div>
                    Johnathan@notemail.com
                </div>
            </div>
        </div>
        <div class="c-richlist-header">Members</div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : true
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    Jaime Raimer
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    Johnny Raimer
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    Heath Raimer
                </div>
            </div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{
            'is-selected' : false
         }">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div>
                    Laurie Raimer
                </div>
            </div>
        </div>
    </div>
</div>

Responsible Party Richlist

A richlist for responsible party

Ace , Jane

jane.ace@initech.com

(555) 555-4238

Smith , Joe

joe.smith@initech.com

(312) 123-1234

HTML

<div class="t-content">
    <div class="c-richlist c-richlist--responsibleParty">
        <div class="c-richlist-item u-flex" ng-class="{'is-selected': true}">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-headingWithAnnotation c-richlist-name c-richlist-lineOne">
                    <div class="c-headingWithAnnotation-label c-richlist-itemTitle">Ace , Jane</div>
                    <div class="c-headingWithAnnotation-annotation c-button c-button--id" ui-popout-obfuscated-copier="1">ID
                    </div>
                </div>
                <div>jane.ace@initech.com</div>
            </div>
            <div>(555) 555-4238</div>
        </div>
        <div class="c-richlist-item u-flex" ng-class="{'is-selected': false}">
            <div  class="u-flexItemGrow u-flexItemMiddle">
                <div class="c-headingWithAnnotation c-richlist-name c-richlist-lineOne">
                    <div class="c-headingWithAnnotation-label c-richlist-itemTitle">Smith , Joe</div>
                    <div class="c-headingWithAnnotation-annotation c-button c-button--id" ui-popout-obfuscated-copier="2">ID
                    </div>
                </div>
                <div>joe.smith@initech.com</div>
            </div>
            <div>(312) 123-1234</div>
        </div>
    </div>
</div>