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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Create CardView ?

Thread ID:

Created:

Updated:

Platform:

Replies:

141602 Dec 19,2018 07:42 PM UTC Dec 21,2018 10:31 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: Card
Nezar Alazzabi
Asked On December 19, 2018 07:42 PM UTC

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?

Deepa Loganathan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon