Custom card header css for each card on page

Question

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 · Accepted Answer

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 · Answer

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

Vinitha Jeyakumar · Answer

Hi Michal,We are glad to assist you.Regards,Vinitha