Custom Layout

The Card allows you to arrange custom layouts of its content by using predefined css classes.

The following example demonstrates the usage of the given classes:

  • k-hbox—Allows elements positioning in a horizontal flex container element.
  • k-vbox—Allows elements positioning in a vertical flex container element.
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'image-cards',
    template: `
        <div class="demo">
            <kendo-card [orientation]="'horizontal'">
                <span class="k-card-image">
                    <img kendoCardMedia [src]="'https://demos.telerik.com/kendo-ui/content/web/cards/seaview-appartments.png'" />
                </span>
                <hr kendoCardSeparator [orientation]="'vertical'" />
                <div class="k-vbox">
                    <kendo-card-header>
                        <h5 kendoCardTitle>Seaview Apartments</h5>
                        <h6 kendoCardSubtitle>Best beach view appartments</h6>
                    </kendo-card-header>
                    <kendo-card-body>
                        <p>
                            A luxurious two-bedroom apartment with the best views over Santorini.
                            Just continue reading to find out our favorite beach spots for 2020.
                        </p>
                    </kendo-card-body>
                    <kendo-card-actions [layout]="'stretched'">
                        <button class="k-button k-flat">Read more</button>
                        <button class="k-button k-primary k-flat">Save for later</button>
                    </kendo-card-actions>
                </div>
            </kendo-card>

            <kendo-card [orientation]="'horizontal'">
                <img kendoCardMedia [src]="'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/sofia.jpg'" />

                <div class="k-vbox">
                    <kendo-card-header>
                        <h5 kendoCardTitle>Sofia Sightseeing</h5>
                        <h6 kendoCardSubtitle>Alexander Nevsky Cathedral, Bulgaria</h6>
                    </kendo-card-header>
                    <kendo-card-body>
                        <p>
                            St. Alexander Nevsky Cathedral serves as the cathedral church of the Patriarch of Bulgaria and
                            is one of the largest Eastern Orthodox cathedrals in the world.
                        </p>
                    </kendo-card-body>
                    <kendo-card-actions [layout]="'stretched'">
                        <button class="k-button k-flat">Reviews</button>
                        <button class="k-button k-primary k-flat">Book a tour</button>
                    </kendo-card-actions>
                </div>
            </kendo-card>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-card-horizontal .k-card-image img {
            max-width: 160px;
        }
    `]
})
export class ImageCardsComponent { }
import { Component } from '@angular/core';

@Component({
    selector: 'weather-card',
    template: `
        <kendo-card class="k-text-center">
            <kendo-card-header>
                <h5 kendoCardTitle>Sofia</h5>
                <div class="k-display-1">☀️</div>
                <h6 kendoCardSubtitle>Sunny</h6>
            </kendo-card-header>
            <kendo-card-body>
                <div class="k-display-2">2°C</div>
            </kendo-card-body>
            <kendo-card-actions [layout]="'stretched'">
                <button class="k-button k-flat">Share</button>
                <button class="k-button k-primary k-flat">Open Weather Service</button>
            </kendo-card-actions>
        </kendo-card>
    `
})
export class WeatherCardComponent { }
import { Component } from '@angular/core';

@Component({
    selector: 'flight-ticket-card',
    template: `
        <kendo-card>
            <kendo-card-header>
                <h5 kendoCardTitle>Passenger</h5>
                <h6 kendoCardSubtitle>George Hudson</h6>
            </kendo-card-header>
            <kendo-card-body>
                <div class="k-hbox">
                    <div class="k-column k-text-left">Departure</div>
                    <div class="k-column k-text-right">Arrival</div>
                </div>

                <div class="k-hbox">
                    <div class="k-column k-text-left">
                        <div class="k-display-4">SOF</div>
                        <div>
                            6 Dec 2017<br>
                            10:30
                        </div>
                    </div>
                    <div class="k-column k-display-4 k-text-center">
                        ✈️
                    </div>
                    <div class="k-column k-text-right">
                        <div class="k-display-4">LON</div>
                        <div>
                            6 Dec 2017<br>
                            12:30
                        </div>
                    </div>
                </div>
                <hr kendoCardSeparator />
                <div class="k-hbox">
                    <div class="k-column k-text-left">
                        <div class="k-display-4">LON</div>
                        <div>
                            12 Dec 2017<br>
                            18:30
                        </div>
                    </div>
                    <div class="k-column k-display-4 k-text-center">
                        ✈️
                    </div>
                    <div class="k-column k-text-right">
                        <div class="k-display-4">SOF</div>
                        <div>
                            12 Dec 2017<br>
                            22:30
                        </div>
                    </div>
                </div>
            </kendo-card-body>
            <kendo-card-footer>
                <div class="k-hbox">
                    <div class="k-column k-text-left">Total</div>
                    <div class="k-column k-text-right">BGN 234</div>
                </div>
            </kendo-card-footer>
        </kendo-card>
    `
})
export class FlightTicketCardComponent { }
import { Component } from '@angular/core';

