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"> 
    <style> 
        .e-card { 
            width: 150px; 
        } 
 
        .label_amount, .amount { 
            display: inline-block; 
            width: 48%; 
        } 
 
        .e-card-actions { 
            display: block; 
            float:right; 
        } 
    </style> 
 
    <div class="control-section card-control-section"> 
        <div class="e-card-resize-container"> 
            <div> 
                <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> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</asp:Content> 
 
 
 
Please get back to if you have any further queries.  
 
Regards,  
Deepa L. 


Loader.
Up arrow icon