Custom card header css for each card on page

[Michal Poterek]

I have a component which has a card as parent and few cards nested in the parent. I would like to apply different css settings to each card (I want smaller font size for the header of those nested cards and large font for the parent card). I tried with @attributed but I got an error that this component doesn't support style. 

I tried creating a css switch 

.e-card.parent .e-card-header.parent .e-card-header-caption.parent .e-card-header-title.parent{}

 and applying it to the card CssClass but no luck either. 

Can you help?

[Vinothkumar Yuvaraj]

Hi Michal Poterek,

We have analyzed your reported query. In the below sample, we have created a nested SfCard component and added a custom class name using the CSSClass property. Please find the below code and sample for your reference.

Index.razor

    .e-card.parent .e-card-header .e-card-header-caption .e-card-header-title{

        font-size:20px;

    }

    .e-card.child-one .e-card-header .e-card-header-caption .e-card-header-title{

        font-size:16px;

    }

     .e-card.child-two .e-card-header .e-card-header-caption .e-card-header-title{

        font-size:12px;

    }

     .e-card.child-three .e-card-header .e-card-header-caption .e-card-header-title{

        font-size:8px;

    }

Screenshot

Please check the attached sample and let us know if you have any concerns.

Regards,

Vinothkumar

Attachment: 178174_e57fb9fa.zip

[Michal Poterek]

Thank you thank you! CSS is still a mistery to me.

[Vinitha Jeyakumar]

Hi Michal,

We are glad to assist you.

Regards,

Vinitha