Getting started with ASP.NET Core Card control

This section briefly explains about how to include a simple Card in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding a simple Card

• Add the HTML div element with e-card class into your sample file.

    <div class = "e-card">
        Sample Card
    </div>

Adding a header and content

You can create Card with a header in a specific structure. For adding header you need to create a div element with e-card-header class added.

• You can include heading inside the Card header by adding a div element with e-card-header-caption class, and also content will be added by adding element with e-card-content. For detailed information, refer to the Header and Content.

    <div class = "e-card">                    --> Root Element
        <div class="e-card-header">           --> Root Header Element
            <div class="e-card-header-caption">    --> Root Heading Element
                <div class="e-card-header-title"></div>   --> Heading Title Element
            </div>
            <div class="e-card-content"></div>         --> Card content Element
        </div>
    </div>

<div tabindex="0" class="e-card" id="basic">
    <div class="e-card-header">
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Advanced UWP</div>
        </div>
    </div>
    <div class="e-card-content">
        Advanced UWP: Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series
        author Matteo Pagani. To download the complete white paper, and other papers in the series, visit
        the White Paper section of Syncfusion’s Technology Resource Portal.
    </div>
</div>

public ActionResult Index()
{
    return View();
}

Output be like the below.

See Also

• How to add a header and content