Cards

Spaces comes with a wide variety of premium cards for your blog, dashboard, team members and many more

Listing cards

themesberg office

Team Workspace

5.0
  • California, USA
  • Penny Market Street (15 mins walk)
  • Museum Street (20 mins walk)
 <div class="col-12 col-md-8">
    <!-- Card -->
    <div class="card border-light mb-4 animate-up-5">
        <a href="#" class="position-relative">
            <img src="../../assets/img/image-office.jpg" class="card-img-top rounded-xl p-2" alt="themesberg office">
        </a>
        <div class="card-body">
            <a href="#">
                <h4 class="h5">Team Workspace</h4>
            </a>
            <div class="d-flex my-4">
                <i class="star fas fa-star text-warning"></i> 
                <i class="star fas fa-star text-warning"></i> 
                <i class="star fas fa-star text-warning"></i> 
                <i class="star fas fa-star text-warning"></i> 
                <i class="star fas fa-star text-warning"></i>
                <span class="badge badge-pill badge-primary ml-2">5.0</span>
            </div> 
            <ul class="list-group mb-3">
                <li class="list-group-item small p-0"><span class="fas fa-map-marker-alt mr-2"></span>California, USA</li>
                <li class="list-group-item small p-0"><span class="fas fa-bullseye mr-2"></span>Penny Market Street (15 mins walk)</li>
                <li class="list-group-item small p-0"><span class="fas fa-bullseye mr-2"></span>Museum Street (20 mins walk)</li>
            </ul>
        </div>
        <div class="card-footer bg-soft border-top">
            <div class="d-flex justify-content-between">
                <div class="col pl-0">
                    <span class="text-muted font-small d-block mb-2">Monthly</span>
                    <span class="h5 text-dark font-weight-bold">300$</span>
                </div>
                <div class="col">
                    <span class="text-muted font-small d-block mb-2">People</span>
                    <span class="h5 text-dark font-weight-bold">24</span>
                </div>
                <div class="col pr-0">
                    <span class="text-muted font-small d-block mb-2">Sq.Ft</span>
                    <span class="h5 text-dark font-weight-bold">2000</span>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Card -->
</div>

Vertical listing card

Collaborative Workspace

5.0
  • New York, Manhattan, USA
  • Old Street (2 mins walk)
Monthly 500$
People 12
Sq.Ft 1200
 <div class="col-12 col-sm-10 col-md-6 col-lg-12">
    <div class="card border-light mb-4 animate-up-5">
        <div class="row no-gutters align-items-center">
            <div class="col-12 col-lg-6 col-xl-5">
                <a href="#">
                    <img src="../../assets/img/private-office.jpg" alt="private office" class="card-img p-2 rounded-xl">
                </a>
            </div>
            <div class="col-12 col-lg-6 col-xl-7">
                <div class="card-body">
                    <a href="#">
                        <h4 class="h5">Collaborative Workspace</h4>
                    </a>
                    <div class="d-flex my-4">
                        <span class="star fas fa-star text-warning"></span> 
                        <span class="star fas fa-star text-warning"></span> 
                        <span class="star fas fa-star text-warning"></span> 
                        <span class="star fas fa-star text-warning"></span> 
                        <span class="star fas fa-star text-warning"></span>
                        <span class="badge badge-pill badge-primary ml-2">5.0</span>
                    </div> 
                    <ul class="list-group mb-3">
                        <li class="list-group-item small p-0"><span class="fas fa-map-marker-alt mr-2"></span>New York, Manhattan, USA</li>
                        <li class="list-group-item small p-0"><span class="fas fa-bullseye mr-2"></span>Old Street (2 mins walk)</li>
                    </ul>
                    <div class="d-flex justify-content-between">
                        <div class="col pl-0">
                            <span class="text-muted font-small d-block mb-2">Monthly</span>
                            <span class="h5 text-dark font-weight-bold">500$</span>
                        </div>
                        <div class="col">
                            <span class="text-muted font-small d-block mb-2">People</span>
                            <span class="h5 text-dark font-weight-bold">12</span>
                        </div>
                        <div class="col pr-0">
                            <span class="text-muted font-small d-block mb-2">Sq.Ft</span>
                            <span class="h5 text-dark font-weight-bold">1200</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Category card

<div class="col-12 col-lg-6">
<!-- Card -->
<a href="#" class="card img-card fh-400 border-0 outer-bg" data-background-inner="../../assets/img/newyork.jpg">
    <div class="inner-bg overlay-dark"></div>
    <div class="card-img-overlay d-flex align-items-center">
        <div class="card-body text-white p-3">
            <h5 class="text-uppercase text-center">United States</h5>
        </div>
    </div>
</a>
<!-- End of Card -->
</div>

Blog card

our desk
Google launches Cloud AI Platform Pipelines
Neil avatar

Neil Sims Curran

Richard Thomas was born in 1990, and at only 29 years old, his trajectory is good. When he ...

