Card Card is a flexible container component.

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!

Import


import {CardModule} from 'primeng/card';

Getting Started

Card is defined with p-card element.


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

Title

Title text of the card is provided using the title property, optionally subtitle property is available for additional information about the card.


<p-card title="Title">
    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

Name	Type	Default	Description
title	string	null	Title of the card.
subtitle	string	null	Secondary title of the card.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.

Styling

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

Name	Element
ui-card	Container element.
ui-card-title	Title element.
ui-card-subtitle	Subtitle element.
ui-card-content	Content of the card.
ui-card-footer	Footer of the card.

Dependencies

None.

View on GitHub


<p-card title="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 title="Advanced Card" subtitle="Subtitle" [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="fa-check"></button>
        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary"></button>
    </p-footer>
</p-card>