Replace Card ThemeColor

Updated on May 27, 2026

Environment

Product

Card for Blazor

Description

This KB answers the following questions:

• How to replace the ThemeColor parameter of TelerikCard that was removed in version 14.0.0?
• What to use instead of the deprecated Card ThemeColor parameter?

Solution

1. Set the Card Class parameter to a value of your choice.
2. Define border-color, background-color and text color styles for the custom class that use the color variables for the desired theme color.

Apply ThemeColor-like styles to Telerik Blazor Cards

<div style="display: flex; gap: 1em; flex-wrap: wrap;">
    @foreach (string themeColor in CardThemeColors)
    {
        <TelerikCard Width="120px" Class="@($"card-theme-color card-{themeColor}")">
            <CardHeader>
                <CardTitle>@themeColor</CardTitle>
                <CardSubTitle>SubTitle</CardSubTitle>
            </CardHeader>
            <CardBody>
                <p>Lorem ipsum dolor sit amet.</p>
                <CardSeparator></CardSeparator>
                <p>Consectetur adipiscing elit.</p>
            </CardBody>
            <CardFooter>
                <p>Footer</p>
            </CardFooter>
        </TelerikCard>
    }
</div>

<style>
    @foreach (string themeColor in CardThemeColors)
    {
        @($".card-{themeColor}" + "{" +
            $"border-color: var(--kendo-color-{themeColor});" +
            $"background-color: var(--kendo-color-{themeColor}-subtle);" +
            $"color: var(--kendo-color-{themeColor}-on-subtle);" +
        "}")
    }

    .card-theme-color .k-card-header,
    .card-theme-color .k-card-subtitle,
    .card-theme-color .k-card-footer {
        color: inherit;
    }
</style>

@code {
    private readonly string[] CardThemeColors = new string[]
    {
        ThemeConstants.Button.ThemeColor.Base,
        ThemeConstants.Button.ThemeColor.Error,
        ThemeConstants.Button.ThemeColor.Info,
        ThemeConstants.Button.ThemeColor.Primary,
        ThemeConstants.Button.ThemeColor.Success,
        ThemeConstants.Button.ThemeColor.Warning,
        ThemeConstants.Button.ThemeColor.Inverse
    };
}

Note

Using theme colors for Cards is not a recommended best practice from UI design perspective.

See Also

• Card Overview