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

Orientation

Orientation allows the content to be arranged horizontally or vertically.

Card Orientation

Card orientation will arrange the content (Header, Body, Footer, etc) of the Card.

<telerik:RadCard ID="RadCard1" runat="server" Orientation="Horizontal">
    <telerik:CardHeaderComponent runat="server">Header</telerik:CardHeaderComponent>
    <telerik:CardBodyComponent runat="server">Body</telerik:CardBodyComponent>
    <telerik:CardFooterComponent runat="server">Footer</telerik:CardFooterComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 2</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

Actions Orientation

Actions orientation will arrange the actions (CardActionComponents)

<telerik:RadCard ID="RadCard1" runat="server" Orientation="Horizontal">
    <telerik:CardHeaderComponent runat="server">Header</telerik:CardHeaderComponent>
    <telerik:CardBodyComponent runat="server">Body</telerik:CardBodyComponent>
    <telerik:CardFooterComponent runat="server">Footer</telerik:CardFooterComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched" Orientation="Vertical">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-secondary">Action 2</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

Actions alignment

  • Start
  • Centered
  • End
  • Stretched
  • None
<telerik:RadCard ID="RadCard1" runat="server">
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Centered">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>
<telerik:RadCard ID="RadCard1" runat="server">
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Centered">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>
<telerik:RadCard ID="RadCard1" runat="server">
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Centered">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>
<telerik:RadCard ID="RadCard1" runat="server">
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="None">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>
<telerik:RadCard ID="RadCard1" runat="server">
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="None">
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
        <telerik:CardActionComponent runat="server">
            <span class="k-button k-flat k-primary">Action 1</span>
        </telerik:CardActionComponent>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>
In this article