Cards

Cards are used to show user related data collectively, like product details.
The card component can contain a variety of content, including a heading, image, content and a footer.There are 7 variants of cards here.

Simple Text Card

Simple Card is the one that contains a title, a descriptive text and footer. To use the simple card add the class name card-text to the wrapped div.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias veniam odio possimus minus, sint officia placeat doloremque explicabo quam officiis.

Vertical Card with Image

This is vertical card with image, card content and footer.
You can copy html part from below code snippet.

  • product image

    Stylish Bags

    Girls White & Pink Bag
    Rs.3899 Rs.2999 10% Off
  • product image

    Stylish Bags

    Girls White & Pink Bag
    Rs.3899 Rs.2999 10% Off

Vertical Card with Badge

This is a variation of a vertical card, with badge. You can copy html part from below code snippet.

  • product image

    Stylish Bags

    Girls White & Pink Bag
    Rs.3899 Rs.2999 10% Off
    New

Vertical Card with Dismiss

This is a variation of a vertical card, with dismiss.
You can copy html part from below code snippet.

product image

Stylish Bags

Girls White & Pink Bag
Rs.3899 Rs.2999 10%
New

Horizontal Card

This is a horizontal card with image, badge and dismiss.
You can copy html part from below code snippet.

product image

Stylish Bags

Girls White & Pink Bag
Rs.3899 Rs.2999 10%
New

Card with Text Overlay

This is a card with text overlay.
You can copy html part from below code snippet.

product image
Out Of Stock

Stylish Bags

Girls White & Pink Bag
Rs.3899 Rs.2999 10%
New

Card with Shadow

This is a card with shadow.
You can copy html part from below code snippet.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias veniam odio possimus minus, sint officia placeat doloremque explicabo quam officiis.