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

    Action Buttons

    African Safari

    Africa provides some of the most epic wildlife diversity on the planet. Not many vacations involve sleeping in close quarters with lions, leopards, elephants, buffaloes, rhinos, giraffes and hippos.

    Book now Check rates
    India
    Khajuraho Varanasi Golden Triangle Tour

    On your visit to India, enjoy the majesty of palaces and opulent architecture. Along your journey, don't miss the Gateway of India, built to commemorate the power of the British Empire. Visit the great mosque of Old Delhi, India's largest mosque, with a courtyard large enough to hold a mind-blowing 25,000 devotees. Of course, no trip to India would be complete without taking the time to visit one of the Seven Wonders of the World, the Taj Mahal.

    • Demo Configurator

    Actions Orientation

    Actions Alignment

    Description

    This example demonstrates action buttons, their orientation and alignment.

    Actions can be:

    • oriented vertically and horizontally by setting the Orientation property of the CardActionsContainerComponent to Vertical or Horizontal.
    • aligned to the start, end, center of the actions container or they can be stretched by setting the CardActionsAlignment property of the CardActionsContainerComponent to either Start, End, Center or Stretched

    • DefaultVB.aspx
    • scripts.js
    • styles.css
    <%@ Page Language="vb" 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="card-container">
                <telerik:RadCard runat="server" Orientation="Vertical">
                    <telerik:CardImageComponent runat="server" src="../Images/south-africa.jpg"></telerik:CardImageComponent>
                    <telerik:CardBodyComponent runat="server">
                        <telerik:CardTitleComponent runat="server" Content="African Safari"></telerik:CardTitleComponent>
                        <p>Africa provides some of the most epic wildlife diversity on the planet. Not many vacations involve sleeping in close quarters with lions, leopards, elephants, buffaloes, rhinos, giraffes and hippos.</p>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Vertical">
                        <span class="k-button k-flat k-primary">Book now</span>
                        <span class="k-button k-flat k-primary">Check rates</span>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>
                <telerik:RadCard runat="server" Orientation="Horizontal">
                    <div>
                        <telerik:CardHeaderComponent runat="server">
                            <telerik:CardTitleComponent runat="server" Content="India"></telerik:CardTitleComponent>
                            <telerik:CardSubtitleComponent runat="server" Content="Khajuraho Varanasi Golden Triangle Tour"></telerik:CardSubtitleComponent>
                        </telerik:CardHeaderComponent>
                        <telerik:CardBodyComponent runat="server">
                            <p>On your visit to India, enjoy the majesty of palaces and opulent architecture. Along your journey, don't miss the Gateway of India, built to commemorate the power of the British Empire. Visit the great mosque of Old Delhi, India's largest mosque, with a courtyard large enough to hold a mind-blowing 25,000 devotees. Of course, no trip to India would be complete without taking the time to visit one of the Seven Wonders of the World, the Taj Mahal.</p>
                        </telerik:CardBodyComponent>
                    </div>
                    <telerik:CardSeparatorComponent runat="server" Orientation="Vertical" TagKey="Span"></telerik:CardSeparatorComponent>
                    <telerik:CardActionsContainerComponent runat="server" Orientation="Vertical" CardActionsAlignment="Stretched">
                        <span class="k-button k-flat k-primary"><span class="p-icon p-i-zoom"></span></span>
                        <span class="k-button k-flat k-primary"><span class="p-icon p-i-heart-outline"></span></span>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>
            </div>
        </div>
        <qsf:ConfiguratorPanel runat="server">
            <Views>
                <qsf:View>
                    <div class="box">
                        <div class="box-col">
                            <h4>Actions Orientation</h4>
                            <div>
                                <input type="radio" name="orientation" id="horizontal" value="horizontal" class="k-radio" checked="checked">
                                <label class="k-radio-label" for="horizontal">Horizontal</label>
     
                                <input type="radio" name="orientation" id="vertical" value="vertical" class="k-radio" checked>
                                <label class="k-radio-label" for="vertical">Vertical</label>
                            </div>
                        </div>
                        <div class="box-col">
                            <h4>Actions Alignment</h4>
                            <div>
                                <input type="radio" name="alignment" id="start" value="start" class="k-radio" checked="checked">
                                <label class="k-radio-label" for="start">Start</label>
     
                                <input type="radio" name="alignment" id="end" value="end" class="k-radio">
                                <label class="k-radio-label" for="end">End</label>
     
                                <input type="radio" name="alignment" id="center" value="center" class="k-radio">
                                <label class="k-radio-label" for="center">Center</label>
     
                                <input type="radio" name="alignment" id="streched" value="stretched" class="k-radio" checked>
                                <label class="k-radio-label" for="streched">Stretched</label>
                            </div>
                        </div>
                    </div>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance