Create Mobile Contact layout from ListView in ASP.NET Core ListView control

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
@{

    var template = "<div class='settings'>" +
                    "${if(avatar!=='')}" +
                    "<span class='e-avatar e-avatar-circle'>${avatar}</span>" +
                    "${else}" +
                    "<span class='${pic} e-avatar e-avatar-circle'> </span>" +
                    "${/if}" +
                    "<div id='content'>" +
                    "<div class='name'>${text}</div>" +
                    "<div id='info'>${contact}</div>" +
                    "</div>";
}

    <!-- ListView element -->

    <ejs-listview id="List" dataSource="(IEnumerable<object>)ViewBag.dataSource" sortOrder="Ascending" template="@template" showHeader="true" headerTitle="Contacts">
        <e-listview-fieldsettings  text="Name"></e-listview-fieldsettings>
    </ejs-listview>

 <style>
    #List {
        margin: 0 auto;
        border: 1px solid #ccc;
    }

        #List .e-list-item {
            height: 60px;
            cursor: pointer;
        }

        #List .e-list-header .e-text {
            font-family: sans-serif;
            font-size: 18px;
            line-height: 16px;
        }

        #List #content {
            margin: 0;
        }

        #List .e-list-header {
            background: rgb(2, 120, 215);
            color: white;
        }

        #List #info,
        #List .name {
            font-size: 14px;
            margin: 0 60px;
            line-height: 20px;
        }

        #List .name {
            padding-top: 8px;
            font-weight: 500;
        }

    .pic01 {
        background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
    }

    .pic02 {
        background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
    }

    .pic03 {
        background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
    }

    .pic04 {
        background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
    }

    #List .e-avatar {
        position: absolute;
        margin-top: 8px;
        font-size: 14px;
    }

    #List .e-list-item:nth-child(1) .e-avatar {
        background-color: #039be5;
    }

    #List .e-list-item:nth-child(2) .e-avatar {
        background-color: #e91e63;
    }

    #List .e-list-item:nth-child(6) .e-avatar {
        background-color: #009688;
    }

    #List .e-list-item:nth-child(8) .e-avatar {
        background-color: #0088;
    }
</style>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                text= "Jenifer",
                contact= "(206) 555-985774",
                id= "1",
                avatar= "",
                pic= "pic01"
            });
            listdata.Add(new
            {
                text= "Amenda",
                contact= "(206) 555-3412",
                id= "2",
                avatar= "A",
                pic= ""
            });
            listdata.Add(new
            {

                text= "Isabella",
                contact= "(206) 555-8122",
                id= "4",
                avatar= "",
                pic= "pic02"
            });
            listdata.Add(new
            {
                text= "William ",
                contact= "(206) 555-9482",
                id= "5",
                avatar= "W",
                pic= ""
            });
            listdata.Add(new
            {
                text= "Jacob",
                contact= "(71) 555-4848",
                id= "6",
                avatar= "",
                pic= "pic04"
            });
            listdata.Add(new
            {
                text= "Matthew",
                contact= "(71) 555-7773",
                id= "7",
                avatar= "M",
                pic= ""
            });
            listdata.Add(new
            {
                text= "Oliver",
                contact= "(71) 555-5598",
                id= "8",
                avatar= "",
                pic= "pic03"
            });
            listdata.Add(new
            {
                text= "Charlotte",
                contact= "(206) 555-1189",
                id= "9",
                avatar= "C",
                pic= ""
            });
            ViewBag.dataSource = listdata;
            return View();
        }
    }
}