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:

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.

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

Jo J. Moore

15 March 2021

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:

15 March 2021

We partnered up with Google

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

Learn More

Jo J. Moore

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

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 2021 21

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

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

posted by Jose Leos

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

33.7k

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

New York, USA

Neil 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:

Jose D. Leos

Web Developer

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

Use this card component to also show the social media profile of the user:

Bonnie M. Green

Web publications designer

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

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

Christopher Wood

Send a Message

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

UI/UX Designer

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

Benjamin West

Web Developer

<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

Web Developer

James Desai

<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

Purchase now

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

$19 / month

Faster sites deliver better business results for your clients.

Full Support No
Storage 50 GB
Monthly Visitors 400k

Add to Cart

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

19$ / month

Community support
15 GB SSD storage
One-click staging site
10 E-mail accounts
2 Bootstrap Themes

Purchase now

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

Basic

$19

Add to Cart

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 / month

So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.

Add to Cart

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

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

Already have an account? Login here

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

Sign in to our platform

or login with

Not registered? 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="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>

Cards

Blog cards

We partnered up with Google

Author

We partnered up with Google

Text only

We partnered up with Google

Vertical

We partnered up with Google

Vertical text only

We partnered up with Google

Advanced

List of public corporations by market capitalization

Profile cards

Neil D. Sims

Alternative

Jose D. Leos

Social profile

Bonnie M. Green

Follow

Joseph A. Garth

Message

Christopher Wood

Flip on hover

Frank Shears

Clean

Benjamin West

Clean style 2

James Desai

Pricing cards

Basic

Add to cart

Dark version

Vertical

Basic

Vertical alternative

Regular

Call to action

Contact

Get in touch

Illustration

Become one of us

App store

Ready to change your life?

Subscribe

Get the most out of your network.

Authentication

Register

Create Account

Login

Sign in to our platform