<vn-data-viewer
    data="data"
    class="vn-w-xs">
    <vn-card>
    <vn-list class="separated">
        <a class="vn-item"
            ng-repeat="row in data | orderBy:'role.name'"
            ui-sref="account.role.card.summary(::{id: row.role.id})"
            translate-attr="{title: 'View role'}">
            <vn-item-section>
                <div>
                    {{::row.role.name}}
                </div>
                <div class="text-caption text-secondary">
                    {{::row.role.description}}
                </div>
            </vn-item-section>
        </a>
    </vn-list>
    </vn-card>
</vn-data-viewer>