Cards

Our cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap Documentation

Basic

Card image cap
Card title

Some quick example text....

Go somewhere 
<div class="card">
    <img class="card-img-top" src="../../assets/img/theme/light/img-1-800x600.jpg" alt="Card image cap" class="img-fluid">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
</div>

Metadata

Special title treatment
2 hrs ago

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

Go somewhere 
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <h5 class="card-title mb-0">Special title treatment</h5>
            <span class="text-muted text-sm mb-4">2 hrs ago</span>
        </div>
        <div>
            <div class="actions mb-0">
                <a href="#" class="action-item"><i class="far fa-heart mr-1"></i> 50</a>
                <a href="#" class="action-item"><i class="far fa-eye mr-1"></i> 250</a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
</div>
Special title treatment
2 hrs ago

With supporting text below...

Go somewhere
JD David Wally
50 250 
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">Special title treatment</h5>
        <span class="text-muted text-sm">2 hrs ago</span>
    </div>
    <div class="card-body">
        <p class="card-text">With supporting text below...</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col">
                <span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
                <span class="h6 mb-0 avatar-content">David Wally</span>
            </div>
            <div class="col text-right text-right">
                <div class="actions">
                    <a href="#" class="action-item"><i class="far fa-heart mr-1"></i> 50</a>
                    <a href="#" class="action-item"><i class="far fa-eye mr-1"></i> 250</a>
                </div>
            </div>
        </div>
    </div>
</div>

Actions

Favorite post

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

Action button
2 hrs ago 
<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col-8">
                <h5 class="card-title mb-0">Favorite post</h5>
            </div>
            <div class="col-4">
                <div class="actions text-right">
                    <a href="#" class="action-item action-favorite" data-toggle="tooltip" data-original-title="Mark as favorite">
                        <i class="far fa-star"></i>
                    </a>
                    <a href="#" class="action-item action-love" data-toggle="tooltip" data-original-title="Love">
                        <i class="far fa-heart"></i>
                    </a>
                    <a href="#" class="action-item action-like active" data-toggle="tooltip" data-original-title="Like">
                        <i class="far fa-thumbs-up"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col-6">
                <a href="#" class="btn btn-sm btn-primary">Action button</a>
            </div>
            <div class="col-6 text-right">
                <span class="text-muted text-sm">2 hrs ago</span>
            </div>
        </div>
    </div>
</div>

Examples

Basic

Theme as framework

Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website. 

<div class="card bg-gradient-primary px-4 py-5">
    <div class="card-body">
        <h5 class="h4 text-white">Theme as framework</h5>
        <p class="mt-4 mb-0 text-white">
            Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
        </p>
    </div>
</div>
Build tools

Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.

Friendly support

Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website. 

<div class="card-group">
<div class="card bg-gradient-primary px-4 py-5 border-0">
    <div class="card-body">
        <h5 class="h4 text-white">Build tools</h5>
        <p class="mt-4 mb-0 text-white">
            Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
        </p>
    </div>
</div>

<div class="card bg-gradient-dark px-4 py-5 border-0">
    <div class="card-body">
        <h5 class="h4 text-white">Friendly support</h5>
        <p class="mt-4 mb-0 text-white">
            Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.
        </p>
    </div>
</div>

</div>

Blog

<div class="card">
    <a href="#">
        <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="card-img-top">
    </a>
    <div class="card-body py-5 text-center">
        <a href="#" class="d-block h5 lh-150">Choose the best solution for your business</a>
        <h6 class="text-muted mt-4 mb-0">25 April, 2019</h6>
    </div>
    <div class="card-footer delimiter-top">
        <div class="row">
            <div class="col text-center">
                <ul class="list-inline mb-0">
                    <li class="list-inline-item pr-4">
                        <a href="#" class="text-muted"><i class="far fa-share mr-1 text-muted"></i> 131</a>
                    </li>
                    <li class="list-inline-item pr-4">
                        <a href="#" class="text-muted"><i class="far fa-eye mr-1 text-muted"></i> 255</a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="text-muted"><i class="far fa-comments mr-1 text-muted"></i> 14</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
Image placeholder
Interviews
25 April, 2019
Choose the best solution for your business

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

<div class="card overflow-hidden" data-animate-hover="2">
    <div class="overflow-hidden">
        <div class="animate-this">
            <a href="#">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="card-img-top">
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="row align-items-center mb-4">
            <div class="col">
                <span class="badge badge-pill badge-soft-warning">Interviews</span>
            </div>
            <div class="col text-right">
                <span class="text-muted">25 April, 2019</span>
            </div>
        </div>
        <a href="#" class="h5">Choose the best solution for your business</a>
        <p class="card-text mt-2">With supporting text below as a natural lead-in to additional content.</p>
    </div>
</div>
<div class="card border-0">
    <div class="text-white">
        <img alt="Image placeholder" class="img-fluid rounded" src="../../assets/img/theme/light/img-1-1000x900.jpg">
        <div class="card-img-overlay d-flex align-items-end">
            <div class="col text-center">
                <a href="#" class="h4 text-white d-block">No° 10</a>
                <a href="#" class="text-white">25 April, 2019</a>
            </div>
        </div>
    </div>
</div>
Image placeholder
How to find the right design for your specific product

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

<div class="card overflow-hidden border-0">
    <img alt="Image placeholder" src="../../assets/img/theme/light/img-2.jpg" class="card-img-top">
    <span class="mask bg-info opacity-3"></span>
    <span class="mask hover-mask bg-gradient-warning opacity-9"></span>
    <div class="card-img-overlay d-flex flex-column">
        <div class="my-auto text-center px-3 py-5">
            <ul class="list-inline mb-3">
                <li class="list-inline-item">
                    <a href="#" class="text-white">Innovation</a>
                </li>
                <li class="list-inline-item">
                    <a href="#" class="text-white">Uncategorized</a>
                </li>
            </ul>
            <a href="#" class="h3 text-white mb-0">How to find the right design for your specific product</a>
            <p class="lead lh-150 text-white mt-4">With supporting text below as a natural lead-in to additional content.</p>
        </div>
    </div>
</div>

Contact

<div class="card bg-dark opacity-container text-white overflow-hidden shadow border-0">
    <a href="#">
        <div class="card-img-bg" style="background-image: url('../..//assets/img/theme/light/city-1.jpg');"></div>
        <span class="mask bg-gradient-primary opacity-9 hover-opacity-6"></span>
        <div class="card-body px-5 py-5">
            <div style="min-height: 250px;">
                <h5 class="h2 text-white font-weight-bold mb-4">San Francisco</h5>
                <h5 class="text-white mt-4 mb-2">E: sanfrancisco@company.com</h5>
                <h5 class="text-white">T: 0755.222.333</h5>
            </div>
            <span class="text-white text-uppercase font-weight-bold">
                See on map
                <i class="far fa-angle-right ml-2"></i>
            </span>
        </div>
    </a>
</div>

Dashboard

Event

Image placeholder
Betty Mavis
betty.mavis@example.com 10:30 AM
Image placeholder Image placeholder Image placeholder
Reminder:

When we strive to become better than we are everything around us becomes better too.

