Cards
Use the card components to show instances of users, posts, and information in general
Blog cards
Use the following card component for blog items:
![Themesberg office](../../assets/img/blog/image-1.jpg)
We partnered up with Google
Some quick example text to build on the card title and make up the bulk of the card's content.
Learn More<div>
<div class="col-12 col-md-6">
<div class="card shadow">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="Themesberg office">
<div class="card-body">
<span class="h6 icon-tertiary small"><span class="fas fa-medal me-2"></span>Awards</span>
<h3 class="h5 card-title mt-3">We partnered up with Google</h3>
<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">Learn More</a>
</div>
</div>
</div>
</div>
Author
Use this blog card component to also show the author of the post:
![Designer desk](../../assets/img/blog/image-2.jpg)
We partnered up with Google
Some quick example text to build on the card title and make up the bulk of the card's content.
Learn More<div>
<div class="col-12 col-md-6">
<div class="card shadow">
<img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded-top" alt="Designer desk">
<div class="card-body">
<div class="media d-flex align-items-center justify-content-between">
<div class="post-group">
<a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
<img class="avatar-sm me-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="Jo portrait"> Jo J. Moore
</a>
</div>
<div class="d-flex align-items-center">
<span class="small"><span class="far fa-calendar-alt me-2"></span>15 March 2021</span>
</div>
</div>
<h3 class="h5 card-title mt-4">We partnered up with Google</h3>
<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">Learn More</a>
</div>
</div>
</div>
</div>
Text only
The following card can be used for blog items without a featured image:
We partnered up with Google
With supporting text below as a natural lead-in to additional content.
Learn More<div>
<div class="col-12 col-md-6">
<div class="card shadow text-center">
<div class="card-header bg-white border-0 pb-0">
<span class="card-text small"><span class="far fa-calendar-alt me-2"></span>15 March 2021</span>
</div>
<div class="card-body">
<h3 class="h5 card-title">We partnered up with Google</h3>
<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">Learn More</a>
</div>
<div class="card-footer bg-white border-0">
<a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
<img class="avatar-sm me-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="Moore avatar"> Jo J. Moore
</a>
</div>
</div>
</div>
</div>
Vertical
The following card component is a vertical blog item:
![Artist desk](../../assets/img/blog/image-4.jpg)
We partnered up with Google
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div>
<div class="col-12 col-md-10">
<div class="card shadow">
<div class="row g-0 align-items-center">
<div class="col-md-4">
<img src="../../assets/img/blog/image-4.jpg" class="card-img rounded-start" alt="Artist desk">
</div>
<div class="col-md-8">
<div class="card-body">
<a href="#"><h3 class="h5 card-title">We partnered up with Google</h3></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"><span class="far fa-calendar-alt me-2"></span>15 March 2021</span>
<a href="#" class="small"><span class="far fa-comments me-2"></span>21</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Vertical text only
Use this component to show a text only blog item:
We partnered up with Google
15 March 2021This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div>
<div class="col-12 col-md-10">
<div class="card bg-secondary text-white">
<div class="card-body p-5">
<h3 class="h4 card-title mb-3">We partnered up with Google</h3>
<span class="card-text small"><span class="far fa-calendar-alt me-2"></span>15 March 2021</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 me-3">Learn More</a>
<a href="#" class="small"><span class="far fa-comments me-2"></span>21</a>
</div>
</div>
</div>
</div>
</div>
Advanced
This blog item card is the most advanced, having also a like and unlike functionality and a few more action buttons:
![Webdeveloper desk](../../assets/img/blog/image-1.jpg)
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>
<div class="col-12 col-md-10">
<div class="card shadow p-2 p-md-4">
<div class="card-header border-0 bg-white p-0">
<div class="post-meta">
<div class="media d-flex align-items-center justify-content-between">
<div class="post-group">
<a href="#" data-toggle="tooltip" data-placement="top" title="23k followers" data-original-title="23k followers">
<img class="avatar-sm me-2 img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="Jose portrait"> posted by Jose Leos
</a>
</div>
<div class="d-flex align-items-center">
<div class="btn-group">
<button class="btn btn-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="icon icon-sm">
<span class="fas fa-ellipsis-h icon-secondary"></span>
</span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu py-0">
<a class="dropdown-item rounded-top" href="#"><span class="fas fa-edit me-2"></span>Edit post</a>
<a class="dropdown-item text-danger rounded-bottom" href="#"><span class="fa fa-trash me-2" aria-hidden="true"></span>Delete post</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body py-4 px-0">
<a href="#">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded mb-3" alt="Webdeveloper desk">
<h3 class="h4">List of public corporations by market capitalization</h3>
</a>
<p class="card-text mb-2">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 pb-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 me-2">
<span class="fas fa-arrow-up me-2 animate-up-2"></span>
4
</button>
<button class="btn btn-sm btn-danger animate-hover">
<span class="fas fa-arrow-down me-2 animate-down-2"></span>
1
</button>
</div>
<div class="post-meta">
<a class="text-dark me-3" href="#"><span class="far fa-comments me-2"></span>33.7k</a>
<button class="btn me-3 btn-link text-primary"><span class="fas fa-share me-2"></span>Share</button>
<button class="btn btn-secondary"><span class="far fa-save me-2"></span>Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Profile cards
Use the following card to show information about a user profile:
![Neil Portrait](../../assets/img/team/profile-picture-1.jpg)
Neil D. Sims
New York, USANeil drives the technical strategy of the platform and brand.
<div class="row">
<div class="col-12 col-md-7">
<div class="card border-0 overflow-hidden">
<div class="position-relative">
<img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top" alt="Neil Portrait">
</div>
<div class="card-body position-relative mt-n6 mx-2 bg-white border border-gray-300 text-center rounded">
<h3 class="h5 card-title">Neil D. Sims</h3>
<span class="text-gray"><span class="fas fa-map-marker-alt me-2"></span>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="me-1"><span class="far fa-user"></span></span>
Follow
</button>
<button class="btn btn-primary" aria-label="mesage button" title="message button">
<span aria-hidden="true" class="far fa-envelope"></span>
</button>
</div>
</div>
</div>
</div>
</div>
Alternative
This card component is an alternative style to the previous cards:
<div class="row">
<div class="col-12 col-md-7 mt-6">
<div class="card shadow 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="Jose Portrait">
</div>
<div class="card-body">
<h3 class="h5 card-title mb-2">Jose D. Leos</h3>
<span class="card-subtitle text-gray fw-normal">Web Developer</span>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3 text-decoration-none">
<span class="fab fa-dribbble"></span>
</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>
Social profile
Use this card component to also show the social media profile of the user:
<div class="row">
<div class="col-12 col-md-7">
<div class="card shadow">
<img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-top" alt="Bonnie Portrait">
<div class="card-body">
<h3 class="h5 card-title mb-2">Bonnie M. Green</h3>
<span class="card-subtitle text-gray fw-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" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble text-decoration-none">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Follow
Use this card to add the “follow” functionality to a user profile:
![Joseph Portrait](../../assets/img/team/profile-picture-4.jpg)
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-md-7">
<div class="card text-center border-gray-300">
<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="Joseph Portrait">
</div>
<div class="card-body">
<h3 class="h5 card-title mb-0">Joseph A. Garth</h3>
<a class="btn btn-sm btn-secondary my-3" href="#">
<span class="fas fa-user-plus me-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" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3 text-decoration-none">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Message
Use this card to add the “send message” functionality to a user profile:
<div class="row">
<div class="col-12 col-md-7">
<div class="card text-center border-gray-300">
<img class="profile-thumbnail small-thumbnail rounded mx-auto mt-4" src="../../assets/img/team/profile-picture-1.jpg" alt="Christopher Portrait">
<div class="card-body">
<h3 class="h5 card-title">Christopher Wood</h3>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3 text-decoration-none">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
<div class="card-footer bg-white border-0 p-0">
<div class="d-grid">
<a class="btn btn-primary rounded-0 rounded-bottom" href="#">
<span class="far fa-envelope me-2"></span> Send a Message
</a>
</div>
</div>
</div>
</div>
</div>
Flip on hover
Use the rotating-card
class to show extra information for the card when hovering over it. The content inside the back
element will be shown when the card is being hovered on.
![Frank Portrait](../../assets/img/team/profile-picture-2.jpg)
Frank Shears
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-md-7">
<div class="rotating-card">
<div class="card shadow 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="Frank Portrait">
</div>
<div class="card-body">
<h3 class="h4 card-title">Frank Shears</h3>
</div>
</div>
<div class="back text-center">
<div class="card-body p-5">
<span class="h6 card-subtitle">UI/UX Designer</span>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3 text-decoration-none">
<span class="fab fa-dribbble"></span>
</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 me-1"></span> Follow
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Clean
This is a very clean version of a profile card:
<div class="row">
<div class="col-12 col-md-7">
<div class="card border-0 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="Benjamin Portrait">
</div>
<div class="card-body">
<h3 class="h5 card-title mb-2">Benjamin West</h3>
<span class="card-subtitle text-gray fw-normal">Web Developer</span>
<ul class="list-unstyled d-flex justify-content-center mt-3 mb-0">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3 text-decoration-none">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Clean style 2
<div class="row">
<div class="col-12 col-md-7">
<div class="card border-0 text-center">
<div class="card-header border-0 bg-white">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded shadow border-0" alt="James Portrait">
</div>
<div class="card-body">
<span class="card-subtitle text-gray fw-normal">Web Developer</span>
<h3 class="h4 card-title mt-2">James Desai</h3>
<ul class="list-unstyled d-flex justify-content-center mt-3 mb-0">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3 text-decoration-none">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3 text-decoration-none">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3 text-decoration-none">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3 text-decoration-none">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Pricing cards
You can use these card components to show the pricing for your business:
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-lg-7">
<div class="card shadow text-center">
<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 fw-bold">
<span class="align-top font-medium">$</span>19
</span>
<span class="d-block text-gray font-small">/ month</span>
</span>
</div>
<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>
<div class="d-grid"><a href="#" class="btn btn-primary animate-up-1">Purchase now</a></div>
</div>
</div>
</div>
</div>
Add to cart
Use this cart for the add to cart functionality:
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-lg-7">
<div class="card shadow p-4">
<div class="card-header border-bottom bg-white text-center">
<span class="d-block">
<span class="display-1 text-primary fw-bold">
<span class="align-top font-medium">$</span>19
</span>
<span class="text-gray font-small">/ month</span>
</span>
</div>
<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>
<div class="d-grid">
<a href="#" class="btn btn-outline-primary animate-up-1"><span class="fas fa-cart-plus me-3"></span>Add to Cart</a>
</div>
</button>
</div>
</div>
</div>
</div>
Dark version
Use this alternative dark version for the pricing card:
- 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-7">
<div class="card bg-secondary border-gray-300">
<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 fw-bold">
19<span class="align-baseline font-medium">$</span>
</span>
<span class="font-small">/ month</span>
</span>
</div>
<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"></span>Community support</li>
<li class="list-group-item bg-secondary border-primary"><span class="far fa-hdd"></span>15 GB SSD storage</li>
<li class="list-group-item bg-secondary border-primary"><span class="far fa-paper-plane"></span>One-click staging site</li>
<li class="list-group-item bg-secondary border-primary"><span class="far fa-envelope"></span>10 E-mail accounts</li>
<li class="list-group-item bg-secondary border-0"><span class="far fa-id-badge"></span>2 Bootstrap Themes</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-white animate-up-1">Purchase now</a>
</div>
</div>
</div>
</div>
</div>
Vertical
Use this vertical card version for the pricing feature:
- 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-10">
<div class="card shadow">
<div class="row g-0 align-items-center">
<div class="col-sm-5">
<div class="card-header border-0 bg-white text-center pb-0">
<h3 class="text-primary mb-0">Basic</h3>
<span class="d-block my-3">
<span class="display-2 fw-bold"><span class="align-baseline font-medium">$</span>19
</span>
</span>
<div class="d-grid">
<a href="#" class="btn btn-sm btn-outline-primary animate-up-1">Add to Cart</a>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="card-body pb-0">
<ul class="list-group list-group-flush price-list mb-4">
<li class="list-group-item border-0"><span class="far fa-lightbulb"></span>Community support</li>
<li class="list-group-item border-0"><span class="far fa-hdd"></span>15 GB SSD storage</li>
<li class="list-group-item border-0"><span class="far fa-paper-plane"></span>One-click staging site</li>
<li class="list-group-item border-0"><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>
</div>
</div>
</div>
</div>
</div>
Vertical alternative
Here’s another vertical alternative pricing card:
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-10">
<div class="card shadow p-0">
<div class="card-header bg-white">
<h4 class="text-secondary mb-3">Regular</h4>
<span class="d-block">
<span class="display-1 text-secondary fw-bold">
<span class="align-top font-medium">$</span>39
</span>
<span class="font-small">/ month</span>
</span>
</div>
<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>
<div class="card-footer bg-white border-0 p-0">
<div class="d-grid">
<a href="#" class="btn btn-primary rounded-0 rounded-bottom">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
Call to action
Use these cards as a section of a page to create a “Call to action” incentive.
Contact
Get in touch
If you need any help with our products or services, choose one of the following ways to contact us.
<div class="card shadow">
<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="me-1">
<span class="fas fa-headphones"></span>
</span>
Contact Us
</a>
</div>
</div>
</div>
</div>
Illustration
Use this version to show an illustration or an image alongside the CTA button:
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="card shadow px-4 py-1 mb-6">
<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="me-1">
<span class="fas fa-file-invoice"></span>
</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>
App store
Use this card to show the download links to the App store or Google play store for your mobile application:
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.
<div class="card shadow px-4 py-5 text-center mb-5">
<div class="card-header bg-white border-0 pb-0">
<h2 class="h1 mb-3">Ready to change your life?</h2>
</div>
<div class="card-body pt-2 px-0">
<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 me-md-3 mb-3 mb-sm-0 animate-up-1" href="#">
<div class="d-flex align-items-center">
<span class="icon icon-lg me-3"><span class="fab fa-apple"></span></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 me-3"><span class="fab fa-google-play"></span></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>
Subscribe
Use this card to convince your visitors to subscribe to a newsletter:
Get the most out of your network.
Contact management designed for teams and individuals
<div class="card shadow px-4 py-5">
<div class="card-header bg-white border-0 pb-0 text-center">
<h2 class="mb-3">Get the most out of your network.</h2>
<p class="mb-4 lead">
Contact management designed for teams and individuals
</p>
</div>
<div class="card-body pt-2">
<div class="row justify-content-center">
<div class="col-12 col-md-10">
<div class="form-group">
<div class="input-group">
<input type="email" class="form-control form-control-lg rounded-start" placeholder="[email protected]" required>
<button class="btn btn-tertiary" type="button"><span class="icon icon-xs me-1"><span class="fas fa-search"></span></span>Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Authentication
Lastly, you can use these cards for the registration or authentication of your users.
Register
Create Account
<div class="row">
<div class="col-12 col-lg-9">
<div class="card shadow p-4">
<div class="card-header border-0 bg-white text-center pb-0">
<h2 class="mb-0 h5">Create Account</h2>
</div>
<div class="card-body">
<form action="#">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputEmailCard3">Your Email</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3"><span class="fas fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="[email protected]" id="exampleInputEmailCard3" aria-describedby="exampleInputEmailCard3">
</div>
</div>
<!-- End of Form -->
<div class="form-group">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputPasswordCard4">Your Password</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon4"><span class="fas fa-unlock-alt"></span></span>
<input type="password" placeholder="Password" class="form-control" id="exampleInputPasswordCard4" aria-describedby="exampleInputPasswordCard4">
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputPasswordCard5">Confirm Password</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon5"><span class="fas fa-unlock-alt"></span></span>
<input type="password" placeholder="Confirm Password" class="form-control" id="exampleInputPasswordCard5" aria-describedby="exampleInputPasswordCard5">
</div>
</div>
<!-- End of Form -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck6">
<label class="form-check-label" for="defaultCheck6">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="fw-normal">or</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn btn-icon-only btn-pill btn-outline-light text-facebook me-2" type="button" aria-label="facebook button" title="facebook button">
<span aria-hidden="true" class="fab fa-facebook-f"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-light text-twitter me-2" type="button" aria-label="twitter button" title="twitter button">
<span aria-hidden="true" class="fab fa-twitter"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-light text-facebook" type="button" aria-label="github button" title="github button">
<span aria-hidden="true" class="fab fa-github"></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="fw-normal">
Already have an account?
<a href="#" class="fw-bold">Login here</a>
</span>
</div>
</div>
</div>
</div>
</div>
Login
Sign in to our platform
Login here using your username and password<div class="row">
<div class="col-12 col-lg-9">
<div class="card shadow p-4">
<div class="card-header border-0 bg-white text-center pb-0">
<h2 class="h4">Sign in to our platform</h2>
<span>Login here using your username and password</span>
</div>
<div class="card-body">
<form action="#" class="mt-4">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputEmailCard1">Your Email</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon1"><span class="fas fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="[email protected]" id="exampleInputEmailCard1" aria-describedby="exampleInputEmailCard1">
</div>
</div>
<!-- End of Form -->
<div class="form-group">
<!-- Form -->
<div class="form-group mb-4">
<label for="exampleInputPasswordCard1">Your Password</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-unlock-alt"></span></span>
<input type="password" placeholder="Password" class="form-control" id="exampleInputPasswordCard1" aria-describedby="exampleInputPasswordCard1">
</div>
</div>
<!-- End of Form -->
<div class="d-block d-sm-flex justify-content-between align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck5">
<label class="form-check-label mb-0" for="defaultCheck5">
Remember me
</label>
</div>
<div><a href="#" class="small text-right">Lost password?</a></div>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
<div class="mt-3 mb-4 text-center">
<span class="fw-normal">or login with</span>
</div>
<div class="btn-wrapper my-4 text-center">
<button class="btn btn-icon-only btn-pill btn-outline-light text-facebook me-2" type="button" aria-label="facebook button" title="facebook button">
<span aria-hidden="true" class="fab fa-facebook-f"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-light text-twitter me-2" type="button" aria-label="twitter button" title="twitter button">
<span aria-hidden="true" class="fab fa-twitter"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-outline-light text-facebook" type="button" aria-label="github button" title="github button">
<span aria-hidden="true" class="fab fa-github"></span>
</button>
</div>
<div class="d-block d-sm-flex justify-content-center align-items-center mt-4">
<span class="fw-normal">
Not registered?
<a href="#" class="fw-bold">Create account</a>
</span>
</div>
</div>
</div>
</div>
</div>