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

Themesberg office
Awards

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
Designer desk
Jo portrait Jo J. Moore
15 March 2020

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 class="row">
    <div class="col-12 col-md-6">
        <div class="card bg-primary border-light shadow-soft">
            <img src="../../assets/img/blog/blog-article-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 mr-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 class="col-12 col-md-6">
        <div class="card bg-primary border-light shadow-soft">
            <div class="card-header p-3">
                <img src="../..//assets/img/blog/blog-article-2.jpg" class="card-img-top rounded" alt="Designer desk">
            </div>
            <div class="card-body pt-2">
                <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 mr-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 mr-2"></span>15 March 2020</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>

Blog card 2 Pro

15 March 2020

We partnered up with Google

With supporting text below as a natural lead-in to additional content.

Learn More
Moore avatar Jo J. Moore 
<div class="row">
    <div class="col-12 col-md-6">
        <div class="card bg-primary shadow-soft text-center border-light">
            <div class="card-header">
                <span class="card-text small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</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">
                <a href="#" 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="Moore avatar"> Jo J. Moore
                </a>
            </div>
        </div>
    </div>
</div>

Blog card 3 Pro

15 March 2020 Moore avatar Jo J. Moore

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.

Learn More 
<div class="row">
    <div class="col-12 col-md-10">
        <div class="card bg-primary shadow-inset text-center border-light p-3">
            <div class="card-body shadow-soft rounded border border-light py-5">
                <span class="card-text small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span>
                <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers">
                    <img class="avatar-sm mr-2 img-fluid rounded-circle ml-3" src="../../assets/img/team/profile-picture-2.jpg" alt="Moore avatar"> Jo J. Moore
                </a>
                <h3 class="h5 card-title my-4">We partnered up with Google</h3>
                <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>
                <a href="#" class="btn btn-primary btn-sm">Learn More</a>
            </div>
        </div>
    </div>
</div>

Blog card 4 Pro

We partnered up with Google

15 March 2020

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Learn More 21 
<div class="row">
    <div class="col-12 col-lg-10">
        <div class="card bg-primary shadow-inset border-light">
            <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 mr-2"></span>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-primary btn-sm mr-3">Learn More</a>
                    <a href="#" class="small"><span class="far fa-comments mr-2"></span>21</a>
                </div>
            </div>
        </div>
    </div>
</div>

Blog card 5 Pro

Artist desk

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.

15 March 2020 21 
<div class="row">
    <div class="col-12 col-md-10">
        <div class="card bg-primary shadow-soft border-light">
            <div class="row no-gutters align-items-center">
                <div class="col-md-4">
                    <img src="../../assets/img/blog/blog-article-5.jpg" class="card-img rounded-left" 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 mr-2"></span>15 March 2020</span>
                            <a href="#" class="small"><span class="far fa-comments mr-2"></span>21</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Blog card 6 Pro

Jose portrait posted by Jose Leos
Edit post Delete post
Webdeveloper desk

List of public corporations

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...

33.7k 
<div class="row">
    <div class="col-12 col-md-10">
        <div class="card bg-primary shadow-soft border-light p-2 p-md-3">
            <div class="card-header rounded pb-0">
                <div class="post-meta mb-4">
                    <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 mr-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 border-0 dropdown-toggle dropdown-toggle-split m-0 p-0" data-toggle="dropdown" aria-haspopup="true" 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">
                                    <a class="dropdown-item" href="#"><span class="fas fa-edit mr-2"></span>
                                        Edit post</a>
                                    <a class="dropdown-item text-danger" href="#"><span class="fa fa-trash mr-2"
                                            aria-hidden="true"></span>
                                        Delete post</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <img src="../../assets/img/blog/blog-article-1.jpg" class="card-img-top rounded" alt="Webdeveloper desk">
            </div>
            <div class="card-body py-4">
                <a href="#">
                    <h3 class="h4 my-4">List of public corporations</h3>
                </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...</p>
            </div>
            <div class="card-footer pt-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-primary text-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="#"><span class="far fa-comments mr-2"></span>33.7k</a>
                        <button class="btn mr-3 btn-link text-black border-0"><span class="fas fa-share mr-2"></span>Share</button>
                        <button class="btn btn-primary"><span class="far fa-save mr-2"></span>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

Leos Portrait

Jose Leos

Co-Founder Follow Message
Joseph Avatar

Joseph Garth

Designer

25K

Followers