<div class="card hover-shadow-lg hover-translate-y-n10">
    <div class="card-header">
        <div class="d-flex align-items-center"><img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle avatar-lg hover-shadow-lg hover-scale-110">

            <div class="avatar-content ml-3">
                <h6 class="mb-0">Betty Mavis</h6>
                <small class="d-block text-muted font-weight-bold">betty.mavis@example.com</small>
                <span class="text-muted"><i class="far fa-clock mr-2"></i>10:30 AM</span>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="d-flex justify-content-between">
            <div>
                <a href="#" class="text-sm font-weight-bold d-block">7 members going</a>
            </div>
            <div>
                <a href="#" class="text-sm font-weight-bold d-block">3 pending</a>
            </div>
        </div>
        <div class="mt-3 mb-2">
            
<div class="avatar-group">
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

        </div>
        <small class="h6 text-sm font-weight-bold">Reminder:</small>
        <p class="text-sm lh-160 mb-0">When we strive to become better than we are everything around us becomes better too.</p>
    </div>
</div>

Connection

Heads up! In order to use the connection card with the spark charts you will need to include additional scripts in the page. See the Apex Charts plugin.

Image placeholder
Image placeholder 
<div class="card hover-shadow-lg hover-translate-y-n10">
    <div class="card-body text-center">
        <div class="avatar-parent-child">
            <a href="#" class="avatar avatar-lg rounded-circle">
                <img alt="Image placeholder" src="../../assets/img/theme/light/team--800x800.jpg">
            </a>
            <span class="avatar-child avatar-badge bg-"></span>
        </div>
        <h6 class="text-sm my-3"></h6>
        <button type="button" class="btn btn-xs btn-secondary">Add</button>
    </div>
</div>

<div class="card hover-shadow-lg hover-translate-y-n10">
    <div class="card-body text-center">
        <div class="avatar-parent-child">
            <a href="#" class="avatar avatar-lg rounded-circle">
                <img alt="Image placeholder" src="../../assets/img/theme/light/team--800x800.jpg">
            </a>
            <span class="avatar-child avatar-badge bg-"></span>
        </div>
        <h6 class="text-sm my-3"></h6>
        <button type="button" class="btn btn-xs btn-secondary">Add</button>
    </div>
</div>

Project

<div class="card">
    <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">Project progress</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="list-group list-group-flush">
    
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Purpose Website UI</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-warning">Pending</span>
            </div>
            <div>
                20 Apr
            </div>
        </div>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Website Redesign</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-success">Completed</span>
            </div>
            <div>
                21 Apr
            </div>
        </div>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Webpixels Website</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 72%;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-danger">Delayed</span>
            </div>
            <div>
                23 Apr
            </div>
        </div>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Purpose Application UI</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-info">On schedule</span>
            </div>
            <div>
                3 May
            </div>
        </div>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Purpose Dashboard UI</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-success">Completed</span>
            </div>
            <div>
                20 Aug
            </div>
        </div>
    </div>
</div>

    </a>
    
</div>

</div>
<div class="card">
    <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">Project budgets</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="list-group list-group-flush">
    
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Website UI</h6>
        <span class="d-block text-sm text-muted">Development</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $2500
        </span>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Website Redesign</h6>
        <span class="d-block text-sm text-muted">Identity</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $1800
        </span>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Webpixels Website</h6>
        <span class="d-block text-sm text-muted">Branding</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $3150
        </span>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Application UI</h6>
        <span class="d-block text-sm text-muted">Marketing</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $4400
        </span>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Dashboard UI</h6>
        <span class="d-block text-sm text-muted">Frameworks</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $2200
        </span>
    </div>
</div>

    </a>
    
</div>

</div>
Project list
Refresh Manage Widgets Settings
Image placeholder
Purpose Website UI
Development
Image placeholder
Website Redesign
Identity
Image placeholder
Webpixels Website
Branding
Image placeholder
Purpose Application UI
Marketing
Image placeholder
Purpose Dashboard UI
Frameworks 
<div class="card">
    <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">Project list</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="list-group list-group-flush">
    
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Website UI</h6>
        <span class="d-block text-sm text-muted">Development</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Website Redesign</h6>
        <span class="d-block text-sm text-muted">Identity</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Webpixels Website</h6>
        <span class="d-block text-sm text-muted">Branding</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Application UI</h6>
        <span class="d-block text-sm text-muted">Marketing</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Dashboard UI</h6>
        <span class="d-block text-sm text-muted">Frameworks</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
</div>

</div>
<div class="card hover-shadow-lg hover-translate-y-n10">
    <div class="card-header border-0 pb-0">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">20 Aug 2019</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="card-body text-center"><a href="#" class="avatar rounded-circle avatar-lg hover-translate-y-n3">
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="">

</a>
        <h5 class="h6 my-4"><a href="#">Website redesign</a></h5>
        
<div class="avatar-group hover-avatar-ungroup mb-3">
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

        <span class="clearfix"></span>
        <span class="badge badge-pill badge-info">In progress</span>
    </div>
    <div class="card-footer">
        <div class="actions d-flex justify-content-between px-4">
            <a href="#" class="action-item">
                <i class="far fa-plus"></i>
            </a>
            <a href="#" class="action-item">
                <i class="far fa-comment"></i>
            </a>
            <a href="#" class="action-item text-danger">
                <i class="far fa-trash-alt"></i>
            </a>
        </div>
    </div>
</div>

Notification

<div class="card">
    <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">Notifications</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="list-group list-group-flush">
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="far fa-bell mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			Mail sent to <span class="text-dark font-weight-bold">Alex Michael</span>
		</div>
		<small class="d-block text-muted">2 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="far fa-thumbs-up mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			You liked a comment from <span class="text-dark font-weight-bold">Sandra Wayne</span>
		</div>
		<small class="d-block text-muted">3 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="far fa-thumbs-up mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			New likes from <span class="text-dark font-weight-bold">Jason Miller</span>
		</div>
		<small class="d-block text-muted">5 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="far fa-tasks mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			You are now in team with <span class="text-dark font-weight-bold">Mike Thomson</span>
		</div>
		<small class="d-block text-muted">2 hrs ago</small>
	</div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex">
	<div>
		<i class="far fa-envelope mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			Mail sent to <span class="text-dark font-weight-bold">Richard Nixon</span>
		</div>
		<small class="d-block text-muted">3 hrs ago</small>
	</div>
</div>

    </a>
    
</div>

    <div class="card-footer py-2 text-center">
        <a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
    </div>
</div>
<div class="card">
    <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">Latest comments</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="list-group list-group-flush">
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
    <div>
        
<span class="avatar bg-primary text-white rounded-circle">AM</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
    <div>
        
<span class="avatar bg-warning text-white rounded-circle">SW</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
    <div>
        
<span class="avatar bg-info text-white rounded-circle">JM</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
    <div>
        
<span class="avatar bg-dark text-white rounded-circle">MJ</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Mike Thomson <small class="float-right text-muted">2 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
    <div>
        
<span class="avatar bg-primary text-white rounded-circle">RN</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Richard Nixon <small class="float-right text-muted">3 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
    <a href="#" class="list-group-item list-group-item-action">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
    <div>
        
<span class="avatar bg-info text-white rounded-circle">JS</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">John Snow <small class="float-right text-muted">5 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </a>
    
</div>

    <div class="card-footer py-2 text-center">
        <a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
    </div>
