All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
The ultimate guide for all of you beach lovers. Planning your 2020 vacation or just longing to tuck your toes in the sand, feel the sea breeze and gather as much vitamin D as possible? Just continue reading to find out our favorite beach spots for 2020.
The tulip season is just around the corner. If you still haven't decided on your spring destination, we have a suggestion- Holland, a.k.a the "flower shop of the world"!
Card Orientation allows the content to be arranged horizontally or vertically by setting the Orientation property of the RadCard to Vertical or Horizontal.
RadCard
<%@ 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" /> <div class="demo-container"> <div class="card-container"> <telerik:RadCard runat="server" Orientation="Horizontal"> <telerik:CardImageComponent runat="server" src="../Images/shells.jpg"></telerik:CardImageComponent> <div class="k-vbox k-column"> <telerik:CardHeaderComponent runat="server"> <telerik:CardTitleComponent runat="server" Content="The Ultimate Beach Guide"></telerik:CardTitleComponent> <telerik:CardSubtitleComponent runat="server" Content="Life is indeed better at the beach"></telerik:CardSubtitleComponent> </telerik:CardHeaderComponent> <telerik:CardBodyComponent runat="server"> <p>The ultimate guide for all of you beach lovers. Planning your 2020 vacation or just longing to tuck your toes in the sand, feel the sea breeze and gather as much vitamin D as possible? Just continue reading to find out our favorite beach spots for 2020.</p> </telerik:CardBodyComponent> <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent> <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Vertical"> <span class="k-button k-flat k-primary">Read more</span> <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent> <span class="k-button k-flat k-primary">Save for later</span> </telerik:CardActionsContainerComponent> <telerik:CardFooterComponent runat="server"> <span class="footer-item"><span class="p-icon p-i-heart-outline"></span>58</span> <span class="footer-item"><span class="p-icon p-i-comment"></span>7</span> <span class="footer-item"><span class="p-icon p-i-clock"></span>15 m</span> </telerik:CardFooterComponent> </div> </telerik:RadCard> <telerik:RadCard runat="server" Orientation="Vertical"> <telerik:CardImageComponent runat="server" src="../Images/tulips.jpg"></telerik:CardImageComponent> <telerik:CardBodyComponent runat="server"> <telerik:CardTitleComponent Content="Tulip Time" runat="server"></telerik:CardTitleComponent> <p>The tulip season is just around the corner. If you still haven't decided on your spring destination, we have a suggestion- Holland, a.k.a the "flower shop of the world"!</p> </telerik:CardBodyComponent> <telerik:CardSeparatorComponent runat="server"></telerik:CardSeparatorComponent> <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched"> <span class="k-button k-flat k-primary">Read more</span> <telerik:CardSeparatorComponent runat="server" Orientation="Vertical"> </telerik:CardSeparatorComponent> <span class="k-button k-flat k-primary">Save for later</span> </telerik:CardActionsContainerComponent> <telerik:CardFooterComponent runat="server"> <span class="footer-item"><span class="p-icon p-i-heart-outline"></span>32</span> <span class="footer-item"><span class="p-icon p-i-comment"></span>2</span> <span class="footer-item"><span class="p-icon p-i-clock"></span>10 m</span> </telerik:CardFooterComponent> </telerik:RadCard> </div> </div> </form> </body> </html>