ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Horizontal Card in ASP.NET Core Card control

25 Oct 2021 / 1 minute to read

By default, all the card elements are aligned vertically one after the other as in the DOM. You can achieve the element to align horizontally as well by adding the class e-card-horizontal in the root card element.

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 To align card elements horizontally.
e-card-stacked To align elements vertically within the horizontal layout.
Copied to clipboard
    <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>
tagHelper
controller.cs
Copied to clipboard
<!--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>
Copied to clipboard
public ActionResult Index()
{
    return View();
}

Output be like the below.

CSS Card Control with horizontal structure

Previous
Next