5K

Followers

62K

Followers 
<div class="row">
    <div class="col-12 col-md-6 mt-5">
        <!-- Profile Card -->
        <div class="profile-card mb-5">
            <div class="card bg-primary shadow-inset border-light text-center">
                <div class="card-header">
                    <div class="profile-image bg-primary shadow-inset border border-light rounded mx-auto p-3 mt-n6">
                        <img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded" alt="Leos Portrait">
                    </div>
                </div>
                <div class="card-body pb-5">
                    <h3 class="h5 mb-2">Jose Leos</h3>
                    <span class="h6 font-weight-normal text-gray mb-3">Co-Founder</span>
                    <ul class="list-unstyled d-flex justify-content-center mt-3 mb-4">
                        <li>
                            <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                <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 mr-3">
                                <span class="fab fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                <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 mr-3">
                                <span class="fab fa-dribbble"></span>
                            </a>
                        </li>
                    </ul>
                    <a class="btn btn-sm btn-primary mr-3" href="#">
                        <span class="fas fa-user-plus mr-1"></span> Follow
                    </a>
                    <a class="btn btn-sm btn-primary" href="#">
                        Message
                    </a>                                
                </div>
            </div>
        </div>
        <!-- End of Profile Card -->
    </div>
    <div class="col-12 col-md-6 mt-5">
        <!-- Profile Card -->
        <div class="card bg-primary shadow-soft border-light mb-5 text-center">
            <div class="profile-image shadow-inset border border-light bg-primary p-3 rounded-circle mt-n5 mx-auto">
                <img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top shadow-soft p-3 border border-light rounded-circle" alt="Joseph Avatar">
            </div>
            <div class="card-body">
                <h3 class="h5 mb-2">Joseph Garth</h3>
                <span class="h6 font-weight-normal text-gray mb-3">Designer</span>
                <ul class="list-unstyled d-flex justify-content-center my-3">
                    <li>
                        <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                            <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 mr-3">
                            <span class="fab fa-twitter"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                            <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 mr-3">
                            <span class="fab fa-dribbble"></span>
                        </a>
                    </li>
                </ul>
                <div class="row mt-5">
                    <div class="col-4">
                        <div class="icon icon-shape icon-shape-xs icon-facebook icon-shape-primary shadow-soft border border-light rounded-circle mb-2">
                            <span class="fab fa-facebook-f"></span>
                        </div>
                        <h2 class="h5 mb-0">25K</h2>
                        <span class="small">Followers</span>
                    </div>
                    <div class="col-4">
                        <div class="icon icon-shape icon-shape-xs icon-dribbble icon-shape-primary shadow-soft border border-light rounded-circle mb-2">
                            <span class="fab fa-dribbble"></span>
                        </div>
                        <h2 class="h5 mb-0">5K</h2>
                        <span class="small">Followers</span>
                    </div>
                    <div class="col-4">
                        <div class="icon icon-shape icon-shape-xs icon-behance icon-shape-primary shadow-soft border border-light rounded-circle mb-2">
                            <span class="fab fa-behance"></span>
                        </div>
                        <h2 class="h5 mb-0">62K</h2>
                        <span class="small">Followers</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Profile Card -->
    </div>
</div>

Profile card 2 Pro

Bonnie Avatar

Bonnie Green

Web Designer

Some quick example text to build on the card title and make up the bulk of the card's content.

Christopher Avatar

Christopher Wood

Marketing

Some 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-6 mt-5">
        <div class="profile-card mb-5">
            <div class="card bg-primary shadow-soft border-light">
                <div class="profile-image bg-primary shadow-inset border border-light rounded p-3 ml-3 mt-n5">
                    <img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded" alt="Bonnie Avatar">
                </div>
                <div class="card-body">
                    <h3 class="h5 mb-2">Bonnie Green</h3>
                    <span class="h6 font-weight-normal text-gray mb-3">Web Designer</span>
                    <ul class="list-unstyled d-flex my-3">
                        <li>
                            <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                <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 mr-3">
                                <span class="fab fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                <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 mr-3">
                                <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>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 mt-5">
        <div class="profile-card mb-5">
            <div class="card bg-primary shadow-soft border-light">
                <div class="profile-image bg-primary shadow-inset border border-light rounded-circle p-3 ml-3 mt-n5">
                    <img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-circle" alt="Christopher Avatar">
                </div>
                <div class="card-body">
                    <h3 class="h5 mb-2">Christopher Wood</h3>
                    <span class="h6 font-weight-normal text-gray mb-3">Marketing</span>
                    <ul class="list-unstyled d-flex my-3">
                        <li>
                            <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                <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 mr-3">
                                <span class="fab fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                <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 mr-3">
                                <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>
                </div>
            </div>
        </div>
    </div>
