Card

CardCard is a flexible container component.

Documentation

Import

import {CardModule} from 'primeng/card';
 

Getting Started

Card is defined with p-card element.

<p-card>
    Content
</p-card>
 

Header

Header text of the card is provided using the header property, optionally subheader property is available for additional information about the card.

<p-card header="header">
    Content
</p-card>
 

Header and Footer Content

Header and Footers sections can be customized using p-header and p-footer components.

<p-card>
    <p-header>
        Header content here
    </p-header>
    Body Content
    <p-footer>
        Footer content here
    </p-footer>
</p-card>
 

Properties

Styling

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

Dependencies

None.

Source

View on GitHub

<p-card header="Simple Card" [style]="{width: '360px'}">
    <div>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!</div>
</p-card>
<br>
<br>
<p-card header="Advanced Card" subheader="Subheader" [style]="{width: '360px'}" styleClass="ui-card-shadow">
    <p-header>
        <img src="Card" src="assets/showcase/images/usercard.png">
    </p-header>
    <div>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!</div>
    <p-footer>
        <button pButton type="button" label="Save" icon="pi pi-check" style="margin-right: .25em"></button>
        <button pButton type="button" label="Cancel" icon="pi pi-times" class="ui-button-secondary"></button>
    </p-footer>
</p-card>