Cards
Overview
Cards are used in the Shop and Newsletter pages. They are based on the basic Bootstrap card component.
Shop Cards
These cards are used in e-commerce. They allow for a preview of the product with a button that appears on hover state.
<-- Shop Cards -->
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col mb-5">
<div class="card h-100 bg-transparent border border-0 position-relative">
<div class="product-link position-relative">
<a href="product-single.html">
<img src="./img/shop-card-slide-1.jpg" class="card-img-top rounded-5"
alt="shop image">
</a>
<div class="quick-view position-absolute">
<button
class="btn btn-brand-primary-reverse btn-xl text-12 text-nowrap rounded-pill shadow">Quick
View</button>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="card-title">Title</p>
<a href="" class="favorites"><i data-feather="heart" width="24"
height="24" stroke-width="1"></i></a>
</div>
<div class="d-flex">
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<span class="text-10 text-brand-mid-gray px-3">18</span>
</div>
<p class="card-text text-10 text-uppercase letter-spacing-01 my-1">Brand
–
Category</p>
<p class="text-brand-primary text-18 fw-semibold">$59.99 <span
class="text-brand-mid-gray text-decoration-line-through">$89.99</span>
</p>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100 bg-transparent border border-0 position-relative">
<div class="product-link position-relative">
<div class="discount-sticker position-absolute">
25% off
</div>
<a href="product-single.html">
<img src="./img/shop-card-slide-1.jpg" class="card-img-top rounded-5"
alt="shop image">
</a>
<div class="quick-view position-absolute">
<button
class="btn btn-brand-primary-reverse btn-xl text-12 text-nowrap rounded-pill shadow">Quick
View</button>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="card-title">Title</p>
<a href="" class="favorites"><i data-feather="heart" width="24"
height="24" stroke-width="1"></i></a>
</div>
<div class="d-flex">
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="transparent"
stroke-width="1" class="me-1"></i>
<span class="text-10 text-brand-mid-gray px-3">18</span>
</div>
<p class="card-text text-10 text-uppercase letter-spacing-01 my-1">Brand
–
Category</p>
<p class="text-brand-primary text-18 fw-semibold">$59.99 <span
class="text-brand-mid-gray text-decoration-line-through">$89.99</span>
</p>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100 bg-transparent border border-0 position-relative">
<div class="product-link position-relative">
<a href="product-single.html">
<img src="./img/shop-card-slide-1.jpg" class="card-img-top rounded-5"
alt="shop image">
</a>
<div class="quick-view position-absolute">
<button
class="btn btn-brand-primary-reverse btn-xl text-12 text-nowrap rounded-pill shadow">Quick
View</button>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="card-title">Title</p>
<a href="" class="favorites"><i data-feather="heart" width="24"
height="24" stroke-width="1"></i></a>
</div>
<div class="d-flex">
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<i data-feather="star" class="feather-icon-12" fill="#4E4E4E"
stroke-width="1" class="me-1"></i>
<span class="text-10 text-brand-mid-gray px-3">18</span>
</div>
<p class="card-text text-10 text-uppercase letter-spacing-01 my-1">Brand
–
Category</p>
<p class="text-brand-primary text-18 fw-semibold">$59.99 <span
class="text-brand-mid-gray text-decoration-line-through">$89.99</span>
</p>
</div>
</div>
</div>
</div>
Newsletter Cards
These cards are found on the newsletter pages and anywhere blog articles are found.
Card title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia sed placeat eius consequuntur dicta.
Card title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia sed placeat eius consequuntur dicta.
Card title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia sed placeat eius consequuntur dicta.
<!-- Newsletter Cards -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card newscard rounded-5 overflow-hidden h-100">
<div class="overflow-hidden img-container"><img
src="./img/news-card-slide-1.jpg" alt="blog image">
</div>
<div class="card-body p-4">
<p class="meta">Category | October 27, 2020</p>
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Quia
sed placeat eius consequuntur dicta.</p>
</div>
<div class="card-footer p-4 border-top-0"><a href="newsletter-single.html"
class="stretched-link">Read More <i data-feather="arrow-right"
width="20" height="20" stroke-width="3"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="card newscard rounded-5 overflow-hidden h-100">
<div class="overflow-hidden img-container"><img
src="./img/news-card-slide-1.jpg" alt="blog image">
</div>
<div class="card-body p-4">
<p class="meta">Category | October 27, 2020</p>
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Quia
sed placeat eius consequuntur dicta.</p>
</div>
<div class="card-footer p-4 border-top-0"><a href="newsletter-single.html"
class="stretched-link">Read More <i data-feather="arrow-right"
width="20" height="20" stroke-width="3"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="card newscard rounded-5 overflow-hidden h-100">
<div class="overflow-hidden img-container"><img
src="./img/news-card-slide-1.jpg" alt="blog image">
</div>
<div class="card-body p-4">
<p class="meta">Category | October 27, 2020</p>
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Quia
sed placeat eius consequuntur dicta.</p>
</div>
<div class="card-footer p-4 border-top-0"><a href="newsletter-single.html"
class="stretched-link">Read More <i data-feather="arrow-right"
width="20" height="20" stroke-width="3"></i></a>
</div>
</div>
</div>
</div>
Brand Cards
Brand cards are found on Shop pages. For best results use black (#000000) SVG images of brand logos.
<!-- Brand Cards -->
<section class="container">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-1">
<div class="col">
<a class="brands" href="">
<div class="card rounded-5 overflow-hidden">
<img class="img-fluid" src="./img/logo-placeholder-1.svg" alt="logo">
</div>
</a>
</div>
<div class="col">
<a class="brands" href="">
<div class="card rounded-5 overflow-hidden">
<img class="img-fluid" src="./img/logo-placeholder-1.svg" alt="logo">
</div>
</a>
</div>
<div class="col">
<a class="brands" href="">
<div class="card rounded-5 overflow-hidden">
<img class="img-fluid" src="./img/logo-placeholder-1.svg" alt="logo">
</div>
</a>
</div>
<div class="col">
<a class="brands" href="">
<div class="card rounded-5 overflow-hidden">
<img class="img-fluid" src="./img/logo-placeholder-1.svg" alt="logo">
</div>
</a>
</div>
<div class="col">
<a class="brands" href="">
<div class="card rounded-5 overflow-hidden">
<img class="img-fluid" src="./img/logo-placeholder-1.svg" alt="logo">
</div>
</a>
</div>
<div class="col">
<a class="brands" href="">
<div class="card rounded-5 overflow-hidden">
<img class="img-fluid" src="./img/logo-placeholder-1.svg" alt="logo">
</div>
</a>
</div>
</div>
</section>