Card
Cards are surfaces that display content and actions on a single topic. They are widely used to display information pertaining to a topic with a combination of image,text & a button to perform some action.
Horizontal Card
Life's Amazing Secrets
Life's Amazing Secrets: How to Find Balance and Purpose in Your Life is an engaging philosophical book that deals with deep and meaningful conversations on life between Gaur Gopal Das himself and his wealthy friend Harry.
Sold by: Retailnet
<div class="card-content-horizontal">
<img src="/images/book-img.jpg" alt="" width="180px" height="220px"/>
<div>
<h1>Life's Amazing Secrets</h1>
<p>....</p>
<span>...</span>
<div>
<span class="discount-price">...</span>
<span class="mrp-price">..</span>
<span class="discount-percent">...</span>
</div>
<button class="btn btn-icon mt"><svg></svg>Add to Cart</button>
</div>
</div>
Vertical Card
Life's Amazing Secrets
Life's Amazing Secrets: How to Find Balance and Purpose in Your Life is an engaging philosophical book that deals with deep and meaningful conversations on life between Gaur Gopal Das himself and his wealthy friend Harry.
Sold by: Retailnet
<div class="card-content-vertical">
<img src="/images/book-img.jpg" alt="" width="180px" height="220px"/>
<div>
<h1>Life's Amazing Secrets</h1>
<p>....</p>
<span>...</span>
<div>
<span class="discount-price">...</span>
<span class="mrp-price">..</span>
<span class="discount-percent">...</span>
</div>
<button class="btn btn-icon mt"><svg></svg>Add to Cart</button>
</div>
</div>
Horizontal card with badge
NEW
Life's Amazing Secrets
Life's Amazing Secrets: How to Find Balance and Purpose in Your Life is an engaging philosophical book that deals with deep and meaningful conversations on life between Gaur Gopal Das himself and his wealthy friend Harry.
Sold by: Retailnet
<div class="card-content-horizontal card-with-badge">
<img src="/images/book-img.jpg" alt="" width="180px" height="220px"/>
<span class="badge-item-sm new-green-bdg bdg-card-position">NEW</span>
<div>
<h1>Life's Amazing Secrets</h1>
<p>....</p>
<span>...</span>
<div>
<span class="discount-price">...</span>
<span class="mrp-price">..</span>
<span class="discount-percent">...</span>
</div>
<button class="btn btn-icon mt"><svg></svg>Add to Cart</button>
</div>
</div>
Text Only Card
Card Title
Card Subtitle
This is a sample example of a text only card. These are used a lot on blog sites where in blog title and small content is shown and consists of a read more button to read entire article.
<div class="card-content-vertical text-only-card">
<h3>Card Title</h3>
<h5>Card Subtitle</h5>
<p>...</p>
<button class="btn">...</button>
</div>
Card with dismiss button
Life's Amazing Secrets
Life's Amazing Secrets: How to Find Balance and Purpose in Your Life is an engaging philosophical book that deals with deep and meaningful conversations on life between Gaur Gopal Das himself and his wealthy friend Harry.
Sold by: Retailnet
<div class="card-content-vertical card-with-dismiss">
<img src="/images/book-img.jpg" alt="" width="180px" height="220px"/>
<svg class="close-btn-on-card" ...></svg>
<div>
<h1>Life's Amazing Secrets</h1>
<p>....</p>
<span>...</span>
<div>
<span class="discount-price">...</span>
<span class="mrp-price">..</span>
<span class="discount-percent">...</span>
</div>
<button class="btn btn-icon mt"><svg></svg>Add to Cart</button>
</div>
</div>