Syncfusion AI Assistant

How can I help you?

Horizontal in EJ2 TypeScript Card control

5 Mar 20264 minutes to read

By default, all card elements are aligned vertically one after the other in the order they appear in the DOM. To align card elements horizontally, add the e-card-horizontal class to the root card element.

Stacked cards

  • A horizontally aligned card can push a specific column to align vertically using the e-card-stacked class. This aligns the stacked section vertically within the horizontal layout, differentiating it from the horizontal arrangement.
Class Description
e-card-horizontal To align card elements horizontally.
e-card-stacked To align elements vertically within the horizontal layout. 
        <div tabindex="0" class="e-card e-card-horizontal">
            <img src="code1.png" alt="Sample">   --> Aligned in horizontal
            <div class="e-card-stacked">         --> Aligned in horizontal
               // Inside the element all are aligned vertical directions
            </div>
        </div>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Card Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/fluent2.css" rel="stylesheet" />
</head>

<body>
    <div style="margin: 50px;display: flex;flex-direction: row;justify-content: center;">
        <!--element which is going to render the Card-->
        <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>
</body>

</html>