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

  • 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="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