</div>

Profile card 3 Pro

Neil Avatar

Neil Sims

Follow

Some 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-md-6 col-lg-6">
        <div class="card bg-primary shadow-soft border-light text-center">
            <div class="card-header">
                <div class="profile-cover rounded" data-background="../../assets/img/team/cover-profile.jpg"></div>
                <div class="profile-image-small bg-primary rounded-circle shadow-inset p-3 border border-light mx-auto mt-n6">
                    <img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-circle" alt="Neil Avatar">
                </div>
            </div>
            <div class="card-body pt-2">
                <h3 class="h5 mb-0">Neil Sims</h3>
                <a class="btn btn-sm btn-primary my-4" 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 mb-4">
                    <li>
                        <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                            <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 mr-3">
                            <span class="fab fa-twitter"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                            <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 mr-3">
                            <span class="fab fa-dribbble"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Minimalistic Profile Card Pro

Wood Portrait

Christopher Wood

Co-Founder Themesberg

Some 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-6">
        <div class="card bg-primary shadow-soft border-light">
            <div class="card-header p-4">
                <img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded" alt="Wood Portrait">
            </div>
            <div class="card-body pt-2">
                <h3 class="h5 mb-2">Christopher Wood</h3>
                <span class="h6 font-weight-normal text-gray mb-4">Co-Founder Themesberg</span>
                <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 my-3">
                    <li>
                        <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                            <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 mr-3">
                            <span class="fab fa-twitter"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                            <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 mr-3">
                            <span class="fab fa-dribbble"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Rotating profile card Pro

Roberta Avatar

Roberta Casas

Marketing Specialist

Some quick example text to build on the card title and make up.

Follow 
<div class="row">
    <div class="col-12 col-md-6">
        <div class="rotating-card-container mb-5">
            <div class="card shadow-soft border-light card-rotate p-5">
                <div class="front text-center">
                    <div class="profile-image shadow-inset border border-light bg-primary p-3 rounded-circle mt-4">
                        <img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top shadow-soft p-2 border border-light rounded-circle" alt="Roberta Avatar">
                    </div>
                    <div class="card-body">
                        <h3 class="h5 mb-2">Roberta Casas</h3>
                        <span class="h6 font-weight-normal text-gray">Marketing Specialist</span>
                    </div>
                </div>
                <div class="back text-center">
                    <div class="card-body p-5">
                        <ul class="list-unstyled d-flex justify-content-center mb-4">
                            <li>
                                <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                                    <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 mr-3">
                                    <span class="fab fa-twitter"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                                    <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 mr-3">
                                    <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.</p>
                        <a class="btn btn-sm btn-primary" href="#">
                            <span class="fas fa-user-plus mr-1"></span> Follow
                        </a>
                    </div>
                </div>
            </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-md-8">
        <div class="card bg-primary shadow-soft border-light text-center py-4">
            <!-- Header -->
            <div class="card-header p-3">
                <h3 class="text-gray mb-4">Basic</h3>
                <span class="d-block">
                    <span class="display-1 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">Start
                    Starter</button>
            </div>
            <!-- End Content -->
        </div>
    </div>
</div>

Pricing card 2

$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-md-8">
        <div class="card bg-primary shadow-soft border-light p-4">
            <!-- Header -->
            <div class="card-header border-bottom text-center">
                <span class="d-block">
                    <span class="display-1 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-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
  • Team size: 1-5 developers
<div class="row">
    <div class="col-12 col-md-8">
        <div class="card bg-primary shadow-inset border-light p-3">
            <!-- Header -->
            <div class="card-header shadow-soft border border-light rounded p-3 mb-3">
                <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 shadow-soft border border-light rounded p-2 mb-3">
                <ul class="list-group list-group-flush price-list mb-4">
                    <li class="list-group-item border-primary pb-1"><span class="fas fa-headset"></span>Community support</li>
                    <li class="list-group-item border-primary pb-1"><span class="far fa-hdd"></span>15 GB SSD storage</li>
                    <li class="list-group-item border-primary pb-1"><span class="far fa-paper-plane"></span>One-click staging site</li>
                    <li class="list-group-item border-primary pb-1"><span class="far fa-envelope"></span>10 E-mail accounts</li>
                    <li class="list-group-item border-0"><span class="fas fa-users"></span>Team size: 1-5 developers</li>
                </ul>
            </div>
            <!-- End Content -->
            <button type="button" class="btn btn-primary btn-block">Add to Cart</button>
        </div>
    </div>
