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!
P-card vs card class
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 130
- Joined: 17 Dec 2021, 09:33
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
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
-
- Posts: 130
- Joined: 17 Dec 2021, 09:33
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.
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.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 16 guests