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-2 row-cols-lg-3">
<div class="col p-0">
<div class="card h-100 bg-transparent border border-0 position-relative">
<div class="product-link position-relative rounded-5 overflow-hidden">
<a href="../product-single.html">
<img src="../img/shop-card-slide-1.jpg"
class="card-img-top" alt="shop image">
</a>
<div class="quick-view position-absolute">
<button type="button"
class="btn btn-light btn-xl text-12 text-nowrap rounded-pill shadow border border-1 border-brand-light-gray">Quick
View</button>
</div>
</div>
<div class="card-body px-1 py-0">
<div class="d-flex justify-content-between">
<p class="card-title text-14">Title</p>
<a href="#" aria-label="add to favorites" class="favorites"><i
data-feather="heart"
class="feather-icon-18 stroke-w-1"></i></a>
</div>
<div class="d-flex">
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></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-12 fw-semibold">$59.99 <span
class="text-brand-mid-gray text-decoration-line-through">$89.99</span>
</p>
</div>
</div>
</div>
<div class="col p-0">
<div class="card h-100 bg-transparent border border-0 position-relative">
<div class="product-link position-relative rounded-5 overflow-hidden">
<div class="discount-sticker">
25% off
</div>
<a href="../product-single.html">
<img src="../img/shop-card-slide-1.jpg"
class="card-img-top" alt="shop image">
</a>
<div class="quick-view position-absolute">
<button type="button"
class="btn btn-light btn-xl text-12 text-nowrap rounded-pill shadow border border-1 border-brand-light-gray">Quick
View</button>
</div>
</div>
<div class="card-body px-1 py-0">
<div class="d-flex justify-content-between">
<p class="card-title text-14">Title</p>
<a href="#" aria-label="add to favorites" class="favorites"><i
data-feather="heart"
class="feather-icon-18 stroke-w-1"></i></a>
</div>
<div class="d-flex">
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-transparent"></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-12 fw-semibold">$59.99 <span
class="text-brand-mid-gray text-decoration-line-through">$89.99</span>
</p>
</div>
</div>
</div>
<div class="col p-0">
<div class="card h-100 bg-transparent border border-0 position-relative">
<div class="product-link position-relative rounded-5 overflow-hidden">
<a href="../product-single.html">
<img src="../img/shop-card-slide-1.jpg"
class="card-img-top" alt="shop image">
</a>
<div class="quick-view position-absolute">
<button type="button"
class="btn btn-light btn-xl text-12 text-nowrap rounded-pill shadow border border-1 border-brand-light-gray">Quick
View</button>
</div>
</div>
<div class="card-body px-1 py-0">
<div class="d-flex justify-content-between">
<p class="card-title text-14">Title</p>
<a href="#" aria-label="add to favorites" class="favorites"><i
data-feather="heart"
class="feather-icon-18 stroke-w-1"></i></a>
</div>
<div class="d-flex">
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></i>
<i data-feather="star"
class="me-1 feather-icon-12 stroke-w-1 svg-fill-brand-dark-gray"></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-12 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-1px">
<div class="col">
<div class="card newscard overflow-hidden h-100 mb-5">
<div class="overflow-hidden img-container rounded-5 m-1"><img
src="../img/news-card-slide-1.jpg" alt="blog image">
</div>
<div class="card-body px-1 py-0">
<p class="meta">Category <br>March 27, 2024</p>
<hr class="m-0">
<h3 class="card-title mt-2">Card Title</h3>
<hr class="m-0">
<p class="card-text fw-light mt-3">Lorem ipsum dolor sit amet consectetur,
adipisicing
elit. Quia
sed placeat eius consequuntur dicta.</p>
</div>
<div class="card-footer px-1 pb-4 pt-7 border-top-0 text-uppercase"><a href="#"
class="stretched-link">Read More <i data-feather="arrow-right"
class="feather-icon-18 stroke-w-3"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="card newscard overflow-hidden h-100 mb-5">
<div class="overflow-hidden img-container rounded-5 m-1"><img
src="../img/news-card-slide-1.jpg" alt="blog image">
</div>
<div class="card-body px-1 py-0">
<p class="meta">Category <br>March 27, 2024</p>
<hr class="m-0">
<h3 class="card-title mt-2">Card Title</h3>
<hr class="m-0">
<p class="card-text fw-light mt-3">Lorem ipsum dolor sit amet consectetur,
adipisicing
elit. Quia
sed placeat eius consequuntur dicta.</p>
</div>
<div class="card-footer px-1 pb-4 pt-7 border-top-0 text-uppercase"><a href="#"
class="stretched-link">Read More <i data-feather="arrow-right"
class="feather-icon-18 stroke-w-3"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="card newscard overflow-hidden h-100 mb-5">
<div class="overflow-hidden img-container rounded-5 m-1"><img
src="../img/news-card-slide-1.jpg" alt="blog image">
</div>
<div class="card-body px-1 py-0">
<p class="meta">Category <br>March 27, 2024</p>
<hr class="m-0">
<h3 class="card-title mt-2">Card Title</h3>
<hr class="m-0">
<p class="card-text fw-light mt-3">Lorem ipsum dolor sit amet consectetur,
adipisicing
elit. Quia
sed placeat eius consequuntur dicta.</p>
</div>
<div class="card-footer px-1 pb-4 pt-7 border-top-0 text-uppercase"><a href="#"
class="stretched-link">Read More <i data-feather="arrow-right"
class="feather-icon-18 stroke-w-3"></i></a>
</div>
</div>
</div>
</div>
Pricing Cards
Pricing cards are made with Bootstrap and includes a pricing feature made with a checkbox. The
checkbox requires the
billing-cycle.js javascript for functionality.
Tier 1
$2.99/mo
billed yearly
Features
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Tier 2
$4.99/mo
billed yearly
Features
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Tier 3
$7.99/mo
billed yearly
Features
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
<!-- Pricing Cards -->
<div id="pricing-cards">
<div class="row row-cols-1 row-cols-lg-3 g-4 mb-5">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-0">
<div class="card h-100 p-4 p-xl-2 bg-white shadow border-1 rounded-5">
<div class="card-body text-center mt-xl-3">
<p class="text-12 text-uppercase letter-spacing-01">
Tier 1</p>
<div id="bronzePricing">
<h5 class="card-title display-3 mb-0"><span
class="text-30 position-relative top-neg-24">$</span><span
class="price">2.99</span><span class="text-20">/mo</span>
</h5>
<p class="text-10">billed <span class="cycle">yearly</span>
</p>
</div>
<div class="billing-cycle-container form-check form-switch ps-0 d-flex justify-content-center align-items-center mt-5"
data-bs-toggle="mode">
<label
class="form-check-label d-inline-block text-10 text-uppercase letter-spacing-005"
for="bronze">Monthly</label>
<input id="bronze" onchange="getTier(event)" type="checkbox"
class="mx-1 d-inline-block form-check-input" checked>
<label
class="form-check-label d-inline-block text-10 text-uppercase letter-spacing-005 position-relative"
for="bronze">Annually</label>
</div>
<div>
<h6 class="mt-5 mb-3">Features</h6>
<ul class="d-inline-block mx-auto mb-5">
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>
Lorem ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>
Lorem ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>Lorem
ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="x" width="20px" height="20px"
stroke-width="3"></i>Lorem
ipsum
dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="x" width="20px" height="20px"
stroke-width="3"></i>Lorem
ipsum
dolor sit
amet.
</li>
</ul>
</div>
<button
class="btn btn-brand-primary-reverse btn-xl rounded-pill shadow mb-4">Button</button>
</div>
</div>
</div>
<div
class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-0 mt-5 mt-xl-4">
<div
class="card h-100 p-4 px-xl-2 bg-white box-shadow-brand-primary border-1 border-brand-primary rounded-5 position-relative">
<div
class="text-white text-center text-14 fw-bold bg-brand-primary position-absolute py-3 rounded-pill mx-auto most-popular">
Lorem Ipsum</div>
<div class="card-body text-center">
<p class="text-12 text-uppercase letter-spacing-01">
Tier 2</p>
<div id="silverPricing">
<h5 class="card-title display-3 mb-0"><span
class="text-30 position-relative top-neg-24">$</span><span
class="price">4.99</span><span class="text-20">/mo</span>
</h5>
<p class="text-10">billed <span class="cycle">yearly</span>
</p>
</div>
<div class="billing-cycle-container form-check form-switch ps-0 d-flex justify-content-center align-items-center mt-5"
data-bs-toggle="mode">
<label
class="form-check-label d-inline-block text-10 text-uppercase letter-spacing-005"
for="silver">Monthly</label>
<input id="silver" onchange="getTier(event)" type="checkbox"
class="mx-1 d-inline-block form-check-input" checked>
<label
class="form-check-label d-inline-block text-10 text-uppercase letter-spacing-005 position-relative"
for="silver">Annually</label>
</div>
<div>
<h6 class="mt-5 mb-3">Features</h6>
<ul class="d-inline-block mx-auto mb-5">
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>
Lorem ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>
Lorem ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>Lorem
ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>Lorem
ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="x" width="20px" height="20px"
stroke-width="3"></i>Lorem
ipsum
dolor sit
amet.
</li>
</ul>
</div>
<button
class="btn btn-brand-primary btn-xl rounded-pill shadow mb-4">Button</button>
</div>
</div>
</div>
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-0">
<div class="card h-100 p-4 p-xl-2 bg-white shadow border-1 rounded-5">
<div class="card-body text-center mt-xl-3">
<p class="text-12 text-uppercase letter-spacing-01">
Tier 3</p>
<div id="goldPricing">
<h5 class="card-title display-3 mb-0"><span
class="text-30 position-relative top-neg-24">$</span><span
class="price">7.99</span><span class="text-20">/mo</span>
</h5>
<p class="text-10">billed <span class="cycle">yearly</span>
</p>
</div>
<div class="billing-cycle-container form-check form-switch ps-0 d-flex justify-content-center align-items-center mt-5"
data-bs-toggle="mode">
<label
class="form-check-label d-inline-block text-10 text-uppercase letter-spacing-005"
for="gold">Monthly</label>
<input id="gold" onchange="getTier(event)" type="checkbox"
class="mx-1 d-inline-block form-check-input" checked>
<label
class="form-check-label d-inline-block text-10 text-uppercase letter-spacing-005 position-relative"
for="gold">Annually</label>
</div>
<div>
<h6 class="mt-5 mb-3">Features</h6>
<ul class="d-inline-block mx-auto mb-5">
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>
Lorem ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>
Lorem ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>Lorem
ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>Lorem
ipsum dolor sit
amet.
</li>
<li class="pb-3">
<i class="me-1" data-feather="check" width="20px"
height="20px" stroke-width="3" color="#FF3B9D"></i>Lorem
ipsum dolor sit
amet.
</li>
</ul>
</div>
<button
class="btn btn-brand-primary-reverse btn-xl rounded-pill shadow mb-4">Button</button>
</div>
</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>