<div class="col-12 col-md-7">
    <div class="card bg-white border-light p-3 rounded">
        <a href="#">
            <img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded" alt="our desk">
        </a>
        <div class="card-body p-0 pt-4">
            <a href="#" class="h4">Google launches Cloud AI Platform Pipelines</a>
            <div class="d-flex align-items-center my-4">
                <img class="avatar avatar-sm rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="Neil avatar"> 
                <h3 class="h6 small ml-2 mb-0">Neil Sims Curran</h3>
            </div>
            <p class="mb-0">Richard Thomas was born in 1990, and at only 29 years old, his trajectory is good. When he ...</p>
        </div>
    </div>
</div>

Profile card

Jose Avatar

Jose Leos

Co-Founder

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

<div class="col-12 col-md-7 mt-6">
    <div class="card border-light text-center">
        <div class="profile-thumbnail mx-auto mt-n6">
            <img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-circle border-0" alt="Jose Avatar">
        </div>
        <div class="card-body">
            <h2 class="h4 card-title mb-2">Jose Leos</h2>
            <span class="card-subtitle text-gray font-weight-normal">Co-Founder</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-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="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-dribbble mr-3">
                        <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>

Pricing card

Free

$0 / month

Get listed in the directory:

Unlimited photos

Unlimited videos

Receive messages

Display your contact info

<div class="col-12 col-md-7">
    <!-- Pricing Card -->
    <div class="pricing-card">
        <div class="card border-light p-1 p-lg-2 p-xl-4">
            <!-- Header -->
            <header class="card-header border-bottom bg-white text-center">
                <h2 class="h3 font-weight-normal text-gray mb-4">Free</h2>
                <span class="d-block">
                    <span class="display-1 text-primary font-weight-bold">
                        <span class="align-top font-medium">$</span>0
                </span>
                <span class="font-small">/ month</span>
                </span>
            </header>
            <!-- End Header -->
            <!-- Content -->
            <div class="card-body">
                <h3 class="h6 font-weight-normal text-dark mb-4">Get listed in the directory:</h3>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Unlimited photos</p>
                </div>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Unlimited videos</p>
                </div>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Receive messages</p>
                </div>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Display your contact info</p>
                </div>
                <button type="button" class="btn btn-outline-primary btn-block mt-4"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button>
            </div>
            <!-- End Content -->
        </div>
    </div>
    <!-- End of Pricing Card -->
</div>

Support card

<div class="col-12 col-md-6 col-lg-6">
    <!-- Card -->
    <a href="#" class="card text-center shadow-soft border-light animate-up-3">
        <div class="card-body p-5">
            <div class="icon icon-shape icon-shape-secondary rounded-circle mb-4">
                <span class="fas fa-clipboard-list"></span>
            </div>
            <h6 class="text-gray mb-0">Requirements</h6>
        </div>
    </a>
</div>

Support topic

<div class="col-lg-12 mb-3">
    <a href="#" class="card border-light animate-up-3 shadow-soft p-0 p-lg-4">     
        <div class="card-body">
            <h4>Account Settings, Language &amp; Dark Mode</h4>
            <p class="lead text-gray mb-4">How to edit account settings such as email addresss, user name, language and switch to dark mode</p>
            <div class="d-flex align-items-center">
                <div class="avatar-lg">
                    <img class="rounded-circle" src="../../assets/img/team/profile-picture-1.jpg" alt="avatar">
                </div>
                <div class="small text-gray ml-3">
                    <div><span>Updated 2 days ago</span></div>
                    <div>Written by&nbsp;<strong>Richard Thomas</strong></div>
                </div>
            </div>
        </div>
    </a>
</div>

Dashboard

Stats card

Global Budget
$25,370.00
18.2% higher vs previous month
<div class="col-12 col-sm-7 mb-4">
    <div class="card border-light">
        <div class="card-body d-block d-md-flex align-items-center">
        <div class="icon icon-shape icon-md icon-shape-primary rounded-circle mr-3 mb-4 mb-md-0"><span class="fas fa-wallet"></span></div>
        <div>
            <span class="d-block h6 font-weight-normal">
                Global Budget 
            </span>
            <h5 class="h3 font-weight-bold mb-1">$25,370.00</h5>
            <div class="small mt-2">                               
                <span class="fas fa-angle-up text-success"></span>                                   
                <span class="text-success font-weight-bold">18.2%</span> higher vs previous month
            </div>
        </div>
        </div>
    </div>
</div>

Chart card

New customers

452

18.2%
Last month
This month
<div class="col-12 col-md-7">
    <div class="card border-light">
        <div class="card-body d-flex flex-row align-items-center flex-0 border-bottom">
            <div class="d-block">
                <div class="h6 font-weight-normal text-gray mb-2">New customers</div>
                <h2 class="h3">452</h2>
                <div class="small mt-2">                               
                    <span class="fas fa-angle-up text-success"></span>                                   
                    <span class="text-success font-weight-bold">18.2%</span>
                </div>
            </div>
            <div class="d-block ml-auto">
                <div class="d-flex align-items-center text-right mb-2">
                    <span class="shape-xs rounded-circle bg-dark mr-2"></span>
                    <span class="font-weight-normal small">Last month</span>
                </div>
                <div class="d-flex align-items-center text-right">
                    <span class="shape-xs rounded-circle bg-tertiary mr-2"></span>
                    <span class="font-weight-normal small">This month</span>
                </div>
            </div>
        </div>
        <div class="card-body p-2">
            <div class="ct-chart-5 ct-golden-section ct-series-e"></div>
        </div>
    </div>
