Angular Card

Angular Card is a flexible container component.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {CardModule} from 'primeng/card';

Getting Started

Card is defined with p-card element.

<p-card>
    Content
</p-card>

Header

Header text of the card is provided using the header property, optionally subheader property is available for additional information about the card.

<p-card header="header">
    Content
</p-card>

Header and Footer Content

Header and Footers sections can be customized using header and footer templates.

<p-card>
    <ng-template pTemplate="header">
        Header content here
    </ng-template>
    Body Content
    <ng-template pTemplate="footer">
        Footer content here
    </ng-template>
</p-card>

Theming

Accordion supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Card showcase for demos and documentation.