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

Cork Admin

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

Visit on Themeforest. 

    <div class="card">
        <div class="card-body pt-3">
            <h5 class="card-title mb-3">Cork Admin</h5>
            <p class="card-text">Powerful CRM admin dashboard template based on Bootstrap and Sass for all kind of back-end projects.</p>
        </div>
        <div class="card-footer px-4 pt-0 border-0">
            <a href="https://themeforest.net/item/cork-responsive-admin-dashboard-template/25582188" target="_blank">Visit on Themeforest.</a>
        </div>
    </div>

Card 4

avatar
Andy King

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

Follow 

<div class="card style-5 bg-primary">
    <div class="card-top-content">
        <div class="avatar avatar-md">
            <img alt="avatar" src="../src/assets/img/profile-32.jpeg" class="rounded-circle">
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <h5 class="card-title mb-2">Andy King</h5>
            <p class="card-text">It's a really good project, love the design and code quality also have great support.</p>
            <a href="javascript:void(0);" class="mt-2 d-inline-block">Follow</a>
        </div>
    </div>
</div>

Card 5

...
Andy King

Project manager

 

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

Card 6

...
Kelly Young

Project manager

 

<a class="card style-7" href="https://themeforest.net/item/cork-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="../src/assets/img/c-5.jpg" 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

...
Nikon

$2100.00

 

<a class="card style-6" href="javascript:void(0);">
    <span class="badge badge-danger"></span>
    <img src="../src/assets/img/products/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-secondary 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

...
Shoes

$95.00

 

<a class="card style-6" href="javascript:void(0);">
    <span class="badge badge-danger"></span>
    <img src="../src/assets/img/products/product-5.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 ...
Nike Shoes Green

$110.00

$200.00

 

<a class="card style-6  mb-md-0 mb-4" href="javascript:void(0);">
    <span class="badge badge-danger">SALE</span>
    <img src="../src/assets/img/products/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">$110.00</p>
                    <p class="mb-0 line-through"><del>$200.00</del></p>
                </div>
            </div>
        </div>
    </div>
</a>

Card 10

NEW ...
Nike Shoes Red

$150.00

 

<a class="card style-6" href="javascript:void(0);">
    <span class="badge badge-primary">NEW</span>
    <img src="../src/assets/img/products/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">$150.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="../src/assets/img/c-1.jpg" 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="../src/assets/img/profile/profile-34.png" 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="../src/assets/img/regular/lightbox-3.jpg" 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="../src/assets/img/regular/c-3.jpg" class="card-img-top" alt="...">
    <div class="card-body px-0 py-0 align-self-center">
        <p class="card-category mb-2">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="../src/assets/img/profile/profile-34.png" 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.

Cancel
Agree 

<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

...
Avocado

$100.00

 

<a class="card mb-md-0 mb-4" href="https://themeforest.net/item/cork-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="../src/assets/img/products/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

...

$623.00

Shoes 

<a class="card" href="https://themeforest.net/item/cork-responsive-admin-dashboard-template/25582188" target="_blank">
    <img src="../src/assets/img/products/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.

Join her on Slack 

<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="../src/assets/img/profile-2.jpeg" class="rounded-circle avatar-img">
                </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

Web Design Start chat Todo Statistics

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

avatar
avatar
avatar
avatar
4 

<div class="card style-4">
    <div class="card-body pt-3">
        
        <div class="m-o-dropdown-list">
            <div class="media mt-0 mb-3">
                <div class="badge--group me-3">
                    <div class="badge badge-success badge-dot"></div>
                </div> 
                <div class="media-body">
                    <h4 class="media-heading mb-0">
                        <span class="media-title">Web Design</span>
                        <span class="dropdown-list dropdown" role="group">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <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-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
                            </a>
                            <span class="dropdown-menu left">
                                <a class="dropdown-item" href="javascript:void(0);"><span>Start chat</span> <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-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></a>
                                <a class="dropdown-item" href="javascript:void(0);"><span>Todo</span> <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-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
                                <a class="dropdown-item" href="javascript:void(0);"><span>Statistics</span> <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-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg></a>
                            </span>
                        </span>
                    </h4>
                </div>
            </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">
        <div class="progress br-30 progress-sm">
            <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

        <div class="d-flex justify-content-between">
            
            <div class="avatar--group">
                <div class="avatar avatar-sm ms-0">
                    <img alt="avatar" src="../src/assets/img/profile/profile-30.png" class="rounded-circle" />
                </div>
                <div class="avatar avatar-sm">
                    <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
                </div>
                <div class="avatar avatar-sm">
                    <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
                </div>
                <div class="avatar avatar-sm">
                    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
                </div>
            </div>

            <div class="attachments align-self-center">
                <span class="image me-1">
                    <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-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
                </span>
                <span class="count">4</span>
            </div>
            
        </div>
    </div>
</div>

Copyright © 2026 DesignReset, All rights reserved.

Coded with