</div>
<div class="card">
    <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h6 class="mb-0">Tasks timeline</h6>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i class="far fa-sync"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i class="far fa-ellipsis-h"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="card-body">
        <div class="timeline timeline-one-side" data-timeline-content="axis" data-timeline-axis-style="dashed">
    
    
    
    <div class="timeline-block">
        <span class="timeline-step timeline-step-sm bg-primary border-primary text-white">1</span>
        <div class="timeline-content">
            <span class="text-muted text-sm">Task added</span>
            <a href="#" class="d-block h6 text-sm mb-0">Meet with Jane for discussing the presentation</a>
            <small><i class="far fa-clock mr-1"></i>45 min ago</small>
        </div>
    </div>
    
    <div class="timeline-block">
        <span class="timeline-step timeline-step-sm bg-warning border-warning text-white">2</span>
        <div class="timeline-content">
            <span class="text-muted text-sm">Task added</span>
            <a href="#" class="d-block h6 text-sm mb-0">Meet with Jane for discussing the presentation</a>
            <small><i class="far fa-clock mr-1"></i>45 min ago</small>
        </div>
    </div>
    
    <div class="timeline-block">
        <span class="timeline-step timeline-step-sm bg-info border-info text-white">3</span>
        <div class="timeline-content">
            <span class="text-muted text-sm">Task added</span>
            <a href="#" class="d-block h6 text-sm mb-0">Meet with Jane for discussing the presentation</a>
            <small><i class="far fa-clock mr-1"></i>45 min ago</small>
        </div>
    </div>
    
</div>

    </div>
    <div class="card-footer py-2 text-center">
        <a href="#" class="text-sm text-muted font-weight-bold">See all notifications</a>
    </div>
</div>

Profile

Image placeholder
Image placeholder
Betty Mavis
Senior Developer
Image placeholder Image placeholder Image placeholder 
<div class="card card-profile hover-shadow-lg hover-translate-y-n10">
    <div class="card-profile-cover">
        <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x400.jpg" class="card-img-top">

    </div>
    <a href="#" class="mx-auto">
        <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="card-profile-image avatar rounded-circle shadow hover-shadow-lg">

    </a>
    <div class="card-body p-3 pt-0 text-center">
        <h5 class="mb-0">Betty Mavis</h5>
        <span class="d-block text-muted mb-3">Senior Developer</span>
        
<div class="avatar-group hover-avatar-ungroup mb-3">
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    <a href="#" class="avatar rounded-circle avatar-sm">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
</div>

        <div class="actions d-flex justify-content-between mt-3 pt-3 px-5 delimiter-top">
            <a href="#" class="action-item">
                <i class="far fa-envelope"></i>
            </a>
            <a href="#" class="action-item">
                <i class="far fa-user"></i>
            </a>
            <a href="#" class="action-item">
                <i class="far fa-chart-pie"></i>
            </a>
            <a href="#" class="action-item text-danger">
                <i class="far fa-trash-alt"></i>
            </a>
        </div>
    </div>
</div>

Icon

Built by developers for developers

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

Learn more
Built by developers for developers

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

Learn more
Built by developers for developers

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

Learn more 
<div class="card">
    <div class="card-body py-5">
        <div class="d-flex align-items-center">
    <div class="icon icon-primary rounded-circle icon-shape">
    <i class="far fa-brain"></i>
</div>
    <div class="icon-text pl-4">
        <h5 class="mb-0">Built by developers for developers</h5>
    </div>
</div>
<p class="mt-4 mb-0">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-sm btn-primary rounded-pill hover-translate-y-n3 mt-4">Learn more</a>
    </div>
</div>

<div class="card bg-primary">
    <div class="card-body py-5">
        <div class="d-flex align-items-center">
    <div class="icon bg-white rounded-circle icon-shape">
    <i class="far fa-brain"></i>
</div>
    <div class="icon-text pl-4">
        <h5 class="mb-0 text-white">Built by developers for developers</h5>
    </div>
</div>
<p class="mt-4 mb-0 text-white">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-sm btn-white rounded-pill hover-translate-y-n3 mt-4">Learn more</a>
    </div>
</div>

<div class="card bg-dark">
    <div class="card-body py-5">
        <div class="d-flex align-items-center">
    <div class="icon bg-white rounded-circle icon-shape">
    <i class="far fa-brain"></i>
</div>
    <div class="icon-text pl-4">
        <h5 class="mb-0 text-white">Built by developers for developers</h5>
    </div>
</div>
<p class="mt-4 mb-0 text-white">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-sm btn-white rounded-pill hover-translate-y-n3 mt-4">Learn more</a>
    </div>
</div>
Built by developers for developers

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

colors theme gulp
Built by developers for developers

Change almost everything in seconds using the power of Sass and Gulp.

colors theme gulp 
<div class="card">
    <div class="px-5 pb-5">
        <div class="py-5">
    <div class="icon text-info">
    <i class="far fa-alicorn"></i>
</div>
</div>
<h5 class="">Built by developers for developers</h5>
<p class=" mt-2 mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p><div class="mt-4">
    <a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">colors</a>
    <a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">theme</a>
    <a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">gulp</a>
</div>
    </div>
</div>

<div class="card bg-primary">
    <div class="px-5 pb-5">
        <div class="py-5">
    <div class="icon text-info text-white">
    <i class="far fa-alicorn"></i>
</div>
</div>
<h5 class=" text-white">Built by developers for developers</h5>
<p class=" text-white mt-2 mb-0">Change almost everything in seconds using the power of Sass and Gulp.</p><div class="mt-4">
    <a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">colors</a>
    <a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">theme</a>
    <a href="#" class="badge badge-lg badge-pill badge-soft-info d-inline-block my-1 px-3">gulp</a>
</div>
    </div>
</div>
Built by developers for developers

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

Learn more
Built by developers for developers

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

Learn more 
<div class="card">
    <div class="card-body">
        <div class="delimiter-bottom pb-3 mb-4">
    <div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
    <i class="far fa-alicorn"></i>
</div>
    <h5 class="mt-4">Built by developers for developers</h5>
</div>
<p class="">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>

    </div>
    <div class="card-footer px-0 py-0 border-0 overflow-hidden">
        <a href="#" class="btn btn-block btn-primary rounded-0">Learn more</a>
    </div>
</div>

<div class="card bg-dark border-0">
    <div class="card-body">
        <div class="delimiter-bottom delimiter-dark pb-3 mb-4">
    <div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
    <i class="far fa-alicorn"></i>
</div>
    <h5 class="mt-4 text-white">Built by developers for developers</h5>
</div>
<p class=" text-white">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>

    </div>
    <div class="card-footer px-0 py-0 border-0 overflow-hidden">
        <a href="#" class="btn btn-block btn-primary rounded-0">Learn more</a>
    </div>
</div>
Built by developers for developers

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

Built by developers for developers

Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.

<div class="card">
    <div class="card-body">
        <div class="">
    <div class="pb-5">
        <div class="icon bg-white text-primary rounded-circle icon-lg icon-shape shadow">
    <i class="far fa-alicorn"></i>
</div>
    </div>
    <h5 class="font-weight-bold">Built by developers for developers</h5>
    <p class="mt-2 mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
    
</div>

    </div>
</div>

<div class="card bg-dark">
    <div class="card-body">
        <div class="">
    <div class="pb-5">
        <div class="icon bg-white text-primary rounded-circle icon-lg icon-shape shadow">
    <i class="far fa-alicorn"></i>
</div>
    </div>
    <h5 class="font-weight-bold text-white">Built by developers for developers</h5>
    <p class="mt-2 text-white mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
    
</div>

    </div>
</div>
Created with the latest technologies

We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.

Created with the latest technologies

We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.

<div class="card">
    <div class="card-body py-4">
        <div class="d-flex align-items-start">
    <div class="col-auto">
        <div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
    <i class="fab fa-html5"></i>
