Display Media

The Card allows you to display an image or video within its content.

To set a media element, use the kendoCardMedia directive.

import { ViewEncapsulation, Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    selector: 'my-app',
    template: `
        <div class="demo">
            <kendo-card *ngFor="let card of mediaCards" [width]="'260px'">
                <iframe *ngIf="card.videoSrc" kendoCardMedia height="267" [src]="card.videoSrc"></iframe>
                <img *ngIf="card.imageSrc" kendoCardMedia [src]="card.imageSrc" />
                <kendo-card-body>
                    <div>{{ card.description }}</div>
                </kendo-card-body>
                <kendo-card-actions [actions]="card.actionButtons" [layout]="card.actionsLayout"></kendo-card-actions>
            </kendo-card>
        </div>
    `,
    styles: [`
    .demo {
        display: flex;
        justify-content: space-evenly;
    }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public mediaCards: Array<any> = [
        {
            description: 'The Muppets Musical Gang is back at it with their rendition of Queen’s Bohemian Rhapsody!',
            actionButtons: [{ text: 'Add to favourites', flat: true, primary: true }],
            actionsLayout: 'start',
            videoSrc: this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/tgbNymZ7vqY')
        },
        {
            imageSrc: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/black_sea.jpg',
            description: 'The Black Sea is bordered by Ukraine, Romania, Bulgaria, Turkey, Georgia, and Russia. It has a positive water balance; that is, a net outflow of water 300 km3 per year through the Bosphorus and the Dardanelles into the Aegean Sea.',
            actionButtons: [{ text: 'Read more', flat: true, primary: false }, { text: 'Add', flat: true, primary: true }],
            actionsLayout: 'start'
        }
    ];

    constructor(private sanitizer: DomSanitizer) { }
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LayoutModule } from '@progress/kendo-angular-layout';
import { InputsModule } from '@progress/kendo-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        RouterModule.forChild(
            [{
                path: '',
                component: AppComponent
            }]
        ),
        CommonModule,
        LayoutModule,
        InputsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Display Avatars

The kendo-avatar component helps adding images, icons or initials.

The following example demonstrates the usage of the kendo-avatar component in the Card.

import { ViewEncapsulation, Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="demo">
            <kendo-card [width]="'260px'">
                <kendo-card-header class="k-hbox">
                    <kendo-avatar [width]="'40px'" [height]="'40px'" [imageSrc]="avatarSrc" [shape]="'circle'"></kendo-avatar>
                    <div>
                        <h1 kendoCardTitle>sofia_views</h1>
                        <p kendoCardSubtitle>Sofia, capital of Bulgaria</p>
                    </div>
                </kendo-card-header>
                <img kendoCardMedia [src]="imageSrc" />
                <kendo-card-actions class="icon-card-actions">
                    <div>
                        <button class="k-button k-flat">
                            <span class="k-icon k-i-heart-outline"></span>
                        </button>
                        <button class="k-button k-flat">
                            <span class="k-icon k-i-comment"></span>
                        </button>
                        <button class="k-button k-flat"><span class="k-icon k-i-share"></span></button>
                    </div>
                </kendo-card-actions>
            </kendo-card>
        </div>
    `,
    styles: [`
    .demo {
        display: flex;
        justify-content: center;
    }
    .k-card-header { flex: 0 0 auto; }
    .k-card-title { margin-bottom: 4px; }
    .k-card-subtitle { margin-bottom: 0; margin-top: 4px; }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public avatarSrc = 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/bg_flag.jpg';
    public imageSrc = 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/sofia.jpg';
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LayoutModule } from '@progress/kendo-angular-layout';
import { InputsModule } from '@progress/kendo-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        RouterModule.forChild(
            [{
                path: '',
                component: AppComponent
            }]
        ),
        CommonModule,
        LayoutModule,
        InputsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article