zitadel/console/src/app/pages/users/user-detail/memberships/memberships.component.html

<div class="membership-groups">
    <span class="header">{{ 'USER.MEMBERSHIPS.TITLE' | translate }}</span>
    <div class="people" *ngIf="memberships">
        <div class="img-list" [@cardAnimation]="memberships.totalResult">
            <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
            <ng-container *ngIf="memberships.totalResult < 8; else compact">
                <ng-container *ngFor="let membership of memberships.resultList; index as i">
                    <div @animate class="avatar-circle" (click)="navigateToObject()"
                        matTooltip="{{ membership.displayName }} | {{membership.rolesList?.join(' ')}}"
                        [ngStyle]="{'z-index': 100 - i}">
                        <div class="membership-avatar"
                            [ngStyle]="{'background-color': getColor(membership.memberType)}">
                            <i *ngIf="membership.memberType == MemberType.MEMBERTYPE_ORGANISATION"
                                class="las la-archway"></i>
                            <i *ngIf="membership.memberType == MemberType.MEMBERTYPE_PROJECT"
                                class="icon las la-layer-group"></i>
                            <i *ngIf="membership.memberType == MemberType.MEMBERTYPE_PROJECT_GRANT"
                                class="icon las la-layer-group"></i>

                            <span>{{membership.displayName}}</span>
                        </div>
                    </div>
                </ng-container>
            </ng-container>
            <ng-template #compact>
                <div class="avatar-circle" matTooltip="Click to show detail" (click)="navigateToObject()" role="button">
                    <div class="membership-avatar">
                        <span style="font-size: 16px;">{{memberships.totalResult}}</span>
                    </div>
                </div>
            </ng-template>
            <button [disabled]="disabled" class="add-img" (click)="addMember()" mat-icon-button
                aria-label="add membership">
                <mat-icon>add</mat-icon>
            </button>
            <span class="fill-space"></span>
            <button class="refresh-img" (click)="loadManager(user.id)" [disabled]="disabled" mat-icon-button
                aria-label="refresh contributors">
                <mat-icon>refresh</mat-icon>
            </button>
        </div>
    </div>
</div>