Card

Card is a container for text, photos, and actions in the context of a single topic.

Basic Card

Basic Card is the one that contains a title, a descriptive text.

You can create your basic card using classcard-container.
Inside card container you can use class card-head for title and card-content for description.

Title

This is demo text, You can add whatever you want. You can add different kind of content here.

Action Card

Action card is similar to basic card but it has some Action to do.

You can create your action card using classcard-action inside the card-container.

Title

This is demo text, You can add whatever you want. You can add different kind of content here.

Product Card

Product card has two variation by default horizontal card and vertical card.

You can create your Product card using classpd-card-container for the product container.

Inside container you can use different classes for image, title, description, price, and buttons. pd-img-wrapper. pd-content inside this content you can use pd-size pd-card-action and many more.

Classic Utility Jacket

Style, Modern, new-season.

$200

$350

30% off

Vertical Product Card

Product card has two variationd by default horizontal card and vertical card.

You can create your vertical Product card using classvertical after the pd-card-container.
To make image vertical you can class vertical-img for image wrapper and for image vertical-card-img.

You can also add badge using class badge .

Classic Utility Jacket

Style, Modern, new-season.

$200

$350

30% off

Overlay Text Product Card

You can add class overlay-text to create overlay text over the vertical product card.

Classic Utility Jacket

Style, Modern, new-season.

$200

$350

30% off

SOLD OUT