</div>
    </div>
    <div class="icon-text pl-4">
        <h5 class="ma-0 ">Created with the latest technologies</h5>
        <p class="mb-0">We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.</p>
    </div>
</div>

    </div>
</div>

<div class="card bg-dark">
    <div class="card-body py-4">
        <div class="d-flex align-items-start">
    <div class="col-auto">
        <div class="icon bg-white rounded-circle icon-shape">
    <i class="fab fa-html5"></i>
</div>
    </div>
    <div class="icon-text pl-4">
        <h5 class="ma-0  text-white">Created with the latest technologies</h5>
        <p class="mb-0 text-muted">We use the latest technologies and tools in order to create a better code that not only works great, but it is easy easy to work with too.</p>
    </div>
</div>

    </div>
</div>

List group

<div class="card">
    <div class="card-body text-center">
        <a href="#!">
            <img alt="Image placeholder" src="../../assets/img/svg/illustrations/design-thinking.svg" class="img-fluid img-center" style="height:90px;">

        </a>
        <h5 class="mt-5 mb-0"><a href="#">Privacy center</a></h5>
    </div>
    <div class="list-group list-group-sm list-group-flush">
        <a href="#" class="list-group-item list-group-item-action">Delete history</a>
        <a href="#" class="list-group-item list-group-item-action">Change privacy settings</a>
        <a href="#" class="list-group-item list-group-item-action">Manage cookies</a>
    </div>
    <div class="card-footer d-flex align-items-center justify-content-between">
        <div>
            <a href="#!" class="text-sm text-muted">
                <i class="far fa-edit mr-2"></i>23 topics
            </a>
        </div>
        <div class="text-right">
            <div class="actions">
                <a href="#!" class="action-item"><i class="far fa-angle-right"></i></a>
            </div>
        </div>
    </div>
</div>
Image placeholder
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card title

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

Go somewhere 
<div class="card">
    <!-- Card image -->
    <a href="#!">
        <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="card-img-top">

    </a>
    <!-- List group -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <!-- Card body -->
    <div class="card-body">
        <h5 class="card-title mb-3">Card title</h5>
        <p class="card-text mb-4">
            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-sm btn-primary rounded-pill">Go somewhere</a>
    </div>
</div>
<div class="card">
    <div class="list-group list-group-flush">
        <a href="#theme-integration" data-scroll-to data-scroll-to-offset="50" class="list-group-item list-group-item-action d-flex justify-content-between">
            <div>
                <i class="far fa-desktop mr-2"></i>
                <span>Theme integration</span>
            </div>
            <div>
                <i class="far fa-angle-right"></i>
            </div>
        </a>
        <a href="#customization" data-scroll-to data-scroll-to-offset="50" class="list-group-item list-group-item-action d-flex justify-content-between">
            <div>
                <i class="far fa-hand-pointer mr-2"></i>
                <span>Customization</span>
            </div>
            <div>
                <i class="far fa-angle-right"></i>
            </div>
        </a>
        <a href="#fonts-and-colors" data-scroll-to data-scroll-to-offset="50" class="list-group-item list-group-item-action d-flex justify-content-between">
            <div>
                <i class="far fa-tint mr-2"></i>
                <span>Fonts and colors</span>
            </div>
            <div>
                <i class="far fa-angle-right"></i>
            </div>
        </a>
    </div>
</div>

News

Over the Globe
Image placeholder
How to start a business with Purpose

Some quick example text tod make up the bulk of the card's content. 

<div class="card">
    <div class="card-header py-3">
        <div class="d-flex align-items-center">
            <div class="icon icon-xs text-primary rounded border border-sm border-light p-1">
                <i class="far fa-globe"></i>
            </div>
            <div class="icon-text pl-2">
                <h6 class="text-sm font-weight-bold mb-0">Over the Globe</h6>
            </div>
        </div>
    </div>
    <img alt="Image placeholder" src="../../assets/img/theme/light/news-1-800x600.jpg" class="img-fluid">

    <div class="card-body text-center">
        <a href="#" class="d-block h5 lh-150 text-monospace">How to start a business with Purpose</a>
        <p class="">
            Some quick example text tod make up the bulk of the card's content.
        </p>
        <ul class="list-inline mb-0">
            <li class="list-inline-item pr-4">
                <a href="#" class="text-muted" data-toggle="tooltip" data-title="Share news">
                    <i class="far fa-share"></i></a>
            </li>
            <li class="list-inline-item">
                <a href="#" class="text-muted" data-toggle="tooltip" data-title="Save for later">
                    <i class="far fa-bookmark"></i>
                </a>
            </li>
        </ul>
    </div>
</div>
Over the Globe
Image placeholder
How to start a business with Purpose

Some quick example text tod make up the bulk of the card's content.

Jan 23 
<div class="card">
    <div class="card-header py-3">
        <div class="d-flex align-items-center">
            <div class="icon icon-xs text-primary rounded border border-sm border-light p-1">
                <i class="far fa-globe"></i>
            </div>
            <div class="icon-text pl-2">
                <h6 class="text-sm font-weight-bold mb-0">Over the Globe</h6>
            </div>
        </div>
    </div>
    <img alt="Image placeholder" src="../../assets/img/theme/light/news-1-800x600.jpg" class="img-fluid">

    <div class="card-body">
        <a href="#" class="d-block h6 text-monospace">How to start a business with Purpose</a>
        <p class="">
            Some quick example text tod make up the bulk of the card's content.
        </p>

        <div class="d-flex align-items-center justify-content-between">
            <div>
                <span class="text-sm text-muted mt-4 mb-0">Jan 23</span>
            </div>
            <div class="text-right">
                <ul class="list-inline mb-0">
                    <li class="list-inline-item pr-3">
                        <a href="#" class="text-muted" data-toggle="tooltip" data-title="Share news">
                            <i class="far fa-share"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="text-muted" data-toggle="tooltip" data-title="Save for later">
                            <i class="far fa-bookmark"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
Today's headlines
Over the Globe
Image placeholder
How to start a business with Purpose

Cards support a wide variety of content, including images, text, list groups, links, and more.

Jan 23 
<div class="card">
    <div class="card-header py-3">
        <div class="border-bottom pb-3 mb-3">
            <h6 class="text-sm mb-0">Today's headlines</h6>
        </div>
        <div class="d-flex align-items-center">
            <div class="icon icon-xs text-primary rounded border border-sm border-light p-1">
                <i class="far fa-globe"></i>
            </div>
            <div class="icon-text pl-2">
                <h6 class="text-sm font-weight-bold mb-0">Over the Globe</h6>
            </div>
        </div>
    </div>
    <img alt="Image placeholder" src="../../assets/img/theme/light/news-1-800x600.jpg" class="img-fluid">

    <div class="card-body">
        <a href="#" class="d-block h6 text-monospace">How to start a business with Purpose</a>
        <p class="mb-0">
            Cards support a wide variety of content, including images, text, list groups, links, and more.
        </p>
    </div>
    <ul class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action">If Purpose is so terrible, Why don't statistics show it?</a>
        <a href="#" class="list-group-item list-group-item-action">At last, the secret to Purpose is revealed</a>
    </ul>
    <div class="card-footer">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <span class="text-sm text-muted mt-4 mb-0">Jan 23</span>
            </div>
            <div class="text-right">
                <ul class="list-inline mb-0">
                    <li class="list-inline-item pr-3">
                        <a href="#" class="text-muted" data-toggle="tooltip" data-title="Share news">
                            <i class="far fa-share"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="text-muted" data-toggle="tooltip" data-title="Save for later">
                            <i class="far fa-bookmark"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Overlay

