how to add vertical colored line to left corner or horizontal top corner ?

[Tümer]

Hi,

How can i add vertical colored line to left corner or horizontal top corner in card ? I've attached an example.

Regards,
Tümer

Attachment: Cardview_a9db4215.rar

[Ravikumar Venkatesan]

Hi Tümer, 

Greetings from Syncfusion support. 

We have validated your requirement “how to add a vertical colored line to left corner or horizontal top corner?” at our end and achieved it by setting up the border-left style to the card element as shown below. For the same, we have prepared a sample which can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163596/ze/ej2-core-card-customization161772372 

[HomeController.cs] 

        public IActionResult Index() 

        { 

            ViewBag.datas = GetCardsData(); 

            return View(); 

        } 

 

        public List<CardData> GetCardsData() 

        { 

            List<CardData> appData = new List<CardData>(); 

            appData.Add(new CardData{ Title = "Explosion of Betelgeuse Star", Assignee = "Assignee one", Avatar = "A1", Color = "#33ccc9"}); 

            appData.Add(new CardData{ Title = "Thule Air Crash Report", Assignee = "Assignee two", Avatar = "A2", Color = "#ffd600"}); 

            appData.Add(new CardData{ Title = "Blue Moon Eclipse", Assignee = "Assignee three", Avatar = "A3", Color = "#cc0000"}); 

            appData.Add(new CardData{ Title = "Meteor Showers in 2018", Assignee = "Assignee four", Avatar = "A4", Color = "#990099"}); 

            appData.Add(new CardData{ Title = "Milky Way as Melting pot", Assignee = "Assignee five", Avatar = "A5", Color = "#66cc33"}); 

            return appData; 

        } 

[Index.cshtml] 

<div class="e-container-element"> 

    @for (int i = 0; i < ViewBag.datas.Count; i++) 

    { 

        <div class="e-card" style="border-left: @("3px solid" + ViewBag.datas[i].Color)"> 

            <div class='e-card-header'> 

                <div class='e-card-header-caption'> 

                    <div class='e-card-header-title e-tooltip-text'>@ViewBag.datas[i].Title</div> 

                </div> 

            </div> 

            <div class='e-card-content e-tooltip-text'> 

                <div class='e-text'>@ViewBag.datas[i].Summary</div> 

            </div> 

            <div class='e-card-custom-footer'> 

                <div class='e-card-assignee'> @ViewBag.datas[i].Assignee</div> 

                <div class="e-card-avatar"> @ViewBag.datas[i].Avatar</div> 

            </div> 

        </div> 

    } 

</div> 

Output: 

 

Kindly try the above share sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan