Card
A card is a group of related information, generally comprising of an Image, headers and footers, a wide variety of content, and sometimes also has a call to action button. In order to only use the Button Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.
<link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
<link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Image/image.css" />
<link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Button/button.css" />
<link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Card/card.css" />
Card with Badge
This card has a badge on the top-left corner. To use the Card with Badge you just need to add class name card-badge. You can copy the html part from below code snippet.
Denim Jacket
Accessories
<div class="card-badge">
<div class="card-header">
<img class="img-responsive" src="/assets/denim jacket.jpg" alt="Denim jacket"" />
<div class="badge-in-card">
TRENDING
</div>
<div class="card-floating-icon">
<i class="far fa-heart"></i>
</div>
<div class="card-header-txt">
<h3 class="semibold">Denim jacket"</h3>
<small class="gray-color">Accessories</small>
<div class="card-price">
<span class="final-price t1p5 lightbold">₹599/-</span>
<span class="initial-price text-strike">₹999/-</span>
<span class="discount primary-color">Save ₹400 (30%)</span>
</div>
</div>
</div>
<button class="btn-primary card-btn">
Add to Cart
</button>
</div>
Card with Text Overlay
This card has a text overlay on top of it. To use the Card with Text Overlay you can copy the html from below code snippet.
Denim Jacket
Accessories
<div class="card-badge card-txt-overlay">
<div class="card-header">
<img class="img-responsive" src="/assets/denim jacket.jpg" alt="Denim Jacket" />
<div class="badge-in-card">
TRENDING
</div>
<div class="card-floating-icon">
<i class="far fa-heart"></i>
</div>
<div class="card-header-txt">
<h3 class="semibold">Denim Jacket</h3>
<small class="gray-color">Accessories</small>
<div class="card-price">
<span class="final-price t1p5 lightbold">₹599/-</span>
<span class="initial-price text-strike">₹999/-</span>
<span class="discount primary-color">Save ₹400 (30%)</span>
</div>
</div>
</div>
<button class="btn-primary card-btn">
Add to Cart
</button>
<div class="overlay-msg t2 lightbold">Out of Stock</div>
</div>
Horizontal Card
The horizontal card is completely responsive, as it turns into a vertical card on devices with small screens. To use this card, you just need to add class name card-horizontal. You can copy the html part from below code snippet.
Denim Jacket
Accessories
<div class="card-horizontal">
<div class="img-in-horizontal">
<img class="img-responsive" src="/assets/denim jacket.jpg" alt="Denim Jacket" />
</div>
<div class="card-header">
<div class="card-header-txt">
<h3 class="semibold">Denim Jacket</h3>
<small class="gray-color">Accessories</small>
<div class="card-price">
<span class="final-price t1p5 lightbold">₹599/-</span>
<span class="initial-price text-strike">₹999/-</span>
<span class="discount primary-color">Save ₹400 (30%)</span>
</div>
</div>
<button class="btn-primary card-btn">
Add to Cart
</button>
<button class="btn-primary btn-outline card-btn">
Save to Wishlist
</button>
</div>
</div>
Text only Card
Text only card includes a title and a paragraph text. To use the this card you just need to add class name card-txt-only. You can copy the html part from below code snippet.
Card Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, ratione. Nemo sint, ut quasi dolore ducimus consectetur ratione expedita non?
Card Title
Sub-TitleLorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi, inventore quis nobis quod illo distinctio iste est recusandae voluptatem mollitia.
<div class="card-txt-only">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alias, ratione. Nemo sint, ut quasi dolore ducimus consectetur ratione expedita non?</p>
</div>
<!-- Second Variation for Text Only Card -->
<div class="card-txt-only">
<h4>Card Title</h4>
<small>Sub-Title</small>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sequi, inventore quis nobis quod illo distinctio iste est recusandae voluptatem mollitia.</p>
</div>
Card with Dismiss
Card with Dismiss includes a icon on top right corner which acts as a dismiss button. To use the this card you just need to add class name card-dismiss. You can copy the html part from below code snippet.
Card Title
Sub-TitleLorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam hic ipsam minus nostrum itaque labore.
<div class="card-dismiss">
<h4>Card Title</h4>
<i class="fas fa-times"></i>
<small>Sub-Title</small>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Aperiam hic ipsam minus nostrum itaque labore.</p>
</div>
Card with Shadow
This card has a very nice elevated effect due to shadow. To have this shadow effect in your card, you just need to add class name card-shadow along with any other type of card. You can copy the html part from below code snippet.
Denim Jacket
Accessories
<div class="card-badge card-shadow">
<div class="card-header">
<img class="img-responsive" src="/assets/denim jacket.jpg" alt="Denim Jacket" />
<div class="badge-in-card">
TRENDING
</div>
<div class="card-floating-icon">
<i class="far fa-heart"></i>
</div>
<div class="card-header-txt">
<h3 class="semibold">Denim Jacket</h3>
<small class="gray-color">Accessories</small>
<div class="card-price">
<span class="final-price t1p5 lightbold">₹599/-</span>
<span class="initial-price text-strike">₹999/-</span>
<span class="discount primary-color">Save ₹400 (30%)</span>
</div>
</div>
</div>
<button class="btn-primary card-btn">
Add to Cart
</button>
</div>