Orientation

The Card enables you to arrange its content either vertically or horizontally.

To set the Card orientation, use the orientation property.

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

@Component({
  selector: 'my-app',
  template: `
        <div class="demo">
            <!-- Horizontal Card -->
            <kendo-card [orientation]="'horizontal'">
                <img kendoCardMedia src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/coffee_first.jpg" />
                <div class="k-vbox">
                <kendo-card-header>
                    <h1 kendoCardTitle>Coffee with friends</h1>
                    <div kendoCardSubtitle>
                        <span class="reviews">
                            <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                            <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                            <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                            <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                            <span class="k-icon k-i-star-outline"></span>
                            <div>4/5 (681)</div>
                        </span>
                    </div>
                </kendo-card-header>
                <kendo-card-body>
                    <p>The right place to be if you're in love with high quality espresso or tea.
                    We offer wide range to top coffee brands as Davidoff Cafe, Lavazza, Tchibo, Illy.
                    </p>
                </kendo-card-body>
                <kendo-card-actions>
                    <button class="k-button k-primary k-flat">Review</button>
                </kendo-card-actions>
                </div>
            </kendo-card>

            <!-- Vertical Card -->
            <kendo-card>
                <img kendoCardMedia src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/coffee_second.jpg" />
                <div>
                    <kendo-card-header>
                        <h1 kendoCardTitle>Coffee with friends</h1>
                        <div kendoCardSubtitle>
                            <span class="reviews">
                                <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                                <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                                <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                                <span class="k-icon k-i-star" style="color: #ffce2a"></span>
                                <span class="k-icon k-i-star-outline"></span>
                                <div>4/5 (681)</div>
                            </span>
                        </div>
                    </kendo-card-header>
                    <kendo-card-body>
                        <p>The right place to be if you're in love with high quality espresso or tea.
                        We offer wide range to top coffee brands as Davidoff Cafe, Lavazza, Tchibo, Illy.
                        </p>
                    </kendo-card-body>
                    <kendo-card-actions>
                        <button class="k-button k-primary k-flat">Review</button>
                    </kendo-card-actions>
                </div>
            </kendo-card>
        </div>
    `,
    styles: [ `
        .demo {
            display: flex;
            justify-content: space-evenly;
        }
        .k-icon.k-icon-star {
            color: #FFCE2A;
        }
        .k-card {
            height: 450px;
        }
    `],
    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 { 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