P-card vs card class

[chris4282]

Hi,

I'm using the Avalon template and noticed most of it is coded with divs with the class card added. Why does the template not leverage "p-card"? Additionally, when I go to add the code for P-Card from the docs, it has 0 styles associated with it. Shouldn't the template render the correct styles out of the box?

Thanks!

[cetincakiroglu]

Hi,

It's because of the design approach in templates. "p-card" is a PrimeNG component and it comes with generic styles for rendering card components, you may need to use "host" & "ng-deep" selectors together to override styles. However, "card" is just a class in templates, users can override easily. Generic styles of "card" comes from PrimeNG Theme Designer.

In our roadmap, we're planning to update themes to v14, this update includes a minimum custom CSS approach and templates will be styled by PrimeFlex classes instead of custom CSS. It'll be easier to work with.

Regards

[chris4282]

Hi,

Thanks for the reply. So is the recommendation to continue to use divs with the class card instead of leveraging p-card when working in Avalon?

Thanks

[cetincakiroglu]

Hi,

It depends on your choice just like p-button and <button class="p-button"> usage.
You can use p-card component with input props such as header, title, subtitle, content, and footer. p-card also takes advantage of templating options of the component.