Cards

A Card component resembles a playing card and contains short, related pieces of information. They are used either to group information, present a summary or a link to additional details. Below are a few types of available cards.

The following colors are available for the badges:

Red: red-badge
Default (gold): card-badge-def
Grey: grey-badge
Green: green-badge

Cards with Badges

Here are some examples of cards with badges. Use the class card-container in the parent container and card-badge in the badge element.
The badge can be positioned to the right of the card using class badge-right. By default it is set to the left.

Lauret Blanc

Ruled Journal

Selling Fast

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF

Lauret Blanc

Ruled Journal

New

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF

Lauret Blanc

Ruled Journal

Out of Stock

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF





    
        
        Title
        Subtitle
    
    Out of Stock
    
        
        Lorem ipsum dolor sit amet
    
    
        Rs. 299
        Rs. 499
        60% OFF

Cards with Dismiss

Here is a Card that can be dismissed. Use class card-container in the parent container, and dismiss-btn in the dismiss element.

Lauret Blanc

Ruled Journal

New

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF





    
    
        
        Title
        Subtitle
    
    Badge Text
    
        
        Lorem ipsum dolor sit amet consectetur
    
    
        Rs. 299
        Rs. 499
        60% OFF

Cards with Text Overlay

Use the class card-container in the parent container and overlay-text in the element that you need as an overlay.
In the below example, we have used an additional class in the card's container - card-disabled which reduces the opacity of the card to give the disabled look.

Lauret Blanc

Ruled Journal

Out of Stock

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF





    
    
       
        Title
        Subtitle
    
    Out of Stock
    
        
        Lorem ipsum dolor sit amet consectetur 
    
    
        Rs. 299
        Rs. 499
        60% OFF

Cards - Text Only

The below cards are only text with no images.
There are 2 variants available: text-horizontal and text-vertical, based on the preferred type of card. Use these classes along with the class text-only in the card's container.

Title

Subtitle

New!!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quae sapiente cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus nemo atque alias velit earum voluptate magni. Eos deserunt cum voluptatibus laborum. Corrupti, vel nobis incidunt culpa sequi voluptatum totam dicta!

Title

Subtitle





    
        
        Title 
        Subtitle
    
    
        
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Tempora quae sapiente cum.

Cards - Horizontal/Vertical

Cards can either be vertical or horizontal and with or without images. Below, we have all 4 variants shown. Use the classes as mentioned in the previous section in case of text-only cards. For cards with images, use the class card-horizontal in the card container for horizontal cards and class card-vertical for vertical cards.

Title

Subtitle

New!!

Weekly Planner

Rs. 199

Title

Subtitle

Lauret Blanc

Ruled Journal

Selling Fast

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF





    
        
        Title
        Subtitle
    
    Badge Text
    
        
        Lorem ipsum dolor sit amet consectetur.
    
    
        Rs. 299
        Rs. 499
        60% OFF

Horizontal Card - Grid

Here is a horizontal card made using CSS Grids. Use the class card-block-horizontal in the parent container. The parent has 2 child elements - add the class img-container in the first child element and card-details in the second child element to get the below style.

Bullet Journal

Rs. 499

50% OFF





    
        
    
    
        Title
        Subtitle
        Description

Cards with Shadow

Here is a card that has a shadow, giving it a 3D look. Add the class shadow on the card's container to apply the shadow effect.

Lauret Blanc

Ruled Journal

New

Ruled Journal - Hard Bound - A5, 100GSM, 160 Pages

Rs. 299

Rs. 499

60% OFF





    
        
        Title
        Subtitle
    
    Badge Text
    
        
        Lorem ipsum dolor sit amet consectetur.
    
    
        Rs. 299
        Rs. 499
        60% OFF

< Buttons Images >