Page 1 of 1
P-card vs card class
Posted: 25 Jul 2022, 05:42
by 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!
Re: P-card vs card class
Posted: 25 Jul 2022, 13:47
by 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
Re: P-card vs card class
Posted: 26 Jul 2022, 05:09
by 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
Re: P-card vs card class
Posted: 12 Aug 2022, 15:05
by 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.