Horizontal in Angular Card component

27 Aug 20254 minutes to read

By default, all card elements are aligned vertically in a stacked layout following the natural DOM flow. The horizontal layout provides an alternative arrangement where card elements are positioned side-by-side, creating a more compact and visually engaging presentation for content that benefits from lateral organization.

To achieve horizontal alignment, add the e-card-horizontal class to the root card element. This transforms the default vertical layout into a horizontal arrangement where child elements flow from left to right.

Stacked cards

  • An horizontally aligned card can push a specific column to align vertical using e-card-stacked class.
    This will align the stacked section vertically aligned differentiating from horizontal layout.
Class Description
e-card-horizontal Aligns card elements horizontally in a side-by-side layout.
e-card-stacked Forces vertical alignment for specific sections within a horizontal layout. 
        <div tabindex="0" class="e-card e-card-horizontal">
            <img src="code1.png" alt="Sample">   <!-- Aligned horizontally -->
            <div class="e-card-stacked">         <!-- Horizontal container -->
               <!-- Inside this element, all content flows vertically -->
            </div>
        </div>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



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

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-container',
    template: `
    <div style="margin: 50px;display: flex;flex-direction: row;justify-content: center;">
        <div tabindex="0" class="e-card e-card-horizontal" style="width:400px">
            <img src="./Code.png" alt="Sample" style="height: 180px">
            <div class="e-card-stacked">
                <div class="e-card-header">
                    <div class="e-card-header-caption">
                        <div class="e-card-header-title">Philips Trimmer</div>
                    </div>
                </div>
                <div class="e-card-content">
                    Powered by the innovative DuraPower Technology which optimizes power consumption, Philips trimmers are designed to last longer
                    than 4 ordinary trimmers.
                </div>
            </div>
        </div>
    </div>
        `
})

export class AppComponent {
    @ViewChild('element') element: any;

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));