import Card from 'primevue/card';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/card/card.min.js"></script>
Card provides header, title, subtitle, content and footer as the named templates to place content.
<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>
| Name | Parameters |
|---|---|
| header | - |
| title | - |
| subtitle | - |
| content | - |
| footer | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-card | Container element. |
| p-card-title | Title element. |
| p-card-subtitle | Subtitle element. |
| p-card-content | Content of the card. |
| p-card-footer | Footer of the card. |
None.