How to add :after element to Header Title class based on condition

[John Johnson]

Hi,

how is it possible to add :after element to the header title in SfCard component based on a condition?

My CSS looks like this:

.e-card .e-card-header .e-card-header-caption .e-card-header-title:after {

        color: #d00;

        content: " *";

        position: inherit;

        margin-left: 0px;

        top: 15px;

    }

I have a for cycle in my .razor page, which generates N amount of SfCard components, but I want to apply that pseudo element to the header title only on some of them, based on condition.

Thank you.

[Vinitha Jeyakumar]

Hi John,

Your requirement can be achieved by using the CssClass property of the Card which helps to customize the styles of the required cards.

Code snippet:

<SfCard ID="HugeImage" CssClass="custom">

    <CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />

</SfCard>

<SfCard ID="SecondCard">

    <CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />

</SfCard>

<style>

    .custom.e-card .e-card-header .e-card-header-caption .e-card-header-title:after {

        color: #d00;

        content: " *";

        position: inherit;

        margin-left: 0px;

        top: 15px;

    }

</style>

Regards,

Vinitha