Search results

Header and Content

The Card can be created with header title, sub title and images. For adding header you need to create div element with the class e-card-header added.

Card provides below elements and corresponding class definitions to include header.

Elements Description
Caption It is the wrapper element to include title and sub-title.
Image It supports to include header images with the specified dimensions.
Class Description
e-card-header-caption To group the title and subtitle within the header which acts as wrapper.
e-card-header-title Main title text with in the header.
e-card-sub-title A sub-title within the header.
e-card-header-image To include heading image within the header.
e-card-corner To add rounded corner for the image.

Title and Subtitle

For adding header to the Card , you need to create wrapper div element with e-card-header-caption class.

  • Place the div element with e-card-header-title class inside the header caption for adding main title.

  • Place the div element with e-card-sub-title class inside the header caption element for adding sub-title.

Image

Card header has an option for adding images in the header. It is aligned with either before or after the header based on the HTML element positioned in the header structure.

  • The header image can be added by creating a div element with e-card-header-image class which can be placed before or after the header caption wrapper element.
tagHelper
controller.cs
@section ControlsSection {            
       
        <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>

}
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();
        }
    }
}

Content

Content in Card holds texts, images, links and all possible HTML elements. Its adaptable within the Card root element.

  • Create a div element with the class e-card-content.
  • Place content div element in the Card root element or within any Card inner elements.
tagHelper
controller.cs
@section ControlsSection {             
        
        <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 class="e-card-content">
                Camp Randall Stadium is an outdoor stadium in Madison, Wisconsin, located on the University of Wisconsin–Madison campus. It has been the home of Wisconsin Badgers football since 1895, with a fully functioning stadium since 1917.
            </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();
        }
    }
}