Card
Card is a flexible container component. 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 pt:role property.
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!
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!
Usage
<style>
p {
line-height: 1.5;
margin: 0;
}
</style>
<p:card style="width: 25rem; margin-bottom: 2em" pt:role="region">
<f:facet name="title">
Simple Card
</f:facet>
<p>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>
</p:card>
<p:card style="width: 25em" pt:role="region">
<f:facet name="header">
<img alt="user header" src="../../resources/demo/images/usercard.png"/>
</f:facet>
<f:facet name="title">
Advanced Card
</f:facet>
<f:facet name="subtitle">
Card subtitle
</f:facet>
<p>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>
<f:facet name="footer">
<p:commandButton icon="pi pi-check" value="Save"/>
<p:commandButton icon="pi pi-times" value="Cancel" styleClass="ui-button-secondary" style="margin-left: .5em"/>
</f:facet>
</p:card>