Image placeholder

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

Marketing 
<div class="card card-overlay hover-shadow-lg hover-translate-y-n10">
    <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x900.jpg" class="card-img">
<span class="mask bg-dark opacity-8"></span><div class="card-img-overlay d-flex flex-column align-items-center p-0">
        <div class="overlay-text w-75 mt-auto p-4">
            <p class="lead">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <a  href="#!" class="link link-underline-white font-weight-bold">Marketing</a>
        </div>
        <div class="overlay-actions w-100 card-footer mt-auto d-flex justify-content-between align-items-center">
            <div>
                <a href="#!" class="h5 mb-0">Living dangerously</a>
            </div>
            <div>
                <div class="actions">
                    <a href="#!" class="action-item action-item-lg mr-4"><i class="far fa-paperclip"></i></a>
                    <a href="#!" class="action-item action-item-lg mr-4"><i class="far fa-eye"></i></a>
                    <a href="#!" class="action-item action-item-lg"><i class="far fa-heart"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
Image placeholder

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

Marketing 
<div class="card card-overlay card-hover-overlay hover-shadow-lg hover-translate-y-n10">
    <figure class="figure">
        <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x900.jpg" class="img-fluid">

    </figure>
    <div class="card-img-overlay d-flex flex-column align-items-center p-0">
        <div class="overlay-text w-75 mt-auto p-4">
            <p class="lead">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <a href="#!" class="link link-underline-white font-weight-bold">Marketing</a>
        </div><div class="overlay-actions w-100 card-footer mt-auto d-flex justify-content-between align-items-center">
            <div>
                <a href="#!" class="h6 mb-0">Living dangerously</a>
            </div>
            <div>
                <div class="actions">
                    <a href="#!" class="action-item mr-3"><i class="far fa-paperclip"></i></a>
                    <a href="../../assets/img/theme/light/" class="action-item mr-3" data-fancybox="gallery"><i class="far fa-eye"></i></a>
                    <a href="#!" class="action-item"><i class="far fa-heart"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

Pricing

Single
$3/ per month
  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
Multiple
$6/ per month
  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
<div class="card-deck">
<div class="card card-pricing text-center px-3">
    <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white">Single</span>
    <div class="card-header py-5 border-0">
        <div class="h1 text-primary text-center mb-0" data-pricing-value="12">$<span class="price">3</span><span class="h6 ml-2">/ per month</span></div>
    </div>
    <div class="card-body delimiter-top">
        <ul class="list-unstyled mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul><button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button></div>
</div>

<div class="card card-pricing border-md border-primary text-center scale-110 popular">
    <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white">Multiple</span>
    <div class="card-header py-5 border-0">
        <div class="h1 text-primary text-center mb-0" data-pricing-value="24">$<span class="price">6</span><span class="h6 ml-2">/ per month</span></div>
    </div>
    <div class="card-body delimiter-top">
        <ul class="list-unstyled mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul><button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button></div>
</div>

</div>
Single
$3
per month
  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
Multiple
$6
per month
  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
<div class="card-deck">
<div class="card card-pricing text-center px-3">
    <div class="card-header py-5 border-0 delimiter-bottom">
        <span class="d-block h5 mb-4">Single</span>
        <div class="h1 text-primary text-center mb-0" data-pricing-value="12">$<span class="price">3</span></div>
        <span class="h6 text-muted">per month</span>
    </div>
    <div class="card-body">
        <ul class="list-unstyled mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-sm btn-neutral mb-3">Start free trial</button>
    </div>
</div>

<div class="card card-pricing text-center px-3 scale-110 popular">
    <div class="card-header py-5 border-0 delimiter-bottom">
        <span class="d-block h5 mb-4">Multiple</span>
        <div class="h1 text-primary text-center mb-0" data-pricing-value="24">$<span class="price">6</span></div>
        <span class="h6 text-muted">per month</span>
    </div>
    <div class="card-body">
        <ul class="list-unstyled mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-sm btn-neutral mb-3">Start free trial</button>
    </div>
</div>

</div>
Single

$3/ per month

  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
Multiple

$6/ per month

  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
<div class="card-deck">
<div class="card card-pricing border-dark text-center">
    <div class="card-header pt-0 bg-dark">
        <span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-light">Single</span>
        <div class="py-5">
            <h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-white ml-2">/ per month</span></h1>
        </div>
    </div>
    <div class="card-body">
        <ul class="list-unstyled mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
    </div>
</div>

<div class="card card-pricing border-primary text-center scale-110 popular">
    <div class="card-header pt-0 bg-primary">
        <span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-gradient-warning text-white">Multiple</span>
        <div class="py-5">
            <h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">6</span><span class="h6 text-white ml-2">/ per month</span></h1>
        </div>
    </div>
    <div class="card-body">
        <ul class="list-unstyled mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
    </div>
</div>

</div>
Single

$3/ per month

  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
Multiple

$6/ per month

  • Up to 5 users
  • Basic support on Github
  • Monthly updates
  • Free cancelation
<div class="card-deck">
<div class="card card-pricing border-0 text-center hover-translate-y-n3 bg-gradient-dark">
    <div class="card-header py-0 border-0">
        <span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-primary text-white">Single</span>
        <div class="py-5">
            <h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-white ml-2">/ per month</span></h1>
        </div>
    </div>
    <hr class="divider divider-fade divider-dark my-0" />
    <div class="card-body">
        <ul class="list-unstyled text-white mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
    </div>
</div>

<div class="card card-pricing border-0 text-center hover-scale-110 shadow-lg bg-primary popular">
    <div class="card-header py-0 border-0">
        <span class="h6 d-inline-block mx-auto px-4 py-1 rounded-bottom shadow-sm bg-white">Multiple</span>
        <div class="py-5">
            <h1 class="display-4 mb-0 text-white" data-pricing-value="15">$<span class="price">6</span><span class="h6 text-white ml-2">/ per month</span></h1>
        </div>
    </div>
    <hr class="divider divider-fade divider-dark my-0" />
    <div class="card-body">
        <ul class="list-unstyled text-white mb-4">
            <li>Up to 5 users</li>
            <li>Basic support on Github</li>
            <li>Monthly updates</li>
            <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-sm btn-neutral mb-3">Order now</button>
    </div>
</div>

</div>

Profile

Default

Image placeholder
Image placeholder
Betty Mavis
Senior Developer
San Francisco, SF 
<div class="card card-profile">
    <div class="card-profile-cover">
        <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x400.jpg" class="card-img-top">

    </div>
    <a href="#" class="mx-auto">
        <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="card-profile-image avatar rounded-circle shadow hover-shadow-lg">

    </a>
    <div class="card-body text-center">
        <div class="mb-3">
            <h5 class="mb-0">Betty Mavis</h5>
            <span class="text-muted">Senior Developer</span>
        </div>
        <span class="text-muted"><i class="far fa-map-marker mr-2"></i>San Francisco, SF</span>
        <div class="pt-4 mt-4 delimiter-top">
            <div class="btn-group">
                <button class="btn btn-sm btn-primary btn-icon">
                    <span class="btn-inner--icon"><i class="far fa-user"></i></span>
                    <span class="btn-inner--text">Follow</span>
                </button>
                <button class="btn btn-sm btn-dark">
                    <i class="far fa-envelope"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Contact

