Angular Card is a flexible container component.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {CardModule} from 'primeng/card';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Card is defined with p-card element.
<pre><code class="lang-html">&lt;p-card&gt;
 Content
&lt;/p-card&gt;
</code></pre>
<h3 id="header">Header</h3>
Header text of the card is provided using the header property, optionally subheader property is available for additional information about the card.
<pre><code class="lang-html">&lt;p-card header="header"&gt;
 Content
&lt;/p-card&gt;
</code></pre>
<h3 id="header-and-footer-content">Header and Footer Content</h3>
Header and Footers sections can be customized using header and footer templates.
<pre><code class="lang-html">&lt;p-card&gt;
 &lt;ng-template pTemplate="header"&gt;
 Header content here
 &lt;/ng-template&gt;
 Body Content
 &lt;ng-template pTemplate="footer"&gt;
 Footer content here
 &lt;/ng-template&gt;
&lt;/p-card&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Accordion supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/card">Card</a> showcase for demos and documentation.

Angular Card is a flexible container component.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {CardModule} from 'primeng/card';
```

### Getting Started

Card is defined with p-card element.

```html
<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.

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

### Header and Footer Content

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

```html
<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](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Card](https://primefaces.org/primeng/showcase/#/card) showcase for demos and documentation.