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
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.
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
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.
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
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.
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
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.
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
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'.
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.
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'.
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
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
Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera
10,999/-
Best Selling
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
Canon EOS 1500D
Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens
New Arrival
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.
Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera
10,999/-
Sony DSC W830 Cyber-Shot 20.1 MP Point & Shoot Camera
10,999/-
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)
Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens
35,999/-
Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens
Rs. 35,999/-
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.