<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center">
            <a href="#" class="avatar rounded-circle avatar-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
            <div class="avatar-content">
                <a href="#" class="h6 mb-0">Betty Mavis</a>
                <a href="#" class="d-block text-sm text-muted font-weight-bold">betty.mavis@purpose.com</a>
                <span class="text-muted">
                    <i class="far fa-clock mr-2"></i>10:30 AM
                </span>
            </div>
        </div>
    </div>
</div>

Rating

<div class="card">
    <div class="p-3">
        <div class="d-flex align-items-center">
            <div>
                <a href="#" class="avatar rounded-circle d-inline-block">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
            </div>
            <div class="pl-3">
                <a href="#" class="h6 text-sm">Betty Mavis</a><span class="static-rating static-rating-sm d-block"><i class="star far fa-star voted"></i>
    <i class="star far fa-star voted"></i>
    <i class="star far fa-star voted"></i>
    <i class="star far fa-star voted"></i>
    <i class="star far fa-star"></i></span>

            </div>
        </div>
    </div>
</div>

Online status

Image placeholder
Betty Mavis

Time is running, so you better be fast

● Online 
<div class="card">
    <div class="card-body">
        <div class="row align-items-center">
    <div class="col-auto">
        <!-- Avatar -->
        <a href="#" class="avatar rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    </div>
    <div class="col ml-n2">
        <a href="#!" class="d-block h6 mb-0">Betty Mavis</a><p class="card-text text-sm text-muted mb-0">
            Time is running, so you better be fast
        </p><div>
            <span class="text-sm text-success">●</span>
            <small>Online</small>
        </div>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-xs btn-secondary btn-icon">
            <span class="btn-inner--icon"><i class="far fa-plus"></i></span>
            <span class="btn-inner--text">Add</span>
        </button>
    </div>
</div>

    </div>
</div>

Shop

Product

Image placeholder
New
Ultraboost shoes

Customize your home experience with this product.

$120 USD 
<div class="card card-product">
    <div class="card-image">
        <figure class="figure">
            <a href="#">
                <img alt="Image placeholder" src="../../assets/img/theme/light/product-1.png" class="img-center img-fluid">

            </a>
        </figure>
        
        <span class="ribbon ribbon-right bg-gradient-primary text-white rounded-circle">New</span>
        
    </div>
    <div class="card-body text-center pt-0">
        <h6><a href="#">Ultraboost shoes</a></h6>
        
        <p class="text-sm">
            Customize your home experience with this product.
        </p>
        
        <span class="card-price">$120 USD</span>
        <div class="product-colors mt-3">
            <a href="#" style="background-color: #59ad46;" data-toggle="tooltip" data-original-title="Green"></a>
            <a href="#" style="background-color: #04050a;" data-toggle="tooltip" data-original-title="Black"></a>
            <a href="#" style="background-color: #62aedd;" data-toggle="tooltip" data-original-title="Blueish"></a>
            <a href="#" style="background-color: #e84385;" data-toggle="tooltip" data-original-title="Pink"></a>
        </div>
    </div>
    <div class="actions card-product-actions" data-animation-in="slideInLeft" data-animation-out="slideOutLeft">
        <button type="button" class="action-item" data-toggle="tooltip" data-original-title="Add to cart">
            <i class="far fa-shopping-bag"></i>
        </button>
        <button type="button" class="action-item" data-toggle="tooltip" data-original-title="Wishlist">
            <i class="far fa-heart"></i>
        </button>
    </div>
</div>

Checkout summary

Summary
3 items
Image placeholder
Women running shoes
2 x $23.00
$46.00
Image placeholder
Women running shoes
2 x $49.50
$99.00
Image placeholder
Women running shoes
2 x $99.00
$198.00
Subtotal:
$330.50
Shipping
Fast Delivery
$25.00
Total:
$355.50 
<div class="card" id="card-summary">
    <div class="card-header py-3">
        <div class="row align-items-center">
            <div class="col-6">
                <span class="h6">Summary</span>
            </div>
            <div class="col-6 text-right">
                <span class="badge badge-pill badge-soft-success">3 items</span>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-8">
                <div class="media align-items-center">
                    <img alt="Image placeholder" class="mr-2" src="../../assets/img/theme/light/product-1.png" style="width: 42px;">
                    <div class="media-body">
                        <div class="text-limit lh-100">
                            <small class="font-weight-bold mb-0">Women running shoes</small>
                        </div>
                        <small class="text-muted">2 x $23.00</small>
                    </div>
                </div>
            </div>
            <div class="col-4 text-right lh-100">
                <small class="text-dark">$46.00</small>
            </div>
        </div>
        <div class="row mt-3 pt-3 delimiter-top">
            <div class="col-8">
                <div class="media align-items-center">
                    <img alt="Image placeholder" class="mr-2" src="../../assets/img/theme/light/product-2.png" style="width: 42px;">
                    <div class="media-body">
                        <div class="text-limit lh-100">
                            <small class="font-weight-bold mb-0">Women running shoes</small>
                        </div>
                        <small class="text-muted">2 x $49.50</small>
                    </div>
                </div>
            </div>
            <div class="col-4 text-right lh-100">
                <small class="text-dark">$99.00</small>
            </div>
        </div>
        <div class="row mt-3 pt-3 delimiter-top">
            <div class="col-8">
                <div class="media align-items-center">
                    <img alt="Image placeholder" class=" mr-2" src="../../assets/img/theme/light/product-3.png" style="width: 42px;">
                    <div class="media-body">
                        <div class="text-limit lh-100">
                            <small class="font-weight-bold mb-0">Women running shoes</small>
                        </div>
                        <small class="text-muted">2 x $99.00</small>
                    </div>
                </div>
            </div>
            <div class="col-4 text-right lh-100">
                <small class="text-dark">$198.00</small>
            </div>
        </div>
        <!-- Subtotal -->
        <div class="row mt-3 pt-3 border-top">
            <div class="col-8 text-right">
                <small class="font-weight-bold">Subtotal:</small>
            </div>
            <div class="col-4 text-right">
                <span class="text-sm font-weight-bold">$330.50</span>
            </div>
        </div>
        <!-- Shipping -->
        <div class="row mt-3 pt-3 border-top">
            <div class="col-8 text-right">
                <div class="media align-items-center">
                    <i class="far fa-shipping-fast"></i>
                    <div class="media-body">
                        <div class="text-limit lh-100">
                            <small class="font-weight-bold mb-0">Shipping</small>
                        </div>
                        <small class="text-muted">Fast Delivery</small>
                    </div>
                </div>
            </div>
            <div class="col-4 text-right">
                <span class="text-sm font-weight-bold">$25.00</span>
            </div>
        </div>
        <!-- Subtotal -->
        <div class="row mt-3 pt-3 border-top">
            <div class="col-8 text-right">
                <small class="text-uppercase font-weight-bold">Total:</small>
            </div>
            <div class="col-4 text-right">
                <span class="text-sm font-weight-bold">$355.50</span>
            </div>
        </div>

    </div>
</div>

Social

Text post

