React Card is a flexible container component.
<h3 id="setup">Setup</h3>
Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import { Card } from 'primereact/card';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Card is used as a container.
<pre><code class="lang-html">&lt;Card&gt;
 Content
&lt;/Card&gt;
</code></pre>
<h3 id="title">Title</h3>
Title text of the card is provided using the title property whereas subTitle property is available for additional information about the card. Both of these properties accept JSX as well.
<pre><code class="lang-html">&lt;Card title="Title" subTitle="SubTitle"&gt;
 Content
&lt;/Card&gt;
</code></pre>
<h3 id="header-and-footer">Header and Footer</h3>
Header and Footer sections are defined using the properties of the same name.
<pre><code class="lang-html">const header = &lt;img alt="Card" src='showcase/demo/images/usercard.png'/&gt;;
const footer = &lt;span&gt;
 &lt;Button label="Save" icon="pi pi-check" style={{marginRight: '.25em'}}/&gt;
 &lt;Button label="Cancel" icon="pi pi-times" className="p-button-secondary"/&gt;
&lt;/span&gt;;

&lt;Card footer={footer} header={header}&gt;
 Content
&lt;/Card&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Card supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/card">Card</a> showcase for demos and documentation.

React Card is a flexible container component.

### Setup

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

### Import

```js
import { Card } from 'primereact/card';
``` 

### Getting Started

Card is used as a container.

```html
<Card>
 Content
</Card>
```

### Title

Title text of the card is provided using the **title** property whereas subTitle property is available for additional information about the card. Both of these properties accept JSX as well.

```html
<Card title="Title" subTitle="SubTitle">
 Content
</Card>
```

### Header and Footer

Header and Footer sections are defined using the properties of the same name.

```html
const header = <img alt="Card" src='showcase/demo/images/usercard.png'/>;
const footer = 
 <Button label="Save" icon="pi pi-check" style={{marginRight: '.25em'}}/>
 <Button label="Cancel" icon="pi pi-times" className="p-button-secondary"/>
;

<Card footer={footer} header={header}>
 Content
</Card>
 ```

### Theming

Card supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

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