What is the best way to add a dropshadow to the Card component?

1 Answer 26 Views
Card
David
Top achievements
Rank 2
Iron
Iron
Veteran
David asked on 04 Apr 2022, 06:52 PM

Something like this. Is it simply to wrap the card in a <div> and use css?

1 Answer, 1 is accepted

Sort by
1
Accepted
Dimo
Telerik team
answered on 07 Apr 2022, 08:45 AM

Hi David,

The "best" way to add Card shadows can depend on your goals and preferences:

  • If you want to style all Cards, then use the "native" Card CSS class. The CSS rule placement will determine if you target all Cards on the page or in the app.
    .k-card {
      box-shadow: 10px 10px 10px red;
    }
  • If you want to target specific Cards, then use a custom CSS class for these Card instances. Using container <div>s will produce the same result, but is probably not necessary.
    <TelerikCard Class="foo" />
    
    <style>
      .foo {
         box-shadow: 10px 10px 10px red;
      }
    </style>

 

I recommend these documentation articles:

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Card
Asked by
David
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Dimo
Telerik team
Share this question
or