On This Page

Cards

Cards are used to display content and action on a particular topic. It provides a flexible and extensible content container with multiple variants and options.

Card without dismiss

Vertical Light Card

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

You can directly use below code, by providing your image location in 'src'.

Vertical Dark Card:

  To convert a light card to a dark card, only replace 'card-light' by 'card-dark' in the code.

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

You can directly use below code, by providing your image location in 'src'.

Horizontal Light Card

product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

35,999/-

You can directly use below code, by providing your image location in 'src'.

Horizontal Dark Card:

  To convert a light card to a dark card, only replace 'card-light' by 'card-dark' in the code.

product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

35,999/-

You can directly use below code, by providing your image location in 'src'.

Card with Dismiss

Vertical Light Card

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

You can directly use below code, by providing your image location in 'src'.

Vertical Dark Card:

  To convert a light card to a dark card, only replace 'card-light' by 'card-dark' in the code.

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

You can directly use below code, by providing your image location in 'src'.

Horizontal Light Card

product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

35,999/-

You can directly use below code, by providing your image location in 'src'.

Horizontal Dark Card:

  To convert a light card to a dark card, only replace 'card-light' by 'card-dark' in the code.

product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

35,999/-

You can directly use below code, by providing your image location in 'src'.

Cards with Text Overlay

For light cards we use 'card-light' and for dark cards use 'card-dark'. The remaining code will be the same.

Text Overlay Type - 1

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

SOLD OUT

product-image

Canon EOS 1500D

You can directly use below code, by providing your image location in 'src'.

Text Overlay Type - 2

With just chaning the 'overlay-area-type-1' to 'overlay-area-type-2' we can create second type of overlay card as shown below.

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

SOLD OUT

product-image

Canon EOS 1500D

You can directly use below code, by providing your image location in 'src'.

Text Only Card

  To convert a light card to a dark card, only replace 'card-light' by 'card-dark' in the code.

Canon EOS 1500D

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

EF-S mount compatible with all EF and EF-S lenses (crop-sensor mount versatile and compact, especially when used with EF-S lenses)

Canon EOS 1500D

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

EF-S mount compatible with all EF and EF-S lenses (crop-sensor mount versatile and compact, especially when used with EF-S lenses)

Card with Badge

By adding 'badge-on-card' and a position 'top-left' or 'top-right', we can easily add a badge to any card type.

New Arrival

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

You can directly use below code, by providing your image location in 'src'.

Card examples with Badge:

New Arrival

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

Best Selling

product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

35,999/-

Information Card

  To convert a light card to a dark card, only replace 'card-light' by 'card-dark' in the code.

New Arrival

product-image

Canon EOS 1500D

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

New Arrival

product-image

Canon EOS 1500D

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

You can directly use below code, by providing your image location in 'src'.

Card with Shadow

We have three types of shadows for cards. Which can be added by adding any of the class "card-shadow-one" , "card-shadow-two" , "card-shadow-three" in your code, as shown in the code example below.

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

product-image

Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera

10,999/-

You can directly use below code, by providing your image location in 'src'.

Cart Item Card (Horizontal & Vertical)

product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

35,999/-

Qty
1
product-image

Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens

Rs. 35,999/-

Qty
1

By just adding 'cart-item-card-vertical' class, you can change the card orientation to vertical as shown in the code below.
You can also directly use below code, by providing your image location in 'src'.

Price Card

Price Details


Price

25,000/-

Total Qty

1

Discount

1000/-


Total

24,000/-


Coupun code (if any)


Price Details


Price

25,000/-

Total Qty

1

Discount

1000/-


Total

24,000/-


Coupun code (if any)


If you want to use dark card for prices breakup in cart section, just add 'price-table-dark' as shown in the code below, and you are ready to use it.