</div>

Editable item

  • Promoted until: 12 June

Collaborative Workspace

Active 680 10 8
<div class="card border-light mb-4">
    <div class="row no-gutters align-items-center">
        <div class="col-12 col-lg-6 col-xl-4">
            <a href="single-space.html">
            <img src="../../assets/img/meeting-office.jpg" alt="private office" class="card-img p-2 rounded-xl">
            </a>
        </div>
        <div class="col-12 col-lg-6 col-xl-8">
            <div class="card-body py-lg-0">
            <div class="d-flex no-gutters align-items-center mb-3">
                <div class="col text-left">
                    <ul class="list-group mb-0">
                        <li class="list-group-item small p-0"><span class="fas fa-medal text-tertiary mr-2"></span>Promoted until: 12 June</li>
                    </ul>
                    <div class="modal fade bd-example-modal-lg" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                            <div class="modal-content bg-white px-0">
                                <div class="modal-header">
                                    <h2 class="h5 mb-3">Collaborative Workspace</h2>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="d-flex align-items-center">
                                        <div class="col">
                                            <h2 class="h4">Views</h2>
                                        </div>
                                        <div class="col-3">
                                            <div class="form-group">
                                                <select class="custom-select" id="exampleFormControlSelect2">
                                                    <option>15 days</option>
                                                    <option>30 days</option>
                                                    <option>60 days</option>
                                                    <option>90 days</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ct-chart-statistics ct-golden-section ct-series-a"></div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-sm btn-secondary">Go to Dashboard</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col text-right">
                    <div class="btn-group">
                        <button class="btn btn-link text-dark 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 Item</a>
                            <a class="dropdown-item text-danger" href="#"><span class="fa fa-trash mr-2"
                                    aria-hidden="true"></span>
                                Disable</a>
                            <a class="dropdown-item" data-toggle="modal" data-target="#modal-notification"><span class="fas fa-chart-line mr-2"></span>Statistics</a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#">
                <h2 class="h5">Collaborative Workspace</h2>
            </a>
            <div class="col d-flex pl-0">
                <span class="text-success font-small mr-3"><span class="fas fa-check-circle mr-2"></span>Active</span>
                <span class="text-muted font-small mr-3"><span class="fas fa-eye mr-2"></span>680</span>
                <span class="text-muted font-small mr-3"><span class="far fa-heart mr-2"></span>10</span>
                <a class="font-small text-dark" href="#"><span class="fas fa-envelope mr-2"></span>8</a>
            </div>
            </div>
        </div>
    </div>
</div>

Inbox card

<div class="card border-light mb-3 py-3">
    <div class="card-body d-flex align-items-center flex-wrap flex-lg-nowrap py-0">
        <div class="col-auto col-lg-1 d-flex align-items-center px-0">
            <div class="form-check inbox-check mr-2">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> 
                <label class="form-check-label" for="defaultCheck1"></label>
            </div>
            <div class="rating-star d-none d-sm-inline-block">
                <input type="checkbox" id="InboxStar1" name="star"> 
                <label class="rating-star-label" for="InboxStar1">
                    <span class="sr-only">Star</span>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-8 pl-0 ml-2">
            <a href="#" class="h6 text-sm">Neil Sims</a>
        </div>
        <div class="col col-lg-1 text-right px-0 order-lg-4">
            <span class="text-muted text-sm">Dec 25</span>
        </div>
        <div class="col-12 col-lg-7 d-flex align-items-center px-0">
            <div class="col col-lg-11 px-0">
                <div class="d-flex flex-wrap flex-lg-nowrap align-items-center">
                    <a href="#" class="col-12 col-lg pl-0 font-weight-normal text-dark d-none d-sm-block mt-2 mt-lg-0">
                        I want to rent today, is the house still valid ... 
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Message card

avatar Neil Sims March 26, 19:25

Hi Chris! Thanks a lot for this very useful template. Saved me a lot of time and searches on the internet.

<div class="card bg-white border-light p-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="font-small">
            <a href="#">
                <img class="avatar-sm img-fluid rounded-circle mr-2"
                    src="../../assets/img/team/profile-picture-1.jpg" alt="avatar">
                <span class="font-weight-bold">Neil Sims</span>
        </a>
        <span class="ml-2">March 26, 19:25</span>
        </span>
        <div class="d-none d-sm-block">
            <button class="btn btn-link text-dark" aria-label="phone" data-toggle="tooltip" data-placement="top" title="Sent from the phone " data-original-title="Sent from the phone">
                <span class="fas fa-mobile-alt"></span>
            </button>
        </div>
    </div>
    <p class="m-0">
        Hi Chris! Thanks a lot for this very useful template. Saved me a lot of time and searches on the internet.
    </p>
</div>