Card
CCard is a flexible container component.
Basic
A simple Card is created with a title property along with the content as children.
vue
<template>
<CCard>
<template #title>Simple Card</template>
<template #content>
<p>
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!
</p>
</template>
</CCard>
</template>Simple Card
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!
Advanced
Card provides header, title, subtitle, content and footer as the named templates to place content.
vue
<template>
<CCard style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
</template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
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!
</p>
</template>
<template #footer>
<div class="flex gap-4 mt-1">
<CButton label="Cancel" severity="secondary" variant="neutral" class="w-full" />
<CButton label="Save" class="w-full" />
</div>
</template>
</CCard>
</template>