Image placeholder
Alex Smith is traveling to Paris with Tom Cruise
February 13 at 10:25 PM

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Like Comment Share
Image placeholder
Open post Report inappropriate Get the embed code 
<div class="card">
    <div class="card-header py-4 d-flex align-items-center">
        <div>
            <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle hover-shadow-lg hover-scale-110">

        </div>
        <div class="pl-3">
            <div class="text-sm">
                <a href="#!" class="font-weight-bold">Alex Smith</a> is <i class="far fa-plane-departure px-1"></i> traveling to Paris with <a href="#!" class="font-weight-bold">Tom Cruise</a>
            </div>
            <small class="d-block">February 13 at 10:25 PM</small>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">
            Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
        </p>
    </div><div class="card-body py-2 px-lg-5 border-top">
        <div class="actions d-flex justify-content-between">
            <a href="#!" class="action-item">
                <i class="far fa-thumbs-up"></i>
                <span class="font-weight-bold">Like</span>
            </a>
            <a href="#!" class="action-item">
                <i class="far fa-comment"></i>
                <span class="font-weight-bold">Comment</span>
            </a>
            <a href="#!" class="action-item">
                <i class="far fa-share-alt"></i>
                <span class="font-weight-bold">Share</span>
            </a>
        </div>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col-8 col-md-9 d-flex align-items-center">
                <div class="pr-3">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar  rounded-circle avatar-sm">

                </div>
                <form class="card-comment-box" role="form">
                    <textarea rows="1" class="form-control" data-toggle="autosize" placeholder="Add a comment..."></textarea>
                </form>
            </div>
            <div class="col-4 col-md-3 text-right">
                <div class="actions">
                    <a href="#!" class="action-item"><i class="far fa-smile-wink"></i></a>
                    <a href="#!" class="action-item"><i class="far fa-camera"></i></a>
                    <div class="dropdown">
                        <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false">
                            <i class="far fa-ellipsis-h"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Open post</a>
                            <a class="dropdown-item" href="#">Report inappropriate</a>
                            <a class="dropdown-item" href="#">Get the embed code</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Image post

Image placeholder
Alex Smith is traveling to Paris with Tom Cruise
February 13 at 10:25 PM

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Image placeholder
Like Comment Share
Image placeholder
Open post Report inappropriate Get the embed code 
<div class="card">
    <div class="card-header py-4 d-flex align-items-center">
        <div>
            <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle hover-shadow-lg hover-scale-110">

        </div>
        <div class="pl-3">
            <div class="text-sm">
                <a href="#!" class="font-weight-bold">Alex Smith</a> is <i class="far fa-plane-departure px-1"></i> traveling to Paris with <a href="#!" class="font-weight-bold">Tom Cruise</a>
            </div>
            <small class="d-block">February 13 at 10:25 PM</small>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">
            Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
        </p>
    </div><img alt="Image placeholder" src="../../assets/img/theme/light/img-1-800x600.jpg" class="img-fluid">
<div class="card-body py-2 px-lg-5 border-top">
        <div class="actions d-flex justify-content-between">
            <a href="#!" class="action-item">
                <i class="far fa-thumbs-up"></i>
                <span class="font-weight-bold">Like</span>
            </a>
            <a href="#!" class="action-item">
                <i class="far fa-comment"></i>
                <span class="font-weight-bold">Comment</span>
            </a>
            <a href="#!" class="action-item">
                <i class="far fa-share-alt"></i>
                <span class="font-weight-bold">Share</span>
            </a>
        </div>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col-8 col-md-9 d-flex align-items-center">
                <div class="pr-3">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar  rounded-circle avatar-sm">

                </div>
                <form class="card-comment-box" role="form">
                    <textarea rows="1" class="form-control" data-toggle="autosize" placeholder="Add a comment..."></textarea>
                </form>
            </div>
            <div class="col-4 col-md-3 text-right">
                <div class="actions">
                    <a href="#!" class="action-item"><i class="far fa-smile-wink"></i></a>
                    <a href="#!" class="action-item"><i class="far fa-camera"></i></a>
                    <div class="dropdown">
                        <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false">
                            <i class="far fa-ellipsis-h"></i>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Open post</a>
                            <a class="dropdown-item" href="#">Report inappropriate</a>
                            <a class="dropdown-item" href="#">Get the embed code</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Stats

Basic

Refresh Manage Widgets Settings
$25.000 Monthly payments 
<div class="card card-stats"><div class="actions">
        <a href="#" class="action-item">
            <i class="far fa-sync-alt"></i>
        </a>
        <div class="dropdown">
            <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div><div class="card-body">
        <div class="d-flex">
            <div>
                <div class="icon text-dark icon-sm">
    <i class="far fa-credit-card"></i>
</div>
            </div>
            <div class="pl-4">
                <span class="d-block h5  mr-2 mb-1">$25.000</span>
                <span class="">Monthly payments</span>
            </div>
        </div>
    </div>
</div>

Colored

Refresh Manage Widgets Settings
$25.000 Monthly payments
Refresh Manage Widgets Settings
80% Total sales
Refresh Manage Widgets Settings
230 Working hours 
<div class="card card-stats bg-gradient-info"><div class="actions actions-dark">
        <a href="#" class="action-item">
            <i class="far fa-sync-alt"></i>
        </a>
        <div class="dropdown">
            <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div><div class="card-body">
        <div class="d-flex">
            <div>
                <div class="icon text-white icon-sm">
    <i class="far fa-credit-card"></i>
</div>
            </div>
            <div class="pl-4">
                <span class="d-block h5 text-white mr-2 mb-1">$25.000</span>
                <span class="text-white">Monthly payments</span>
            </div>
        </div>
    </div>
</div>

<div class="card card-stats bg-gradient-warning"><div class="actions actions-dark">
        <a href="#" class="action-item">
            <i class="far fa-sync-alt"></i>
        </a>
        <div class="dropdown">
            <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div><div class="card-body">
        <div class="d-flex">
            <div>
                <div class="icon text-white icon-sm">
    <i class="far fa-tags"></i>
</div>
            </div>
            <div class="pl-4">
                <span class="d-block h5 text-white mr-2 mb-1">80%</span>
                <span class="text-white">Total sales</span>
            </div>
        </div>
    </div>
</div>

<div class="card card-stats bg-gradient-primary"><div class="actions actions-dark">
        <a href="#" class="action-item">
            <i class="far fa-sync-alt"></i>
        </a>
        <div class="dropdown">
            <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div><div class="card-body">
        <div class="d-flex">
            <div>
                <div class="icon text-white icon-sm">
    <i class="far fa-shopping-basket"></i>
</div>
            </div>
            <div class="pl-4">
                <span class="d-block h5 text-white mr-2 mb-1">230</span>
                <span class="text-white">Working hours</span>
            </div>
        </div>
    </div>
</div>

Dark

Refresh Manage Widgets Settings
$25.000 Monthly payments 
<div class="card card-stats bg-gradient-dark"><div class="actions actions-dark">
        <a href="#" class="action-item">
            <i class="far fa-sync-alt"></i>
        </a>
        <div class="dropdown">
            <a href="#" class="action-item" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div><div class="card-body">
        <div class="d-flex">
            <div>
                <div class="icon text-white icon-sm">
    <i class="far fa-credit-card"></i>
</div>
            </div>
            <div class="pl-4">
                <span class="d-block h5 text-white mr-2 mb-1">$25.000</span>
                <span class="text-white">Monthly payments</span>
            </div>
        </div>
    </div>
</div>

Progress

Total sales
75%
Total sales
75% 
<div class="card card-stats">
    <div class="card-body">
        <h6 class="card-title text-muted mb-2">Total sales</h6>
        <div class="row align-items-center">
            <div class="col">
                <div class="row align-items-center no-gutters">
                    <div class="col-auto">
                        <span class="h5  mr-2">75%</span>
                    </div>
                    <div class="col">
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <div class="icon text-dark icon-sm">
    <i class="far fa-credit-card"></i>
