Cards
Pixel comes with a wide variety of premium cards that you can use for blog posts, pricing panels and profile sections.
Blog cards
Use the following examples of cards for blog posts:
Blog card 1
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card border-light">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
</div>
</div>Blog card 2 Pro
15 March 2020
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card border-light">
<img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<div class="media d-flex align-items-center justify-content-between">
<div class="post-group">
<a href="./profile.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
<img class="avatar-sm mr-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="avatar"> Jo J. Moore
</a>
</div>
<div class="d-flex align-items-center">
<span class="small"><i class="far fa-calendar-alt mr-2"></i>15 March 2020</span>
</div>
</div>
<h5 class="card-title mt-4">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
</div>
</div>Blog card 3 Pro
15 March 2020
We partnered up with Ildiesign
With supporting text below as a natural lead-in to additional content.
Read More<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card text-center border-light">
<div class="card-header">
<span class="card-text small"><i class="far fa-calendar-alt mr-2"></i>15 March 2020</span>
</div>
<div class="card-body">
<h5 class="card-title">We partnered up with Ildiesign</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
<div class="card-footer">
<a href="./profile.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
<img class="avatar-sm mr-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="avatar"> Jo J. Moore
</a>
</div>
</div>
</div>
</div>Blog card 4 Pro
We partnered up with Ildiesign
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
15 March 2020
21
<div class="row">
<div class="col-12 mb-5 mb-lg-0">
<div class="card border-light">
<div class="row no-gutters align-items-center">
<div class="col-md-4">
<img src="../../assets/img/blog/image-4.jpg" class="card-img rounded-left" alt="image">
</div>
<div class="col-md-8">
<div class="card-body">
<a href="#"><h5 class="card-title">We partnered up with Ildiesign</h5></a>
<p class="card-text mb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<span class="card-text small"><i class="far fa-calendar-alt mr-2"></i>15 March 2020</span>
<a href="#" class="small"><i class="far fa-comments mr-2"></i>21</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Blog card 5 Pro
<div class="row">
<div class="col-12 col-xl-9 mb-5 mb-lg-0">
<div class="card overlay-secondary overflow-hidden text-white">
<img src="../../assets/img/blog/image-2.jpg" class="card-img rounded" alt="image">
<div class="card-img-overlay p-5">
<h4 class="card-title mb-3">We partnered up with Ildiesign</h4>
<span class="card-text small"><i class="far fa-calendar-alt mr-2"></i>15 March 2020</span>
<p class="card-text mt-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex align-items-center">
<a href="#" class="btn btn-tertiary btn-sm mr-3">Read More</a>
<a href="#" class="small"><i class="far fa-comments mr-2"></i>21</a>
</div>
</div>
</div>
</div>
</div>Blog card 6 Pro
List of public corporations by market capitalization
All of the world's 10 largest companies as measured by market capitalization are American. Market capitalization is the total value of a company's entire purchased shares of stock. While these companies have their roots in the U.S. and are the embodiment of ...
<div class="row">
<div class="col-12 col-xl-9 mb-5 mb-lg-0">
<div class="card border-light p-2 p-md-4">
<div class="card-header rounded">
<div class="post-meta">
<div class="media d-flex align-items-center justify-content-between">
<div class="post-group">
<a href="./profile.html" data-toggle="tooltip" data-placement="top" title="23k followers" data-original-title="23k followers">
<img class="avatar-sm mr-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="avatar"> techhub
</a>
</div>
<div class="d-flex align-items-center">
<div class="author-name text-secondary font-small mr-4 d-none d-lg-block">
Posted by <a href="./profile.html" class="mr-2">roberttanislav</a>5 hours ago
</div>
<div class="btn-group">
<button class="btn btn-link dropdown-toggle dropdown-toggle-split m-0 p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon icon-sm">
<i class="fas fa-ellipsis-h icon-secondary"></i>
</span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="fas fa-edit mr-2"></i>
Edit post</a>
<a class="dropdown-item text-danger" href="#"><i class="fa fa-trash mr-2"
aria-hidden="true"></i>
Delete post</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body py-4 px-0">
<a href="./single-post-left-sidebar.html">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded" alt="image">
<h4 class="my-4">List of public corporations by market capitalization</h4>
</a>
<p class="card-text mb-4">All of the world's 10 largest companies as measured by market capitalization are American. Market capitalization is the total value of a company's entire purchased shares of stock. While these companies have their roots
in the U.S. and are the embodiment of ... </p>
</div>
<div class="card-footer bg-white pt-0 px-0">
<div class="d-flex flex-wrap flex-lg-nowrap align-items-center justify-content-between">
<div class="post-details mb-3 mb-lg-0">
<button class="btn btn-sm btn-primary animate-hover mr-2">
<span class="fas fa-arrow-up mr-2 animate-up-2"></span>
4
</button>
<button class="btn btn-sm btn-danger animate-hover">
<span class="fas fa-arrow-down mr-2 animate-down-2"></span>
1
</button>
</div>
<div class="post-meta">
<a class="text-dark mr-3" href="#"><i class="far fa-comments mr-2"></i>33.7k</a>
<button class="btn mr-3 btn-link text-primary"><i class="fas fa-share mr-2"></i>Share</button>
<button class="btn btn-secondary"><i class="far fa-save mr-2"></i>Save</button>
</div>
</div>
</div>
</div>
</div>
</div>Profile cards
Use the following examples of cards for indicating team members and profiles:
Profile card 1
Neil D. Sims
New York, USANeil drives the technical strategy of the platform and brand.
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card overflow-hidden">
<div class="position-relative">
<img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top" alt="image">
</div>
<div class="card-body position-relative mt-n6 mx-2 bg-white text-center rounded border border-light">
<h5 class="card-title">Neil D. Sims</h5>
<span class="text-gray"><i class="fas fa-map-marker-alt mr-2"></i>New York,
USA</span>
<p class="mt-3">Neil drives the technical strategy of the platform and brand.</p>
<div class="btn-group">
<button class="btn btn-secondary btn-icon">
<span class="mr-1"><i class="far fa-user"></i></span>
Follow
</button>
<button class="btn btn-primary">
<i class="far fa-envelope"></i>
</button>
</div>
</div>
</div>
</div>
</div>Profile card 2 Pro
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card border-light">
<img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-top" alt="profile-image">
<div class="card-body">
<h5 class="card-title mb-2">Bonnie M. Green</h5>
<span class="card-subtitle text-gray font-weight-normal">Web publications designer</span>
<p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Profile card 3 Pro
<div class="row mt-6">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card border-light text-center">
<div class="profile-thumbnail mx-auto mt-n6">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-circle border-0" alt="image">
</div>
<div class="card-body">
<h5 class="card-title mb-2">Jose D. Leos</h5>
<span class="card-subtitle text-gray font-weight-normal">Web Developer</span>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
<p class="card-text my-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>Profile card 4 Pro
Joseph A. Garth
FollowSome quick example text to build on the card title and make up the bulk of the card's content.
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card text-center border-light">
<div class="profile-cover rounded-top" data-background="../../assets/img/team/cover-profile.jpg"></div>
<div class="profile-thumbnail small-thumbnail mt-n6 mx-auto">
<img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded-circle border-white" alt="image">
</div>
<div class="card-body">
<h5 class="card-title mb-0">Joseph A. Garth</h5>
<a class="btn btn-sm btn-secondary my-3" href="#">
<span class="fas fa-user-plus mr-1"></span> Follow
</a>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex justify-content-center mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Profile card 5 Pro
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card text-center border-light">
<img class="profile-thumbnail small-thumbnail rounded mx-auto mt-4" src="../../assets/img/team/profile-picture-1.jpg" alt="image">
<div class="card-body">
<h5 class="card-title">Christopher M. Wood</h5>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
<div class="card-footer bg-white p-0">
<a class="btn btn-block btn-primary animate-up-1 rounded-bottom" href="#">
<span class="far fa-envelope mr-2"></span> Send a Message
</a>
</div>
</div>
</div>
</div>Profile card 6 Pro
Robert Tanislav
UI/UX Designer
Some quick example text to build on the card title and make up the bulk of the card's content.
Follow<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="rotating-card">
<div class="card border-light card-rotate p-5">
<div class="front text-center">
<div class="profile-thumbnail small-thumbnail mx-auto mt-4">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-circle border-primary" alt="image">
</div>
<div class="card-body">
<h4 class="card-title">Robert Tanislav</h4>
</div>
</div>
<div class="back text-center">
<div class="card-body p-5">
<h6 class="card-subtitle">UI/UX Designer</h6>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-sm btn-secondary" href="#">
<span class="fas fa-user-plus mr-1"></span> Follow
</a>
</div>
</div>
</div>
</div>
</div>
</div>Profile card 7 Pro
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card text-center">
<div class="profile-thumbnail mx-auto">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-circle shadow border-0" alt="image">
</div>
<div class="card-body">
<h5 class="card-title mb-2">Christopher M. Wood</h5>
<span class="card-subtitle text-gray font-weight-normal">Web Developer</span>
<ul class="list-unstyled d-flex justify-content-center mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-sm icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-sm icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-sm icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-sm icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Profile card 8 Pro
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card text-center">
<div class="card-header bg-white">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded shadow border-0" alt="image">
</div>
<div class="card-body">
<span class="card-subtitle text-gray font-weight-normal">Web Developer</span>
<h4 class="card-title mt-2">Christopher M. Wood</h4>
<ul class="list-unstyled d-flex justify-content-center mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-sm icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-sm icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-sm icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-sm icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Pricing cards
Use the following examples of cards to indicate pricing options:
Pricing card 1
Basic
$19 / month- 1 free domain
- Storage space: 5GB
- 100k monthly visitors
- One-click staging site
- Search engine wizard
- Community support
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card border-light text-center">
<!-- Header -->
<div class="card-header bg-white p-3">
<h3 class="text-primary mb-4">Basic</h3>
<span class="d-block">
<span class="display-1 text-dark font-weight-bold">
<span class="align-top font-medium">$</span>19
</span>
<span class="d-block text-gray font-small">/ month</span>
</span>
</div>
<!-- End Header -->
<!-- Content -->
<div class="card-body">
<ul class="list-unstyled mb-4">
<li class="list-item pb-3"><strong>1</strong> free domain</li>
<li class="list-item pb-3">Storage space: <strong>5GB</strong></li>
<li class="list-item pb-3"><strong>100k</strong> monthly visitors</li>
<li class="list-item pb-3">One-click staging site</li>
<li class="list-item pb-3">Search engine wizard </li>
<li class="list-item pb-3">Community support</li>
</ul>
<button type="button" class="btn btn-primary btn-block animate-up-1">Start
Starter</button>
</div>
<!-- End Content -->
</div>
</div>
</div>Pricing card 2 Pro
$19
/ month
Faster sites deliver better business results for your clients.
- Full Support No
- Storage 50 GB
- Monthly Visitors 400k
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card border-light p-4">
<!-- Header -->
<div class="card-header border-bottom bg-white text-center">
<span class="d-block">
<span class="display-1 text-primary font-weight-bold">
<span class="align-top font-medium">$</span>19
</span>
<span class="text-gray font-small">/ month</span>
</span>
</div>
<!-- End Header -->
<!-- Content -->
<div class="card-body">
<p>Faster sites deliver better business results for your clients.</p>
<ul class="list-unstyled mb-4">
<li class="list-item pb-2"><strong>Full Support</strong> No</li>
<li class="list-item pb-2"><strong>Storage</strong> 50 GB</li>
<li class="list-item"><strong>Monthly Visitors</strong> 400k</li>
</ul>
<button type="button" class="btn btn-outline-primary btn-block">
<span class="fas fa-cart-plus mr-3"></span>Add to Cart
</button>
</div>
<!-- End Content -->
</div>
</div>
</div>Pricing card 3 Pro
19$
/ month
- Community support
- 15 GB SSD storage
- One-click staging site
- 10 E-mail accounts
- 2 Bootstrap Themes
<div class="row">
<div class="col-12 col-sm-10 col-xl-6 mb-5 mb-lg-0">
<div class="card bg-secondary border-light">
<!-- Header -->
<div class="card-header bg-primary text-white border-primary p-4">
<span class="icon mb-4"><span class="far fa-star"></span></span>
<span class="d-block">
<span class="display-1 font-weight-bold">
19<span class="align-baseline font-medium">$</span>
</span>
<span class="font-small">/ month</span>
</span>
</div>
<!-- End Header -->
<!-- Content -->
<div class="card-body text-white p-4">
<ul class="list-group list-group-flush price-list mb-4">
<li class="list-group-item bg-secondary border-primary"><span class="far fa-lightbulb mr-2"></span>Community support</li>
<li class="list-group-item bg-secondary border-primary"><span class="far fa-hdd mr-2"></span>15 GB SSD storage</li>
<li class="list-group-item bg-secondary border-primary"><span class="far fa-paper-plane mr-2"></span>One-click staging site</li>
<li class="list-group-item bg-secondary border-primary"><span class="far fa-envelope mr-2"></span>10 E-mail accounts</li>
<li class="list-group-item bg-secondary border-0"><span class="far fa-id-badge mr-2"></span>2 Bootstrap Themes</li>
</ul>
<button type="button" class="btn btn-white btn-block text-primary animate-up-2">Add to
Cart</button>
</div>
<!-- End Content -->
</div>
</div>
</div>Pricing card 4 Pro
Basic
$19- Community support
- 15 GB SSD storage
- One-click staging site
- 10 E-mail accounts
- 2 Bootstrap Themes
<div class="row">
<div class="col-12 col-lg-12 mb-5 mb-lg-0">
<div class="card border-light">
<div class="row no-gutters align-items-center">
<div class="col-sm-5">
<!-- Header -->
<div class="card-header bg-white text-center pb-0">
<h3 class="text-primary mb-0">Basic</h3>
<span class="d-block my-3">
<span class="display-2 font-weight-bold"><span class="align-baseline font-medium">$</span>19
</span>
</span>
<button type="button" class="btn btn-sm btn-outline-primary d-none d-sm-inline btn-block">Add to Cart</button>
</div>
</div>
<div class="col-sm-7">
<!-- Content -->
<div class="card-body pb-0">
<ul class="list-group list-group-flush price-list mb-4">
<li class="list-group-item"><span class="far fa-lightbulb"></span>Community support</li>
<li class="list-group-item"><span class="far fa-hdd"></span>15 GB SSD storage</li>
<li class="list-group-item"><span class="far fa-paper-plane"></span>One-click staging site</li>
<li class="list-group-item"><span class="far fa-envelope"></span>10 E-mail accounts</li>
<li class="list-group-item border-0"><span class="far fa-id-badge"></span>2 Bootstrap Themes</li>
</ul>
</div>
<!-- End Content -->
</div>
</div>
</div>
</div>
</div>Pricing card 5 Pro
Regular
$39 / monthSo, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.
<div class="row">
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
<div class="card border-light p-0">
<!-- Header -->
<div class="card-header">
<h4 class="text-secondary mb-3">Regular</h4>
<span class="d-block">
<span class="display-1 text-secondary font-weight-bold">
<span class="align-top font-medium">$</span>39
</span>
<span class="d-block font-small">/ month</span>
</span>
</div>
<!-- End Header -->
<!-- Content -->
<div class="card-body p-3">
<p class="p-3">So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.</p>
</div>
<!-- End Content -->
<div class="card-footer bg-white p-0">
<button type="button" class="btn btn-secondary btn-block rounded-bottom">Add to Cart</button>
</div>
</div>
</div>
</div>Call to action
The following examples can be used for call to actions sections, such as for users to sign up to a newsletter, try out a free demo of a product:
Newsletter subscribe
Get the most out of your network.
Contact management designed for teams and individuals
<div class="row">
<div class="col-12">
<div class="card border-light px-4 py-5 text-center">
<div class="card-header bg-white pb-0">
<h2 class="h1 mb-3">Get the most out of your network.</h2>
</div>
<div class="card-body pt-2 px-0 px-lg-7">
<p class="mb-5 lead">
Contact management designed for teams and individuals
</p>
<div class="row justify-content-center">
<div class="col-12">
<div class="form-group">
<div class="d-flex flex-row justify-content-center">
<div class="input-group">
<input class="form-control form-control-xl border-light" placeholder="Your email address" type="email">
<div class="input-group-prepend">
<button type="submit" class="btn btn-primary rounded-right">Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Contact Pro
Get in touch
If you need any help with our products or services, choose one of the following ways to contact us.
<div class="row">
<div class="col-12">
<div class="card border-light">
<div class="card-body px-5 py-5 text-center text-md-left">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="mb-3">Get in touch</h2>
<p class="mb-0">
If you need any help with our products or services, choose one of the following ways to contact us.
</p>
</div>
<div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
<a href="#" class="btn btn-primary">
<span class="mr-1">
<i class="fas fa-headphones"></i>
</span>
Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</div>Careers Pro
Become one of us
Do you want to join our team and work remotely from anywhere you'd like? We can’t wait to hear from you!
Check Careers
<div class="row">
<div class="col-12">
<div class="card border-light px-4 py-1">
<div class="card-body text-center text-md-left">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="mb-3">Become one of us</h2>
<p class="mb-4">
Do you want to join our team and work remotely from anywhere you'd like? We can’t wait to hear from you!
</p>
<a href="#" class="btn btn-primary">
<span class="mr-1">
<i class="fas fa-file-invoice"></i>
</span>
Check Careers
</a>
</div>
<div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
<img src="../../assets/img/illustrations/reading-side.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>Download Pro
Ready to change your life?
Download Pixel today and take the first step to organize your routine, achieve your personal goals and reflect on your life.
Download on the
App Store
Download on the
Google Play
<div class="row">
<div class="col-12">
<div class="card border-light px-4 py-5 text-center">
<div class="card-header bg-white pb-0">
<h2 class="h1 mb-3">Ready to change your life?</h2>
</div>
<div class="card-body pt-2 px-0 px-lg-7">
<p class="mb-5 lead">
Download Pixel today and take the first step to organize your routine, achieve your personal goals and reflect on your life.
</p>
<a class="btn btn-lg btn-primary text-white mr-md-3 mb-3 mb-sm-0 animate-up-1" href="#">
<div class="d-flex align-items-center">
<span class="icon icon-lg mr-3"><i class="fab fa-apple"></i></span>
<div class="d-block">
<small class="font-small">Download on the</small>
<div class="h5 mb-0">App Store</div>
</div>
</div>
</a>
<a class="btn btn-lg btn-primary text-white animate-up-1" href="#">
<div class="d-flex align-items-center">
<span class="icon icon-lg mr-3"><i class="fab fa-google-play"></i></span>
<div class="d-block">
<small class="font-small">Download on the</small>
<div class="h5 mb-0">Google Play</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>Authentication Pro
Use the following cards for sign in, sign up and remember password sections:
Sign in
Sign in to our platform
<div class="row">
<div class="col-12 col-sm-10 col-xl-6">
<div class="card border-light">
<div class="card-header text-center">
<h2 class="mb-0 h5">Sign in to our platform</h2>
</div>
<div class="card-body">
<form action="#" class="mt-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="email" class="form-control" id="input-email-login"
placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input class="form-control" placeholder="Password" type="password" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-eye"></i>
</span>
</div>
</div>
<div class="d-block d-sm-flex justify-content-between align-items-center mt-2">
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign"></span>
Remember me
</label>
</div>
<div><a href="./forgot-password.html" class="small text-right">Lost password?</a></div>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-block btn-primary">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="font-weight-normal">or login with</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn mr-2 btn-icon-only btn-pill btn-twitter" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-facebook" type="button">
<span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-github" type="button">
<span class="btn-inner-icon"><i class="fab fa-github"></i></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="font-weight-normal">
Not registered?
<a href="./sign-up.html" class="font-weight-bold">Create account</a>
</span>
</div>
</div>
</div>
</div>
</div>Sign in 2
Sign in to our platform
<div class="row">
<div class="col-12 col-sm-10 col-xl-6">
<div class="card border-light bg-primary text-white">
<div class="card-header bg-secondary text-white text-center">
<h2 class="mb-0 h5">Sign in to our platform</h2>
</div>
<div class="card-body">
<form action="#" class="mt-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="email" class="form-control" id="input-email-login-2"
placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input class="form-control" placeholder="Password" type="password" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-eye"></i>
</span>
</div>
</div>
<div class="d-block d-sm-flex justify-content-between align-items-center mt-2">
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign"></span>
Remember me
</label>
</div>
<div><a href="./forgot-password.html" class="small text-right">Lost password?</a></div>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-block btn-white">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="font-weight-normal">or login with</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-white" type="button">
<span class="btn-inner-icon"><i class="fab fa-github"></i></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="font-weight-normal">
Not registered?
<a href="./sign-up.html" class="font-weight-bold">Create account</a>
</span>
</div>
</div>
</div>
</div>
</div>Sign up
Create Account
Get started with your free account<div class="row">
<div class="col-12 col-sm-10 col-xl-6">
<div class="card border-light">
<div class="card-header text-center">
<h2 class="mb-0 h5">Create Account</h2>
<span>Get started with your free account</span>
</div>
<div class="card-body">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="email" class="form-control" id="input-email-login-3"
placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input class="form-control" placeholder="Password" type="password" required>
<div class="input-group-append">
<span class="input-group-text">
<i class="far fa-eye"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-unlock-alt"></i></span>
</div>
<input type="password" class="form-control" id="input-password-confirm-login"
placeholder="Confirm password" required>
</div>
<div class="d-block d-sm-flex justify-content-between align-items-center mt-2">
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign"></span>
I agree to the <a href="./terms.html">terms and conditions</a>
</label>
</div>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-block btn-primary">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="font-weight-normal">or</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn mr-2 btn-icon-only btn-pill btn-twitter" type="button">
<span class="btn-inner-icon"><i class="fab fa-twitter"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-facebook" type="button">
<span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span>
</button>
<button class="btn mr-2 btn-icon-only btn-pill btn-github" type="button">
<span class="btn-inner-icon"><i class="fab fa-github"></i></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="font-weight-normal">
Already have an account?
<a href="./sign-in.html" class="font-weight-bold">Login here</a>
</span>
</div>
</div>
</div>
</div>
</div>