Cards not rendering properly on razor page

[Vakho]

Hello,

I just copied some code for cards from this page:

https://docs.telerik.com/aspnet-core/knowledge-base/cards#styles

But the buttons on the cards, and the styles don't seem to be rendering properly. Are the cards not supported on the razor pages? I only see them in the main documentation page, not the razor docs page. Or am I missing something?

I attached an image showing what cards look like for me.

P.S: I have nothing on the page except for the code for cards:

@page
@model IndexModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
    ViewData["Title"] = "Home page";
}
<! -- ########## Pasted code for cards here ########## -->

 

[Stoyan]

Hi Vakho,

The reported issue occurs because as of R1 2022 all our product suites use a new unified rendering that enables semantic configuration of the classes of an element in order to apply styling.

I recommend our Appearance article for more information of the available configuration options.

I have applied 2 of these classes to the sample below to showcase the needed configuration:

<div class="k-card k-state-info" style="width: 300px;">
    <div class="k-card-body">
        <h5 class="k-card-title">Card Title Info</h5>
        <h6 class="k-card-subtitle">Card Subtitle</h6>
        <p>Some quick example text to build on the card title and make up the bulk of the card content.</p>
    </div>
    <div class="k-card-actions">
        <span class="k-button k-button-md k-rounded-md k-button-solid-primary k-button-solid-md">Action 1</span>
        <span class="k-button k-button-md k-button-flat k-button-flat-primary">Action 2</span>
    </div>
</div>

You can review the updated rendering of the Cards' buttons in action in the Card Demo.

Finally, I will fix the outdated Knowledge Base article. As a token of gratitude for bringing our attention to it I have updated your Telerik points.

Regards,
Stoyan
Progress Telerik