</div>
            </div>
        </div>
    </div>
</div>

<div class="card card-stats bg-gradient-primary">
    <div class="card-body">
        <h6 class="card-title text-white mb-2">Total sales</h6>
        <div class="row align-items-center">
            <div class="col">
                <div class="row align-items-center no-gutters">
                    <div class="col-auto">
                        <span class="h5 text-white mr-2">75%</span>
                    </div>
                    <div class="col">
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <div class="icon text-white icon-sm">
    <i class="far fa-credit-card"></i>
</div>
            </div>
        </div>
    </div>
</div>

Comparison

New products
339

25% Since last month 

<div class="card card-stats">
    <!-- Card body -->
    <div class="card-body">
        <div class="row">
            <div class="col">
                <h6 class="text-muted mb-1">New products</h6>
                <span class="h5 font-weight-bold mb-0">339</span>
            </div>
            <div class="col-auto">
                <div class="icon bg-gradient-warning text-white rounded-circle icon-shape">
    <i class="far fa-tags"></i>
</div>
            </div>
        </div>
        <p class="mt-3 mb-0 text-sm">
            <span class="badge badge-soft-success mr-2"><i class="far fa-arrow-up"></i> 25%</span>
            <span class="text-nowrap">Since last month</span>
        </p>
    </div>
</div>

Team

Image placeholder
Bettie Mavis
CEO

Some quick example text tod make up the bulk of the card's content.

<div class="card">
    <div class="card-body">
        <div class="text-center">
            <a href="#" class="avatar rounded-circle avatar-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
            <h5 class=" mt-4 mb-0">Bettie Mavis</h5>
            <span class="d-block text-muted">CEO</span>
            <p class="mt-3 lh-180">Some quick example text tod make up the bulk of the card's content.</p>
            <div class="mt-3 pt-4 delimiter-top">
                <a href="#" class="btn btn-sm btn-facebook btn-icon-only rounded-circle hover-scale-110 mr-3">
                    <span class="btn-inner--icon">
                        <i class="fab fa-facebook"></i>
                    </span>
                </a>
                <a href="#" class="btn btn-sm btn-instagram btn-icon-only rounded-circle hover-scale-110 mr-3">
                    <span class="btn-inner--icon">
                        <i class="fab fa-instagram"></i>
                    </span>
                </a>
                <a href="#" class="btn btn-sm btn-twitter btn-icon-only rounded-circle hover-scale-110">
                    <span class="btn-inner--icon">
                        <i class="fab fa-twitter"></i>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
Image placeholder
Bettie Mavis

CEO

<div class="card overflow-hidden" data-animate-hover="2">
    <div class="overflow-hidden">
        <div class="animate-this">
            <a href="#">
                <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="card-img-top">

            </a>
        </div>
    </div>
    <div class="card-body text-center">
        <h5 class="card-title mb-2">Bettie Mavis</h5>
        <p class="text-muted mb-0">CEO</p>
        <ul class="nav justify-content-center mt-3">
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-instagram"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-dribbble"></i></a>
            </li>
        </ul>
    </div>
</div>
<div class="card bg-dark opacity-container text-white overflow-hidden shadow border-0">
    <a href="#">
        <div class="card-img-bg" style="background-image: url('../..//assets/img/theme/light/team-3-800x800.jpg');"></div>
        <span class="mask bg-gradient-dark opacity-6 hover-opacity-4"></span>
        <div class="card-body px-5 py-5">
            <div style="min-height: 250px;">
                <span class="h3 d-block text-white font-weight-bold mb-4">Bettie Mavis</span>
                <span class="h6 d-block text-white mt-4 mb-2">E: bettiemavis@company.com</span>
                <span class="h6 d-block text-white">T: 0755.222.333</span>
            </div>
            <span class="text-white text-uppercase font-weight-bold">
                See profile
                <i class="far fa-angle-right ml-2"></i>
            </span>
        </div>
    </a>
</div>
Image placeholder
CEO E: bettiemavis@company.com T: 0755.222.333 
<div class="card card-overlay card-hover-overlay">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="img-fluid">

    <div class="card-img-overlay d-flex flex-column align-items-center p-0">
        <div class="overlay-text w-75 mt-auto">
            <span class="link link-underline-white font-weight-bold">CEO</span>
            <span class="h6 d-block text-white mt-4 mb-2">E: bettiemavis@company.com</span>
            <span class="h6 d-block text-white">T: 0755.222.333</span>
        </div>
        <div class="overlay-actions w-100 card-footer mt-auto d-flex justify-content-between align-items-center">
            <div>
                <a href="#!" class="h5 mb-0">Bettie Mavis</a>
            </div>
            <div>
                <div class="actions">
                    <a href="#!" class="action-item mr-3"><i class="fab fa-facebook"></i></a>
                    <a href="#!" class="action-item mr-3"><i class="fab fa-twitter"></i></a>
                    <a href="#!" class="action-item"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

Testimonial

Image placeholder
Heather Wrights
@Google

Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.

<div class="card">
    <div class="card-body">
        <div class="text-center">
            <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle avatar-lg">

            <h5 class=" mt-4 mb-0">Heather Wrights</h5>
            <span class="d-block text-muted">@Google</span>
            <p class="mt-4 lh-180">Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.</p>
            <span class="static-rating static-rating-sm">
                <i class="star fas fa-star voted"></i>
                <i class="star fas fa-star voted"></i>
                <i class="star fas fa-star voted"></i>
                <i class="star fas fa-star voted"></i>
                <i class="star fas fa-star voted"></i>
            </span>
        </div>
    </div>
</div>

Heads up! For the lightbox feature you will need to add additional scripts to your page. See the Fancybox plugin.

Image placeholder

Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.

Someone famous in Heather Wrights 
<div class="card" data-animate-hover="1">
    <div class="animate-this">
        <img alt="Image placeholder" src="../../assets/img/theme/light/img-6-800x600.jpg" class="card-img-top">

        <a href="https://www.youtube.com/watch?v=mqpwDJpI3Rc" class="btn btn-lg btn-white btn-icon-only rounded-circle shadow-sm position-absolute right-4 top-4 hover-scale-110" data-fancybox>
            <span class="btn-inner--icon">
                <i class="far fa-play"></i>
            </span>
        </a>
    </div>
    <div class="card-body">
        <blockquote class="blockquote">
            <span class="quote"></span>
            <div class="quote-text">
                <p class="font-italic lh-170">Amazing template! All-in-one, clean code, beautiful design, and really not hard to work with.Highly recommended for any kind on website.</p>
                <footer class="blockquote-footer">
                    Someone famous in <cite title="Source Title">Heather Wrights</cite>
                </footer>
            </div>
        </blockquote>
    </div>
</div>

Wise words!

Purpose is a professional theme reviewed and approved by the Bootstrap Creators themeselves. With each purchase you get a pack of high quality components and page layouts to start building your website instantly.

CEO of Company Inc Heather Wrights 
<blockquote class="blockquote blockquote-card py-5 px-5 rounded-right bg-secondary">
    <h3 class="h2 font-weight-700">Wise words!</h3>
    <p class="lead">Purpose is a professional theme reviewed and approved by the Bootstrap Creators themeselves. With each purchase you get a pack of high quality components and page layouts to start building your website instantly.</p>
    <footer class="blockquote-footer">CEO of Company Inc <cite class="font-weight-600" title="Source Title">Heather Wrights</cite>
    </footer>
</blockquote>
Summary