Cards
Cards contain content and actions about a single subject. Cards are surfaces that display content and actions on a single topic.
Basic card
Dreamcatcher
Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)
Rs. 150
<div class="card-wrapper">
<div class="img-container">
<img src="/Assets/Dreamcatcher.jpg" class="card-image img-responsive">
</div>
<div class="card-title">
<h3>Dreamcatcher</h3>
<button class="btn btn-md icon-md btn-icon-contained btn-fire"><i class="fa fa-heart"></i></button>
</div>
<p class="card-body">Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)</p>
<div class="ratings">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star-half-full checked"></span>
<span class="fa fa-star-o"></span>
</div>
<h4 class="price">Rs. 150</h4>
<div class="card-btn-container">
<button class="btn btn-md btn-primary-contained">
<i class="fa fa-shopping-cart"></i> Add to cart
</button>
<button class="btn btn-md btn-primary-outlined">
<i class="fa fa-bolt"></i> Buy Now
</button>
<button class="btn btn-md icon-md btn-icon-contained btn-primary">
<i class="fa fa-share-alt"></i>
</button>
</div>
</div>
Card with badge
New
Dreamcatcher
Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)
Rs. 150
<div class="card-wrapper">
<div class="img-container">
<span class="badge-text badge-box-square fire-bgcolor badge-over-image">New</span>
<button class="btn btn-lg icon-lg btn-icon-solid btn-normal card-top-icon" id="card-close"><i class="fa fa-share-alt"></i></button>
<img src="/Assets/Dreamcatcher.jpg" class="card-image img-responsive">
</div>
<div class="card-title">
<h3>Dreamcatcher</h3>
<button class="btn btn-md icon-md btn-icon-contained btn-fire"><i class="fa fa-heart"></i></button>
</div>
<p class="card-body">Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)</p>
<div class="ratings">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star-half-full checked"></span>
<span class="fa fa-star-o"></span>
</div>
<h4 class="price">Rs. 150</h4>
<div class="card-btn-container">
<button class="btn btn-lg btn-primary-outlined">
<i class="fa fa-shopping-cart"></i> Add to cart
</button>
<button class="btn btn-lg btn-primary-contained">
<i class="fa fa-bolt"></i> Buy Now
</button>
</div>
</div>
Card with dismiss
Dreamcatcher
Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)
Rs. 150
<div class="card-wrapper" id="card-dismiss">
<div class="img-container">
<button class="btn btn-lg icon-lg btn-icon-solid btn-normal card-top-icon" id="card-close"><i class="fa fa-remove"></i></button>
<img src="/Assets/Dreamcatcher.jpg" class="card-image img-responsive">
</div>
<div class="card-title">
<h3>Dreamcatcher</h3>
<button class="btn btn-md icon-md btn-icon-contained btn-fire"><i class="fa fa-heart"></i></button>
</div>
<p class="card-body">Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)</p>
<div class="ratings">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star-half-full checked"></span>
<span class="fa fa-star-o"></span>
</div>
<h4 class="price">Rs. 150</h4>
<div class="card-btn-container">
<button class="btn btn-lg btn-primary-outlined">
<i class="fa fa-shopping-cart"></i> Add to cart
</button>
<button class="btn btn-lg btn-primary-contained">
<i class="fa fa-bolt"></i> Buy Now
</button>
</div>
</div>
Card with text overlay
New
Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)
<div class="card-wrapper">
<div class="img-container card-overlay-image">
<span class="badge-text badge-box-square fire-bgcolor badge-over-image">New</span>
<img src="/Assets/Dreamcatcher.jpg" class="card-image img-responsive">
</div>
<div class="card-title card-overlay-text">
<h3>Dreamcatcher</h3>
<button class="btn btn-md icon-md btn-icon-contained btn-fire"><i class="fa fa-heart"></i></button>
</div>
<p class="card-body">Asian Hobby Crafts Dream Catcher Wall Hanging (Blue Lagoon)</p>
<div class="ratings">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star-half-full checked"></span>
<span class="fa fa-star-o"></span>
</div>
<div class="card-btn-container">
<button class="btn btn-md btn-primary-contained btn-space"><i class="fa fa-book"></i> Read</button>
<button class="btn btn-md btn-primary-contained btn-space"><i class="fa fa-bookmark"></i> Bookmark</button>
<button class="btn btn-md icon-md btn-icon-contained btn-primary">
<i class="fa fa-share-alt"></i>
</button>
</div>
</div>
Card with only text
Dreamcatcher
The dreamcatcher is a protective talisman that is used to protect people from nightmares and bad dreams. Native American cultures believe that both good and bad dreams fill the air at night. The dreamcatcher acts like a spider's web by trapping the bad dreams or visions while allowing the good ones to filter through.
<div class="card-wrapper">
<div class="card-title">
<h3>Dreamcatcher</h3>
<button class="btn btn-md icon-md btn-icon-contained btn-fire"><i class="fa fa-heart"></i></button>
</div>
<p class="card-body">The dreamcatcher is a protective talisman that is used to protect people from nightmares and bad dreams. Native American cultures believe that both good and bad dreams fill the air at night. The dreamcatcher acts like a spider's web by trapping the bad dreams or visions while allowing the good ones to filter through.</p>
<div class="ratings">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star-half-full checked"></span>
<span class="fa fa-star-o"></span>
</div>
<div class="card-btn-container">
<button class="btn btn-md btn-primary-contained btn-space"><i class="fa fa-book"></i> Read</button>
<button class="btn btn-md btn-primary-contained btn-space"><i class="fa fa-bookmark"></i> Bookmark</button>
<button class="btn btn-md icon-md btn-icon-contained btn-primary">
<i class="fa fa-share-alt"></i>
</button>
</div>
</div>
E-commerce horizontal card
This is a responsive card it becomes vertical when the size of the screen decreases.
Dreamcatcher
Rs. 150
<div class="card-wrapper-hor">
<div class="img-container">
<img src="https://picsum.photos/id/104/200/250" class="img-responsive card-image-hor">
</div>
<div class="card-body-hor">
<h3>Dreamcatcher</h3>
<div class="card-price">
<h4>Rs. 150</h4>
<small><del>Rs. 750</del></small>
</div>
<small class="text-span">50% off</small>
<div class="btn-container-hor">
<div class="btn-counter">
<button class="btn btn-md btn-primary-floating btn-floating floating-md">+</button>
<input type="number" value="1" class="basic-textfield-outlined item-counter" id="basic-outlined">
<button class="btn btn-md btn-primary-floating btn-floating floating-md">-</button>
</div>
<div class="big-btn-container">
<button class="btn btn-md btn-primary-contained btn-big">
<i class="fa fa-heart-o"></i> Add to wishlist
</button>
</div>
<div class="big-btn-container">
<button class="btn btn-md btn-primary-outlined btn-big">
<i class="fa fa-bolt"></i> Buy now
</button>
</div>
</div>
</div>
</div>