Card

Card is a flexible container component.


import { Card } from 'primereact/card';
         

A simple Card is created with a title property along with the content as children.

Title

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!


<Card title="Title">
    <p className="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>
</Card>
         

Card content can be customized further with subTitle, header and footer properties.

Card
Title
Subtitle

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!


<Card title="Title" subTitle="Subtitle" footer={footer} header={header} className="md:w-25rem">
    <p className="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>
</Card>
         

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

NameElement
p-cardContainer element.
p-card-titleTitle element.
p-card-subtitleSubtitle element.
p-card-contentContent of the card.
p-card-footerFooter of the card.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

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>
         

Keyboard Support

Component does not include any interactive elements.

Visit the API documentation for detailed information about all the properties, events and methods of the component.