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="https://primefaces.org/cdn/primevue/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. |
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require to use one of the landmark roles like region, you may use the role property.
<Card role="region">
Content
</Card>
Component does not include any interactive elements.
None.