Vue3 Card is a flexible container component.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.
<h3 id="setup">Setup</h3>
Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import Card from 'primevue/card';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Card provides header, title, subtitle, content and footer as the named templates to place content.
<pre><code class="lang-html">&lt;Card&gt;
 &lt;template #header&gt;
 &lt;img alt="user header" src="demo/images/usercard.png"&gt;
 &lt;/template&gt;
 &lt;template #title&gt;
 Advanced Card
 &lt;/template&gt;
 &lt;template #content&gt;
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
 quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
 &lt;/template&gt;
 &lt;template #footer&gt;
 &lt;Button icon="pi pi-check" label="Save" /&gt;
 &lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt;
 &lt;/template&gt;
&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/primevue/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/card">Card</a> showcase for demos and documentation.

Vue3 Card is a flexible container component.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import Card from 'primevue/card';
```

### Getting Started

Card provides **header**, **title**, **subtitle**, **content** and **footer** as the named templates to place content.

```html
<Card>
 <template #header>
 <img alt="user header" src="demo/images/usercard.png">
 </template>
 <template #title>
 Advanced Card
 </template>
 <template #content>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
 quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
 </template>
 <template #footer>
 <Button icon="pi pi-check" label="Save" />
 <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
 </template>
</Card>
```

### Theming

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

### Resources

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