Card

Card are used to show user related data collectively, like product details, social media post etc..

E-commerce Card

E-commerce card are flash card to show brief product details. Card functionality comes with just to add card to wrapper container and you are good to go. If you want to specifically E-commerce card then add ecomm. Copy below code and put your desired text and image and you will get E-commerce card.

Impos Decor

Vintage artifacts vase

$100

$80

E-commerce Card with Shadow

To get shadow effect on the card, add shadow class to card container.

Impos Decor

Vintage artifacts vase

$100

$80

E-commerce Card with Badge

This library provides badge for E-commerce card. There are 2 type of badge, one is standard one and another one is highlighted in red color. You will get badge by adding badge container to card container and provide badge class to badge container and place any where on the card by adding top, left, bottom, right to badge container. If you want badge to be highlighted then add highlight class. You can add multiple badge to an E-commerce card if you want. For better understanding view code snippet.

-20% 4.4 | 123

Impos Decor

Vintage artifacts vase

$100

$80

E-commerce Card with Ribbon

You will get ribbon to an E-commerce card by providing ribbon class to card container. With providing ribbon class, you need to provide ribbon content. You can do that by adding an attribute ribbon-content and provide desired content. For better understanding view code snippet.

Impos Decor

Vintage artifacts vase

$100

$80

Card with Text Overlay

Get card with text overlay by adding overlay container to card container. You can set any overlay text.

Impos Decor

Vintage artifacts vase

$100

$80

out of stock

Simple Text Card

Simple text card can be achieved by providing text class along with card class to card container.

Title

In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as

Text Card with Dismiss

If you want card with dismiss functionality, you can get that too. Just add any tag/button/icon with dismiss class to card container. You don't need to write any javascript code to get dismiss functionality, just paste html structure and link this component library stylesheet. Isn't it simple.