Card 1

Card title

This is some text within a card body.

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="mb-0">This is some text within a card body.</p>
    </div>
</div>

Card 2

Card title

This is some text within a card body.

<div class="card bg-secondary">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="mb-0">This is some text within a card body.</p>
    </div>
</div>

Card 3

EQUATION Admin

Powerful CRM admin dashboard template based on Bootstrap and Sass for all kind of back-end projects.

<div class="card style-5  mb-md-0 mb-4">
    <div class="card-top-content">
        <div class="avatar avatar-md">
            <img alt="avatar" src="assets/img/profile-6.jpeg" class="rounded-circle">
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <h5 class="card-title mb-2">Mary McDonald</h5>
            <p class="card-text">Awesome Project, it has been the perfect fit for my Project</p>
            <a href="javascript:void(0);" class="text-warning mt-2 d-inline-block">Follow</a>
        </div>
    </div>
</div>

Card 4

avatar
Andy King

It's a really good project, love the design and code quality also have great support.

Follow
<!-- Bg Primary -->
<div class="card style-5 bg-primary mb-md-0 mb-4">
    <div class="card-top-content">
        <div class="avatar avatar-md">
            <img alt="avatar" src="assets/img/profile-6.jpeg" class="rounded-circle">
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <h5 class="card-title mb-2">Mary McDonald</h5>
            <p class="card-text">Awesome Project, it has been the perfect fit for my Project</p>
            <a href="javascript:void(0);" class="text-warning mt-2 d-inline-block">Follow</a>
        </div>
    </div>
</div>

Card 5

<a class="card style-7" href="https://themeforest.net/item/EQUATION-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="./assets/img/tl-2.jpeg" class="card-img-top" alt="...">
    <div class="card-footer">
        <h5 class="card-title mb-0">Kelly Young</h5>
        <p class="card-text">Project manager</p>
    </div>
</a>

Card 6

<a class="card style-7" href="https://themeforest.net/item/EQUATION-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="./assets/img/tl-2.jpeg" class="card-img-top" alt="...">
    <div class="card-header">
        <h5 class="card-title mb-0">Kelly Young</h5>
        <p class="card-text">Project manager</p>
    </div>
</a>

Card 7

<a class="card style-6" href="javascript:void(0);">
    <span class="badge badge-danger"></span>
    <img src="./assets/img/product-4.jpg" class="card-img-top" alt="...">
    <div class="card-footer">
        <div class="row">
            <div class="col-12 mb-4">
                <b>Nikon</b>
            </div>
            <div class="col-3">
                <div class="badge--group">
                    <div class="badge badge-primary badge-dot"></div>
                </div>
            </div>
            <div class="col-9 text-end">
                <div class="pricing d-flex justify-content-end">
                    <p class="text-success mb-0">$2100.00</p>
                </div>
            </div>
        </div>
    </div>
</a>

Card 8

<a class="card style-6" href="javascript:void(0);">
    <span class="badge badge-danger"></span>
    <img src="./assets/img/product-4.jpg" class="card-img-top" alt="...">
    <div class="card-footer">
        <div class="row">
            <div class="col-12 mb-4">
                <b>Shoes</b>
            </div>
            <div class="col-3">
                <div class="badge--group">
                    <div class="badge badge-danger badge-dot"></div>
                    <div class="badge badge-success badge-dot"></div>
                    <div class="badge badge-warning badge-dot"></div>
                </div>
            </div>
            <div class="col-9 text-end">
                <div class="pricing d-flex justify-content-end">
                    <p class="text-success mb-0">$95.00</p>
                </div>
            </div>
        </div>
    </div>
</a>

Card 9

<!-- Sale -->
                                                
<a class="card style-6  mb-md-0 mb-4" href="javascript:void(0);">
    <span class="badge badge-danger">SALE</span>
    <img src="./assets/img/product-3.jpg" class="card-img-top" alt="...">
    <div class="card-footer">
        <div class="row">
            <div class="col-12 mb-4">
                <b>Nike Shoes Green</b>
            </div>
            <div class="col-3">
                <div class="badge--group">
                    <div class="badge badge-success badge-dot"></div>
                    <div class="badge badge-secondary badge-dot"></div>
                    <div class="badge badge-warning badge-dot"></div>
                </div>
            </div>
            <div class="col-9 text-end">
                <div class="pricing d-flex justify-content-end">
                    <p class="text-success mb-0 me-2">$1100.00</p>
                    <p class="mb-0 line-through"><del>$2100.00</del></p>
                </div>
            </div>
        </div>
    </div>
</a>

Card 10

<!-- New -->

<a class="card style-6" href="javascript:void(0);">
    <span class="badge badge-primary">NEW</span>
    <img src="./assets/img/product-1.jpg" class="card-img-top" alt="...">
    <div class="card-footer">
        <div class="row">
            <div class="col-12 mb-4">
                <b>Nike Shoes Red</b>
            </div>
            <div class="col-3">
                <div class="badge--group">
                    <div class="badge badge-primary badge-dot"></div>
                    <div class="badge badge-danger badge-dot"></div>
                    <div class="badge badge-info badge-dot"></div>
                </div>
            </div>
            <div class="col-9 text-end">
                <div class="pricing d-flex justify-content-end">
                    <p class="text-success mb-0">$2100.00</p>
                </div>
            </div>
        </div>
    </div>
</a>

Card 11

...
Elegant and useful Admin Templates on Themeforest

Vanessa Kirby

14 Mar

