Card

Import via Module

import { Card } from 'primereact/card';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/card/card.min.js"></script>
 

Getting Started

Card is used as a container.

<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.

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

Header and Footer

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

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

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

Properties

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.