We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to Create CardView ?

How to create CardView in ASP.NET WebForms ? am really lost , i want to display my products like ( Image , Price , and button ) in one card?

1 Reply

DL Deepa Loganathan Syncfusion Team December 21, 2018 10:31 AM UTC

Hi Nezar,  
Thanks for contacting Syncfusion support.  
We understood your requirement to use Card component in Webforms application. Since EJ2 Card is a pure CSS component you can add it to your application just by referring the CSS in your master page layout as given below.  

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" rel="stylesheet" /> 
Please check out the below help page to explore more about the usage of Card component.  
Please find the code block required to display Image, price and a add button inside the Card component.  
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
        .e-card { 
            width: 150px; 
        .label_amount, .amount { 
            display: inline-block; 
            width: 48%; 
        .e-card-actions { 
            display: block; 
    <div class="control-section card-control-section"> 
        <div class="e-card-resize-container"> 
                <div class="row card-layout"> 
                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
                        <div tabindex="0" class="e-card"> 
                            <img class="img-responsive" src="Content/images/Tile_4.png" /> 
                            <div class="e-card-content"> 
                                <div class="label_amount">Price</div> 
                                <div class="amount">$80 </div> 
                                <div class="e-card-actions"> 
                                    <button class="e-card-btn">Add</button> 
Please get back to if you have any further queries.  
Deepa L. 

Live Chat Icon For mobile
Up arrow icon