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);