<div class="card style-2 mb-md-0 mb-4">
    <img src="./assets/img/grid-blog-style-2.jpeg" class="card-img-top" alt="...">
    <div class="card-body px-0 pb-0">
        <h5 class="card-title mb-3">Elegant and useful Admin Templates on Themeforest</h5>
        <div class="media mt-4 mb-0 pt-1">
            <img src="./assets/img/profile-2.jpeg" class="card-media-image me-3" alt="">
            <div class="media-body">
                <h4 class="media-heading mb-1">Vanessa Kirby</h4>
                <p class="media-text">14 Mar</p>
            </div>
        </div>
    </div>
</div>

Card 12

...
Card title

Some quick example text to build on the card title and card's content.

Go somewhere
<div class="card">
    <img src="./assets/img/lightbox-3.jpeg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title mb-3">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and card's content.</p>
        <a href="#" class="btn btn-secondary mt-3">Go somewhere</a>
    </div>
</div>

Card 13

...

Photography

Elegant and useful Admin Templates on Themeforest

Vanessa Kirby

14 Mar

<div class="card style-3">
    <img src="./assets/img/grid-blog-style-2.jpeg" class="card-img-top" alt="...">
    <div class="card-body px-0 py-0 align-self-center">
        <p class="card-category mb-1">Photography</p>
        <h5 class="card-title mb-3">Elegant and useful Admin Templates on Themeforest</h5>
        <div class="media mt-4 mb-0 pt-1">
            <img src="./assets/img/profile-2.jpeg" class="card-media-image me-3" alt="">
            <div class="media-body">
                <h4 class="media-heading mb-1">Vanessa Kirby</h4>
                <p class="media-text">14 Mar</p>
            </div>
        </div>
    </div>
</div>

Card 14

Card Title

Ut purus elit, molestie et dignissim ac, maximus sit amet massa. Suspendisse luctus molestie luctus. Curabitur pharetra commodo ornare. Suspendisse cursus leo non magna sollicitudin, in blandit leo euismod.

<div class="card">
    <div class="card-header">
        Card Title
    </div>
    <div class="card-body">
        <p class="card-text">Ut purus elit, molestie et dignissim ac, maximus sit amet massa. Suspendisse luctus molestie luctus. Curabitur pharetra commodo ornare. Suspendisse cursus leo non magna sollicitudin, in blandit leo euismod. </p>
    </div>
    <div class="card-footer">
        <div class="row">
            <div class="col-6">
                <a href="javascript:void(0);" class="btn btn-dark w-100">Cancel</a>
            </div>
            <div class="col-6">
                <a href="javascript:void(0);" class="btn btn-secondary w-100">Agree</a>
            </div>
        </div>
    </div>
</div>

Card 15

<a class="card" href="https://themeforest.net/item/EQUATION-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="./assets/img/product-2.jpg" class="card-img-top" alt="...">
    <div class="card-footer">
        <div class="row">
            <div class="col-6">
                <b>Avocado</b>
            </div>
            <div class="col-6 text-end">
                <p class="text-success mb-0">$100.00</p>
            </div>
        </div>
    </div>
</a>

Card 16

<a class="card" href="https://themeforest.net/item/EQUATION-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="./assets/img/product-3.jpg" class="card-img-top" alt="...">
    <div class="card-footer">
        <div class="row">
            <div class="col-6">
                <p class="text-success mb-0">$623.00</p>
            </div>        
            <div class="col-6 text-end">
                <b>Shoes</b>
            </div>            
        </div>
    </div>
</a>

Card 17

avatar

Kelly Young

Project Manager

Powerful CRM admin dashboard template based on Bootstrap and Sass for all kind of back-end projects.

    <div class="card style-4">
        <div class="card-body pt-3">
            
            <div class="media mt-0 mb-3">
                <div class="">
                    <div class="avatar avatar-md avatar-indicators avatar-online me-3">
                        <img alt="avatar" src="assets/img/profile-2.jpeg" class="rounded-circle">
                    </div>
                </div>
                <div class="media-body">
                    <h4 class="media-heading mb-0">Kelly Young</h4>
                    <p class="media-text">Project Manager</p>
                </div>
            </div>
            <p class="card-text mt-4 mb-0">Powerful CRM admin dashboard template based on Bootstrap and Sass for all kind of back-end projects.</p>
        </div>
        <div class="card-footer pt-0 border-0 text-center">
            <a href="javascript:void(0);" class="btn btn-secondary w-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slack"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg> <span class="btn-text-inner ms-3">Join her on Slack</span></a>
        </div>
    </div>

Card 18

Powerful CRM admin dashboard template based on Bootstrap and Sass for all kind of back-end projects.

    <div class="card style-4">
        <div class="card-body pt-3">
            
            <div class="media mt-0 mb-3">
                <div class="">
                    <div class="avatar avatar-md avatar-indicators avatar-online me-3">
                        <img alt="avatar" src="assets/img/profile-2.jpeg" class="rounded-circle">
                    </div>
                </div>
                <div class="media-body">
                    <h4 class="media-heading mb-0">Kelly Young</h4>
                    <p class="media-text">Project Manager</p>
                </div>
            </div>
            <p class="card-text mt-4 mb-0">Powerful CRM admin dashboard template based on Bootstrap and Sass for all kind of back-end projects.</p>
        </div>
        <div class="card-footer pt-0 border-0 text-center">
            <a href="javascript:void(0);" class="btn btn-secondary w-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slack"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg> <span class="btn-text-inner ms-3">Join her on Slack</span></a>
        </div>
    </div>