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


<!-- add the class "card-container" in the parent container,
"card-badge" in the badge element
optional: "badge-right"-->

<div class="card-container">
    <div class="card-child card-header">
        <img class="card-img" src="source path" alt="">
        <h4 class="card-title">Title</h4>
        <p class="card-subtitle p-sm">Subtitle</p>
    </div>
    <div class="card-badge badge-right">Out of Stock</div>
    <div class="card-child card-body">
        <hr>
        <p class="card-desc  p-sm">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="card-child card-footer">
        <div class="discounted-price">Rs. 299</div>
        <div class="actual-price p-sm">Rs. 499</div>
        <div class="discount p-sm">60% OFF</div>
    </div>
</div>

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


<!-- add the class "card-container" in the parent container,
"dismiss-btn" in dismiss element-->

<div class="card-container">
    <button class="dismiss-btn">
        <span class="material-icons md-18 material-icons-outlined">close
        </span>
    </button>
    <div class="card-child card-header">
        <img class="card-img" src="source path" alt="">
        <h4 class="card-title">Title</h4>
        <p class="card-subtitle p-sm">Subtitle
    </p></div>
    <div class="card-badge card-badge-def">Badge Text</div>
    <div class="card-child card-body">
        <hr>
        <p class="card-desc  p-sm">Lorem ipsum dolor sit amet consectetur</p>
    </div>
    <div class="card-child card-footer">
        <div class="discounted-price">Rs. 299</div>
        <div class="actual-price p-sm">Rs. 499</div>
        <div class="discount p-sm">60% OFF</div>
    </div>
</div>

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


<!-- add the class "card-container" in the parent container,
"overlay-text" in the overlay element
optional: "card-disabled" for the disabled style-->

<div class="card-container card-disabled">
    <button class="dismiss-btn">
        <span class="dismiss material-icons md-18 material-icons-outlined">
        close
        </span>
    </button>
    <div class="card-child card-header">
       <img class="card-img" src="source path" alt="">
        <h4 class="card-title">Title</h4>
        <p class="card-subtitle p-sm">Subtitle
    </p></div>
    <div class="overlay-text grey-badge">Out of Stock</div>
    <div class="card-child card-body">
        <hr>
        <p class="card-desc  p-sm">Lorem ipsum dolor sit amet consectetur </p>
    </div>
    <div class="card-child card-footer">
        <div class="discounted-price">Rs. 299</div>
        <div class="actual-price p-sm">Rs. 499</div>
        <div class="discount p-sm">60% OFF</div>
    </div>
</div>

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


<!-- add the class "text-only" for these cards along with "card-container"
use "text-vertical" or "text-horizontal" as preferred-->

<div class="card-container text-only text-vertical">
    <div class="card-child card-header">
        <img class="card-img" src="source path" alt="">
        <h4 class="card-title">Title </h4>
        <p class="card-subtitle p-sm">Subtitle
    </p></div>
    <div class="card-child card-body">
        <hr>
        <p class="card-desc p-sm">Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Tempora quae sapiente cum.</p>
    </div>
    <div class="card-child card-footer">
        <div class="actions-wrapper">
            <button class="action-btn p-sm">Action 1</button>
            <button class="action-btn p-sm">Action 2</button>
        </div>
    </div>
</div>

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


<!-- add the class "text-only" for text-only cards along with "card-container"
use "text-vertical" or "text-horizontal" as preferred
for cards with images, add the class "card-horizontal" or "card-vertical"-->

<div class="card-container card-vertical">
    <div class="card-child card-header">
        <img class="card-img" src="source path" alt="">
        <h4 class="card-title">Title</h4>
        <p class="card-subtitle p-sm">Subtitle
    </p></div>
    <div class="card-badge red-badge">Badge Text</div>
    <div class="card-child card-body">
        <hr>
        <p class="card-desc  p-sm">Lorem ipsum dolor sit amet consectetur.</p>
    </div>
    <div class="card-child card-footer">
        <div class="discounted-price">Rs. 299</div>
        <div class="actual-price p-sm">Rs. 499</div>
        <div class="discount p-sm">60% OFF</div>
    </div>
</div>

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


<!-- add class "card-block-horizontal" in the parent container. 
    add class "img-container" in the first child element and 
    "card-details" in the second child element.-->

<div class="card-block-horizontal">
    <div class="img-container">
        <img src="source path" alt="" class="card-img">
    </div>
    <div class="card-details">
        <h3>Title</h3>
        <h4>Subtitle</h4>
        <p>Description</p>
        <button class="icon-dark">Action-1</button>
        <button class="icon-light">Action-2</button>
    </div>
</div>

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


<!-- add the class "shadow" along with "card-container"-->

<div class="card-container shadow">
    <div class="card-child card-header">
        <img class="card-img" src="source path" alt="">
        <h4 class="card-title">Title</h4>
        <p class="card-subtitle p-sm">Subtitle
    </p></div>
    <div class="card-badge red-badge">Badge Text</div>
    <div class="card-child card-body">
        <hr>
        <p class="card-desc  p-sm">Lorem ipsum dolor sit amet consectetur.</p>
    </div>
    <div class="card-child card-footer">
        <div class="discounted-price">Rs. 299</div>
        <div class="actual-price p-sm">Rs. 499</div>
        <div class="discount p-sm">60% OFF</div>
    </div>
</div>

< Buttons Images >