New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Layout

undefined
Full Coverage
5% of car cost
View Details Get a Quote
undefined
Collision, fire and theft
4% of car cost
View Details Get a Quote
undefined
Collision only
2% of car cost
View Details Get a Quote
undefined
Young driver
6% of car cost
View Details Get a Quote
undefined
Full Coverage
5% of car cost
View Details Get a Quote
undefined
Collision, fire and theft
4% of car cost
View Details Get a Quote
undefined
Collision only
2% of car cost
View Details Get a Quote
  • Demo Configurator

Card Container Type

Description

Cards have three additional classes that can be used for laying out series of cards:

  • Card List - rendering cards detached from one another in a column through the `.k-card-list` class
  • Card Group - rendering cards attached to one another on a single row through the `.k-card-group` class
  • Card Deck - rendering cards detached from one another on a single row through the `.k-card-deck` class

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js"></script>
    <div class="demo-container">
        <div class="k-card-deck-scrollwrap">
            <button class="k-button k-button-icon k-button-scroll">
                <span class="p-icon p-i-arrow-chevron-left"></span>
            </button>
            <div class="k-card-deck cards-container">
                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_full.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Full Coverage"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="5% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Full Coverage">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Full Coverage">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>

                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_collision.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Collision, fire and theft"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="4% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Collision, fire and theft">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Collision, fire and theft">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>

                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_collision_only.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Collision only"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="2% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Collision only">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Collision only">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>

                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_young.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Young driver"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="6% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Young driver">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Young driver">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>

                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_full.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Full Coverage"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="5% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Full Coverage">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Full Coverage">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>

                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_collision.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Collision, fire and theft"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="4% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Collision, fire and theft">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Collision, fire and theft">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>

                <telerik:RadCard runat="server">
                    <telerik:CardImageComponent runat="server" src="https://demos.telerik.com/kendo-ui/content/chat/quote_collision_only.jpeg" alt="undefined"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Collision only"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="2% of car cost"></telerik:CardSubtitleComponent>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical">
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="View details of Collision only">View Details</span>
                        </telerik:CardActionComponent>
                        <telerik:CardActionComponent runat="server">
                            <span class="k-button k-flat k-primary" data-value="Get a quote for Collision only">Get a Quote</span>
                        </telerik:CardActionComponent>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>
            </div>
            <button class="k-button k-button-icon k-button-scroll">
                <span class="p-icon p-i-arrow-chevron-right"></span>
            </button>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>

                <div class="box">
                    <div class="box-col">
                        <h4>Card Container Type</h4>
                        <div>
                            <input type="radio" name="container-type" id="deck" value="deck" class="k-radio" checked="checked">
                            <label class="k-radio-label" for="deck">Deck</label>

                            <input type="radio" name="container-type" id="group" value="group" class="k-radio">
                            <label class="k-radio-label" for="group">Group</label>

                            <input type="radio" name="container-type" id="list" value="list" class="k-radio">
                            <label class="k-radio-label" for="list">List</label>
                        </div>
                    </div>
                </div>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance