Styles

Updated on Aug 24, 2026

Cards provide predefined state that you can use to change the Card appearance. To do that, change the CardState property to one of the following states:

• Default
• Primary
• Info
• Success
• Warning
• Error

ASP.NET

<telerik:RadCard ID="RadCard1" runat="server" CardState="Default" Width="300px">
    <telerik:CardTitleComponent runat="server">
        Card Title Default
    </telerik:CardTitleComponent>
    <telerik:CardSubtitleComponent runat="server">
        Card Subtitle
    </telerik:CardSubtitleComponent>
    <telerik:CardBodyComponent runat="server">
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </telerik:CardBodyComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <span class="k-button k-flat k-default">Action 1</span>
        <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
        </telerik:CardSeparatorComponent>
        <span class="k-button k-flat k-default">Action 2</span>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

<telerik:RadCard ID="RadCard2" runat="server" CardState="Primary" Width="300px">
    <telerik:CardTitleComponent runat="server">
        Card Title Primary
    </telerik:CardTitleComponent>
    <telerik:CardSubtitleComponent runat="server">
        Card Subtitle
    </telerik:CardSubtitleComponent>
    <telerik:CardBodyComponent runat="server">
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </telerik:CardBodyComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <span class="k-button k-flat k-primary">Action 1</span>
        <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
        </telerik:CardSeparatorComponent>
        <span class="k-button k-flat k-primary">Action 2</span>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

<telerik:RadCard ID="RadCard3" runat="server" CardState="Info" Width="300px">
    <telerik:CardTitleComponent runat="server">
        Card Title Info
    </telerik:CardTitleComponent>
    <telerik:CardSubtitleComponent runat="server">
        Card Subtitle
    </telerik:CardSubtitleComponent>
    <telerik:CardBodyComponent runat="server">
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </telerik:CardBodyComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <span class="k-button k-flat k-info">Action 1</span>
        <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
        </telerik:CardSeparatorComponent>
        <span class="k-button k-flat k-info">Action 2</span>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

<telerik:RadCard ID="RadCard4" runat="server" CardState="Success" Width="300px">
    <telerik:CardTitleComponent runat="server">
        Card Title Success
    </telerik:CardTitleComponent>
    <telerik:CardSubtitleComponent runat="server">
        Card Subtitle
    </telerik:CardSubtitleComponent>
    <telerik:CardBodyComponent runat="server">
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </telerik:CardBodyComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <span class="k-button k-flat k-success">Action 1</span>
        <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
        </telerik:CardSeparatorComponent>
        <span class="k-button k-flat k-success">Action 2</span>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

<telerik:RadCard ID="RadCard5" runat="server" CardState="Warning" Width="300px">
    <telerik:CardTitleComponent runat="server">
        Card Title Warning
    </telerik:CardTitleComponent>
    <telerik:CardSubtitleComponent runat="server">
        Card Subtitle
    </telerik:CardSubtitleComponent>
    <telerik:CardBodyComponent runat="server">
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </telerik:CardBodyComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <span class="k-button k-flat k-warning">Action 1</span>
        <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
        </telerik:CardSeparatorComponent>
        <span class="k-button k-flat k-warning">Action 2</span>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>

<telerik:RadCard ID="RadCard6" runat="server" CardState="Error" Width="300px">
    <telerik:CardTitleComponent runat="server">
        Card Title Error
    </telerik:CardTitleComponent>
    <telerik:CardSubtitleComponent runat="server">
        Card Subtitle
    </telerik:CardSubtitleComponent>
    <telerik:CardBodyComponent runat="server">
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </telerik:CardBodyComponent>
    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
        <span class="k-button k-flat k-error">Action 1</span>
        <telerik:CardSeparatorComponent runat="server" Orientation="Vertical">
        </telerik:CardSeparatorComponent>
        <span class="k-button k-flat k-error">Action 2</span>
    </telerik:CardActionsContainerComponent>
</telerik:RadCard>