zitadel/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html

<div class="groups">
    <span class="header">{{ 'IAM.MEMBER.TITLE' | translate }}</span>
    <span class="sub-header">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</span>
    <div class="people">
        <div class="img-list">
            <ng-container *ngIf="totalResult < 10; else compact">
                <ng-container *ngFor="let member of membersSubject | async; index as i">
                    <div (click)="showDetail()" class="avatar-circle" [ngStyle]="{'z-index': 100 - i}"
                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
                            class="avatar dontcloseonclick"
                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
                            [size]="32">
                        </app-avatar>
                    </div>
                </ng-container>
            </ng-container>
            <ng-template #compact>
                <div (click)="showDetail()" class="avatar-circle" matTooltip="Click to show detail">
                    <span>{{totalResult}}</span>
                </div>
            </ng-template>
            <button class="add-img" (click)="openAddMember()" mat-icon-button aria-label="Edit contributors">
                <mat-icon>add</mat-icon>
            </button>
        </div>
    </div>
</div>