<div uppViewMode>
    <ng-container *ngIf="viewMode === 'GRID'">
        <ion-card uppTouch [color]="color" (click)="OnSelect()" (mousedown)="OnPressed(true)" (mouseup)="OnPressed(false)" (onTouchStart)="OnPressed(true)" (onTouchLeave)="OnPressed(false)">
            <ng-container *ngIf="icon === null">
                <div *ngIf="wait === true" class="shape" [ngClass]="shape">
                    <ion-spinner name="lines"></ion-spinner>
                </div>
                <div *ngIf="wait !== true" class="shape" [ngClass]="shape">
                    <upp-image [src]="card || avatar"></upp-image>
                </div>
            </ng-container>
            <ng-container *ngIf="icon !== null">
                <div class="icon-box">
                    <ion-icon [color]="color" [name]="icon" [ngClass]="{ 'foot': foot !== null }"></ion-icon>
                    <ion-label [color]="color" *ngIf="foot">{{foot}}</ion-label>
                </div>
            </ng-container>
            <ion-card-header>
                <ion-card-title>{{title}}</ion-card-title>
            </ion-card-header>
        </ion-card>
        <ng-content select="upp-thumb-top-left"></ng-content>
        <ng-content select="upp-thumb-top-right"></ng-content>
        <ng-content select="upp-thumb-bottom"></ng-content>    
    </ng-container>
    <ng-container *ngIf="viewMode === 'LIST'">
        <ion-item uppTouch (click)="OnSelect()" (mousedown)="OnPressed(true)" (mouseup)="OnPressed(false)" (onTouchStart)="OnPressed(true)" (onTouchLeave)="OnPressed(false)">
            <upp-image slot="start" [src]="card || avatar"></upp-image>
            <ion-label>
                {{title}}
                <span *ngIf="detail" class="small"><br/>{{detail}}</span>
            </ion-label>
            <ng-content slot="end" select="upp-thumb-top-left"></ng-content>
            <ng-content slot="end" select="upp-thumb-top-right"></ng-content>
        </ion-item>
    </ng-container>    
</div>

./upp-thumb.scss

:host {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;

    ion-card {
        position: relative;
        margin: 0px;
        padding: 0px;
        opacity: inherit;

        .icon-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;

            margin: 2px;
            height: 9em;
            background: var(--ion-background-color);
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;

            ion-icon {
                font-size: 7em;
                &.foot {
                    font-size: 5em;
                }
            }
            
            ion-label {
                margin-top: 10px;
                text-transform: uppercase;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.4px;     
    
                padding: 0px 10px;
                max-width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .shape {
            display: block;
            height: 9em;
            overflow: hidden;
            margin: 2px;
            background: var(--ion-background-color);

            &.round {
                padding-top: 1em;

                upp-image {
                    height: 7em !important;
                    width: 7em !important;
                    margin: auto;
                    border-radius: 50%;
                    overflow: hidden;
                }    
            }
        }

        ion-spinner {
            display: block;
            margin: 1em auto;
            height: 7em;
            width: 7em;
        }

        upp-image {
            display: block;
            margin: 0px;
            height: 9em;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            object-fit: cover;
        }

        ion-card-header {
            padding: 8px 4px;

            ion-card-title {
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.2px;
                text-transform: uppercase;
                padding: 0px 5px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    ion-item {
        border-radius: 8px;
        --background: var(--ion-color-light);

        upp-image {
            height: 40px;
            width: 40px;
            object-fit: cover;

            margin: 0px 10px 0px 0px;
            border: 2px solid var(--ion-color-dark);
            border-radius: 8px;
            overflow: hidden;
        }

        ion-label {
            .small {
                font-size: 80%;
                opacity: .8;
            }
        }
    }
}