@Component({
    selector: 'horizontal-cards',
    template: `
        <div class="demo">
            <kendo-card [orientation]="'horizontal'">
                <div class="k-vbox">
                    <kendo-card-header>
                        <h5 kendoCardTitle>Safari in Tanzania</h5>
                        <h6 kendoCardSubtitle>Book now</h6>
                    </kendo-card-header>
                    <kendo-card-body>
                        <p>
                            Africa provides some of the most epic wildlife diversity on the planet.
                        </p>
                        <div>
                            <span class="k-icon k-i-warning"></span> Private tour
                            <br />
                            <span class="k-icon k-i-calendar-date"></span> Can start any day
                        </div>
                    </kendo-card-body>
                    <hr kendoCardSeparator [orientation]="'horizontal'" />
                    <kendo-card-body>
                        <p>Available hours</p>
                        <kendo-chip-list [selection]="'single'">
                            <kendo-chip *ngFor="let hour of hours" [label]="hour.label"> </kendo-chip>
                        </kendo-chip-list>
                    </kendo-card-body>
                    <kendo-card-actions [layout]="'end'">
                        <button class="k-button k-primary k-flat">Check reviews</button>
                        <button class="k-button k-flat">Price</button>
                    </kendo-card-actions>
                </div>
            </kendo-card>

            <kendo-card>
                <img kendoCardMedia [src]="doctor" />
                <div class="k-vbox">
                    <kendo-card-header>
                        <h5 kendoCardTitle>Dr. Nicole Graham</h5>
                        <h6 kendoCardSubtitle>Cardiologist</h6>
                    </kendo-card-header>
                    <kendo-card-body>
                        <p><strong>Office Hours:</strong> Mon - Fri, 09 AM - 05 PM</p>
                    </kendo-card-body>
                    <kendo-card-actions [layout]="'end'">
                        <button class="k-button k-flat">Contact info</button>
                        <button class="k-button k-primary k-flat">Book a Check-up</button>
                    </kendo-card-actions>
                </div>
            </kendo-card>
        </div>
    `
})
export class HorizontalCardsComponent {
    public doctor = 'https://demos.telerik.com/kendo-ui/content/chat/doctor1.jpg';

    public hours: Array<{ label: string }> = [{ label: '10:00' }, { label: '12:30' }, { label: '15:00' }, { label: '18:30' }];
}
import { ViewEncapsulation, Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="demo">
            <image-cards></image-cards>

            <weather-card></weather-card>
            <flight-ticket-card></flight-ticket-card>

            <horizontal-cards></horizontal-cards>
        </div>
    `,
    styles: [`
    .demo {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    image-cards,
    horizontal-cards {
        width: 100%;
    }
    .k-card {
        margin-top: 15px;
        height: 360px;
    }
    .k-card-separator {
        margin: 8px 0;
    }
    .k-separator-vertical {
        margin: 0;
    }
    hr {
        height: auto !important;
    }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent { }
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 { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';
import { WeatherCardComponent } from './weather-card.component';
import { FlightTicketCardComponent } from './flight-ticket-card.component';
import { ImageCardsComponent } from './image-cards.component';
import { HorizontalCardsComponent } from './horizontal-cards.component';

@NgModule({
    declarations: [
        AppComponent,
        WeatherCardComponent,
        FlightTicketCardComponent,
        ImageCardsComponent,
        HorizontalCardsComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        RouterModule.forChild(
            [{
                path: '',
                component: AppComponent
            }]
        ),
        CommonModule,
        LayoutModule,
        InputsModule,
        ButtonsModule
    ],
    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