Search results

Getting Started

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>
tagHelper
controller.cs
<div tabindex="0" class="e-card">
            <div class="e-card-header">
                <div class="e-card-header-image football"></div>
                <div class="e-card-header-caption">
                    <div class="e-card-header-title"> Camp Randall Stadium</div>
                    <div class="e-card-sub-title">1440 Monroe St, Madison, WI 53711, USA</div>
                </div>
            </div>
        </div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public partial class CardController : Controller
    {
        public IActionResult htmldom()
        {
            return View();
        }
    }
}

See Also