We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom card header css for each card on page

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?


3 Replies 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team October 16, 2022 10:56 PM

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

Marked as answer

MP Michal Poterek October 17, 2022 01:35 AM

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



VJ Vinitha Jeyakumar Syncfusion Team October 17, 2022 11:53 PM

Hi Michal,


We are glad to assist you.

Regards,
Vinitha

Loader.
Live Chat Icon For mobile
Up arrow icon