Source: https://primereact.org/card/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Card

Card is a flexible container component.

Import#

import { Card } from 'primereact/card';

Copy

Basic#

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

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!

<Card title="Simple Card">
    <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>

Copy

Advanced#

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

Card

Advanced Card

Card subtitle

SaveCancel

<Card title="Advanced Card" subTitle="Card 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>

Copy

Accessibility#

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>

Copy

Keyboard Support

Component does not include any interactive elements.

Import
Basic
Advanced
Accessibility

PrimeReact 10.9.7 by PrimeTek