Card #
Card is a flexible container component.
import { PCard } from 'pearkit';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. Praesentium, reprehenderit.
<PCard title="Simple Card">
<div className="p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, reprehenderit.</p>
</div>
</PCard>Advanced #
Card content can be customized further with subTitle, header and footer properties.
Advanced CardThis is subtitle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, reprehenderit.
<PCard
header={<HeaderAreaComponent/>}
title="Advanced Card"
subTitle="This is subtitle"
footer={<ButtonComponents/>}
>
<div className="p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, reprehenderit.</p>
</div>
</PCard>Accessibility (Not Ready Yet) #
None
Api #
Here you can see all the working features for the card component.
| Name | Type | Default | Description |
|---|---|---|---|
| header | ReactNode | null | Header of the component. |
| footer | ReactNode | null | Footer of the component. |
| title | string | null | Title of the component. |
| subTitle | string | null | SubTitle of the component. |