</div>

Pricing card 4 Pro

Basic

$19
  • Community support
  • 15 GB SSD storage
  • One-click staging site
  • 10 E-mail accounts
  • Team size: 1-5 developers
<div class="row">
    <div class="col-12 col-lg-10">
        <div class="card bg-primary shadow-soft border-light">
            <div class="row no-gutters align-items-center">
                <div class="col-sm-5">
                    <!-- Header -->
                    <div class="card-header text-center pb-0">
                        <h3 class="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-primary 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 border-primary pb-1"><span class="fas fa-headset"></span>Community support</li>
                            <li class="list-group-item border-primary pb-1"><span class="far fa-hdd"></span>15 GB SSD storage</li>
                            <li class="list-group-item border-primary pb-1"><span class="far fa-paper-plane"></span>One-click staging site</li>
                            <li class="list-group-item border-primary pb-1"><span class="far fa-envelope"></span>10 E-mail accounts</li>
                            <li class="list-group-item border-0"><span class="fas fa-users"></span>Team size: 1-5 developers</li>
                        </ul>
                    </div>
                    <!-- End Content -->
                </div>
            </div>
        </div>
    </div>
</div>

Pricing card 5 Pro

Regular

$ 199

So, 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 bg-primary shadow-inset border-light p-3">
            <!-- Content -->
            <div class="card-body shadow-soft border border-light rounded p-4">
                <h4 class="mb-3">Regular</h4>
                <div class="d-flex mb-3"> 
                    <span class="h5 mb-0">$</span> 
                    <span class="price display-2 text-dark mb-0">199</span> 
                </div>
                <p class="mb-4">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>
                <button type="button" class="btn btn-primary btn-block rounded-bottom">Add to Cart</button>
            </div>
            <!-- End Content -->
        </div>
    </div>
</div>

CTA cards (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:

Contact

Get in touch

If you need any help with our products or services, choose one of the following ways to contact us.

Contact Us 
<div class="row">
    <div class="col-12">
        <div class="card bg-primary shadow-soft border-light mb-6">
            <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">
                                <span class="fas fa-headphones"></span>
                            </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
illustration 
<div class="row">
    <div class="col-12">
        <div class="card bg-primary shadow-soft border-light 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="mr-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="illustration">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Newsletter subscribe Pro

Get the most out of your network.

Contact management designed for teams and individuals 

<div class="row">
    <div class="col-12">
        <div class="card bg-primary shadow-soft border-light px-4 py-5">
            <div class="card-header pb-0 text-center">
                <h2 class="h1 mb-3">Get the most out of your network.</h2>
                <p class="mb-5 lead">
                    Contact management designed for teams and individuals
                </p>
            </div>
            <div class="card-body pt-2 px-0 px-lg-7">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="form-group">
                            <label class="h6 font-weight-light text-gray" for="subscribeInputEmail">Email address</label>
                            <div class="d-flex flex-row justify-content-center">
                                <div class="input-group">
                                    <input class="form-control form-control-xl border-light" id="subscribeInputEmail" placeholder="[email protected]" 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>

Download app Pro

Ready to change your life?

Download Rocket 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 bg-primary shadow-soft border-light px-4 py-5 text-center mb-5">
            <div class="card-header pb-0">
                <h2 class="h1 mb-3">Ready to change your life?</h2>
            </div>
            <div class="card-body pt-2 px-0 px-lg-5">
                <p class="mb-5 lead">
                    Download Rocket 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 mr-md-3 mb-3 mb-sm-0" href="#">
                    <div class="d-flex align-items-center">
                        <span class="icon icon-lg mr-3"><span class="fab fa-apple"></span></span>
                        <div class="d-block text-left">
                            <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" href="#">
                    <div class="d-flex align-items-center">
                        <span class="icon icon-lg mr-3"><span class="fab fa-google-play"></span></span>
                        <div class="d-block text-left">
                            <small class="font-small">Download on the</small>
                            <div class="h5 mb-0">Google Play</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>