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

Right to Left

Dr Nicole Graham
Cardiologist

Office Hours: Mon - Fri 09 AM - 05 PM

Book a Check-up Contact info
Dr John Paterson
Allergist

Earning his M.D. as a allergist in 1980. Since 1981 he practices in this field.

Office Hours
Mon - Fri
09 AM - 05 PM

Dr Michael Smith
Dermatologist

Earning his M.D. as a dermatologist in 1984. Since 1985 he practices in this field.

Office Hours
Mon - Fri
09 AM - 05 PM

Book a check up Contact info

Description

Cards can support Right To Left (RTL) by setting the dir attribute of RadCard to rtl

<telerik:RadCard runat="server" dir="rtl">
</telerik:RadCard>
  • DefaultCS.aspx
  • 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" />
    <div class="demo-container">
        <div class="card-container">
            <telerik:RadCard runat="server" Orientation="Vertical" dir="rtl">
                <telerik:CardImageComponent runat="server" src="../Images/doctor1.jpg"></telerik:CardImageComponent>
                <telerik:CardBodyComponent runat="server">
                    <telerik:CardTitleComponent runat="server" Content="Dr Nicole Graham"></telerik:CardTitleComponent>
                    <telerik:CardSubtitleComponent runat="server" Content="Cardiologist"></telerik:CardSubtitleComponent>
                    <p><strong>Office Hours:</strong> Mon - Fri 09 AM - 05 PM</p>
                </telerik:CardBodyComponent>
                <telerik:CardSeparatorComponent runat="server" TagKey="Span"></telerik:CardSeparatorComponent>
                <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
                    <span class="k-button k-flat k-primary">Book a Check-up</span>
                    <telerik:CardSeparatorComponent runat="server" Orientation="Vertical" TagKey="Span"></telerik:CardSeparatorComponent>
                    <span class="k-button k-flat k-primary">Contact info</span>
                </telerik:CardActionsContainerComponent>
            </telerik:RadCard>

            <telerik:RadCard runat="server" Orientation="Horizontal" dir="rtl">
                <div>
                    <telerik:CardHeaderComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Dr John Paterson"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="Allergist"></telerik:CardSubtitleComponent>
                    </telerik:CardHeaderComponent>
                    <telerik:CardImageComponent runat="server" CssClass="image-large" src="../Images/doctor3.jpg"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <p>
                            Earning his M.D. as a allergist in 1980. Since 1981 he practices in this field.
                            <br />
                            <br />
                            <strong>Office Hours</strong><br />
                            Mon - Fri
                            <br />
                            09 AM - 05 PM
                        </p>
                    </telerik:CardBodyComponent>
                </div>
                <telerik:CardSeparatorComponent runat="server" TagKey="Span" Orientation="Vertical"></telerik:CardSeparatorComponent>
                <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical" CardActionsAlignment="Stretched">
                    <span class="k-button k-flat k-primary"><span class="p-icon p-i-calendar"></span></span>
                    <telerik:CardSeparatorComponent runat="server" TagKey="Span"></telerik:CardSeparatorComponent>
                    <span class="k-button k-flat k-primary"><span class="p-icon p-i-zoom"></span></span>
                </telerik:CardActionsContainerComponent>
            </telerik:RadCard>

            <telerik:RadCard runat="server" Orientation="Horizontal" dir="rtl">
                <telerik:CardImageComponent runat="server" src="../Images/doctor2.jpg"></telerik:CardImageComponent>
                <div>
                    <telerik:CardHeaderComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="Dr Michael Smith"></telerik:CardTitleComponent>
                        <telerik:CardSubtitleComponent runat="server" Content="Dermatologist"></telerik:CardSubtitleComponent>
                    </telerik:CardHeaderComponent>
                    <telerik:CardBodyComponent runat="server">
                        <p>
                            Earning his M.D. as a dermatologist in 1984. Since 1985 he practices in this field.
                            <br />
                            <br />
                            <strong>Office Hours</strong><br />
                            Mon - Fri
                            <br />
                            09 AM - 05 PM
                        </p>
                    </telerik:CardBodyComponent>
                    <telerik:CardSeparatorComponent runat="server" TagKey="Span"></telerik:CardSeparatorComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical" CardActionsAlignment="Stretched">
                        <span class="k-button k-flat k-primary">Book a check up</span>
                        <telerik:CardSeparatorComponent runat="server" TagKey="Span"></telerik:CardSeparatorComponent>
                        <span class="k-button k-flat k-primary">Contact info</span>
                    </telerik:CardActionsContainerComponent>
                    <telerik:CardFooterComponent runat="server" CssClass="k-text-center">
                        <a class="k-button k-primary k-flat k-button-icon"><span class="p-icon p-i-email"></span></a>
                        <a class="k-button k-primary k-flat k-button-icon"><span class="p-icon p-i-marker-pin"></span></a>
                        <a class="k-button k-primary k-flat k-button-icon"><span class="p-icon p-i-information"></span></a>
                    </telerik:CardFooterComponent>
                </div>
            </telerik:RadCard>
        </div>
    </div>


    </form>
</body>
</html>

Support & Learning Resources

Find Assistance