COMPONENTS

Cards

Cards contain content and actions about a single subject.

GENERAL

SPECIAL

FILE

PD
Product Design

Chicago, San Francisco

Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies

Members
images images LO HS images
DE
Death Star version 3 Construction

Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies

off track 11 Open Tasks • 8/04/2019
Owner
images

Tobias B.

Followers
HS images
DE
Death Star version 3 Construction

Marketing

Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies

off track 11 Open Tasks • 8/04/2019
Owner
images

Tobias B.

Followers
HS images
images
Nike, Inc.

Sports

Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies

Members
AS images images CD
images
Nike, Inc.

Sports

Active Projects 12

Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies

Members
AS images images CD
images
Dropbox
Active

Version 2.0 Update available

Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies

Owner
images

Tobias B.

Card IMAGES
images
Death Star original maps and blueprint.pdf

by Ashoka T. • 06/20/2019 at 6:43 PM

Card IMAGES
images
Death Star original maps and blueprint.mp4

by Ashoka T. • 06/20/2019 at 6:43 PM

images
images
Death Star original maps and blueprint.pdf

by Ashoka T. • 06/20/2019 at 6:43 PM

<div class="row">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <span class="avtar avtar-square text-teal-2 b-teal-2 ">PD</span>
                    <div class="media-body ml-3 align-self-center">
                        <h5 class="mb-1">Product Design</h5>
                        <p class="mb-0 text-truncate">Chicago, San Francisco</p>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies</p>
                <h6 class="text-body text-uppercase f-12">Members</h6>
                <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2 mb-2">
                <img src="assets/images/user/avatar-1.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2 mb-2">
                <span class="avtar text-yellow-2 bg-yellow-1 avtar-xs mr-2 mb-2">LO</span>
                <span class="avtar text-teal-2 bg-teal-1 avtar-xs mr-2 mb-2">HS</span>
                <img src="assets/images/user/avatar-4.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2 mb-2">
                <button type="button" class="btn btn-icon mr-2 mb-2">+5</button>
                <button type="button" class="btn btn-icon mb-2"><i class="feather icon-plus"></i></button>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <span class="avtar avtar-square text-white bg-purple-2 ">DE</span>
                    <div class="media-body ml-3 align-self-center">
                        <h5 class="mb-0">Death Star version 3 Construction</h5>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies</p>
                <div class="border p-2 mb-3">
                    <h6 class="text-body font-weight-normal m-0 f-12"><span class="badge badge-pill badge-danger float-right text-uppercase">off track</span> 11 Open Tasks • 8/04/2019</h6>
                </div>
                <div class="row">
                    <div class="col-5">
                        <h6 class="text-body text-uppercase f-12">Owner</h6>
                        <div class="media">
                            <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs">
                            <div class="media-body ml-3 align-self-center">
                                <p class="mb-0 text-truncate">Tobias B.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-7">
                        <h6 class="text-body text-uppercase f-12">Followers</h6>
                        <span class="avtar text-blue-2 bg-blue-1 avtar-xs mr-1">HS</span>
                        <img src="assets/images/user/avatar-4.jpg" alt="images" class="img-fluid avtar avtar-xs mr-1">
                        <button type="button" class="btn btn-icon mr-1">+2</button>
                        <button type="button" class="btn btn-icon"><i class="feather icon-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <span class="avtar avtar-square text-white bg-purple-2 ">DE</span>
                    <div class="media-body ml-3 align-self-center">
                        <h5 class="mb-0">Death Star version 3 Construction</h5>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Marketing</p>
                <p>Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies</p>
                <div class="border p-2 mb-3">
                    <h6 class="text-body font-weight-normal m-0 f-12"><span class="badge badge-pill badge-danger float-right text-uppercase">off track</span> 11 Open Tasks • 8/04/2019</h6>
                </div>
                <div class="row">
                    <div class="col-5">
                        <h6 class="text-body text-uppercase f-12">Owner</h6>
                        <div class="media">
                            <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs">
                            <div class="media-body ml-3 align-self-center">
                                <p class="mb-0 text-truncate">Tobias B.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-7">
                        <h6 class="text-body text-uppercase f-12">Followers</h6>
                        <span class="avtar text-blue-2 bg-blue-1 avtar-xs mr-1">HS</span>
                        <img src="assets/images/user/avatar-4.jpg" alt="images" class="img-fluid avtar avtar-xs mr-1">
                        <button type="button" class="btn btn-icon mr-1">+2</button>
                        <button type="button" class="btn btn-icon"><i class="feather icon-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <span class="avtar avtar-icon avtar-square "><img src="assets/images/uikit/logo-nike.svg" alt="images" class="img-fluid"></span>
                    <div class="media-body ml-3 align-self-center">
                        <h5 class="mb-1">Nike, Inc.</h5>
                        <p class="mb-0 text-truncate">Sports</p>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies</p>
                <h6 class="text-body text-uppercase f-12">Members</h6>
                <span class="avtar text-orange-2 bg-orange-1 avtar-xs mr-2">AS</span>
                <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2">
                <img src="assets/images/user/avatar-1.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2">
                <span class="avtar text-purple-2 bg-purple-1 avtar-xs mr-2">CD</span>
                <button type="button" class="btn btn-icon"><i class="feather icon-plus"></i></button>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <span class="avtar avtar-icon avtar-square "><img src="assets/images/uikit/logo-nike.svg" alt="images" class="img-fluid"></span>
                    <div class="media-body ml-3 align-self-center">
                        <h5 class="mb-1">Nike, Inc.</h5>
                        <p class="mb-0 text-truncate">Sports</p>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Active Projects 12 <i class="feather icon-arrow-up text-success"></i></p>
                <p>Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies</p>
                <h6 class="text-body text-uppercase f-12">Members</h6>
                <span class="avtar text-orange-2 bg-orange-1 avtar-xs mr-2">AS</span>
                <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2">
                <img src="assets/images/user/avatar-1.jpg" alt="images" class="img-fluid avtar avtar-xs mr-2">
                <span class="avtar text-purple-2 bg-purple-1 avtar-xs mr-2">CD</span>
                <button type="button" class="btn btn-icon"><i class="feather icon-plus"></i></button>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <span class="avtar avtar-icon avtar-square "><img src="assets/images/uikit/logo-dropbox.svg" alt="images" class="img-fluid"></span>
                    <div class="media-body ml-3 align-self-center">
                        <h5 class="mb-1">Dropbox</h5>
                        <span class="badge badge-pill badge-success f-12 text-uppercase">Active</span>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Version 2.0 <span class="text-primary m-r-10">Update available</span></p>
                <p>Donec id elit non mi porta gravida at eget metu nullam id dolor id nibh ultricies</p>
                <h6 class="text-body text-uppercase f-12">Owner</h6>
                <div class="media">
                    <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs">
                    <div class="media-body ml-3 align-self-center">
                        <p class="mb-0 text-truncate">Tobias B.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <img class="card-img-top" src="assets/images/slider/img-slide-1.jpg" alt="Card IMAGES">
            <div class="card-header">
                <div class="media">
                    <img src="assets/images/uikit/card-icon-1.svg" alt="images" class="img-fluid">
                    <div class="media-body ml-3">
                        <h6 class="mb-2">Death Star original maps and blueprint.pdf</h6>
                        <p class="mb-0">by Ashoka T. • 06/20/2019 at 6:43 PM </p>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="assets/images/slider/img-slide-2.jpg" alt="Card IMAGES">
            <div class="card-header">
                <div class="media">
                    <img src="assets/images/uikit/card-icon-2.svg" alt="images" class="img-fluid">
                    <div class="media-body ml-3">
                        <h6 class="mb-2">Death Star original maps and blueprint.mp4</h6>
                        <p class="mb-0">by Ashoka T. • 06/20/2019 at 6:43 PM </p>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-img-top d-flex align-item-center justify-content-center hei-150 bg-light">
                <img src="assets/images/uikit/card-icon-3.svg" alt="images" class="img-fluid wid-40">
            </div>
            <div class="card-header">
                <div class="media">
                    <img src="assets/images/uikit/card-icon-3.svg" alt="images" class="img-fluid">
                    <div class="media-body ml-3">
                        <h6 class="mb-2">Death Star original maps and blueprint.pdf</h6>
                        <p class="mb-0">by Ashoka T. • 06/20/2019 at 6:43 PM </p>
                    </div>
                </div>
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Copycollapse

MINI PROFILE

images images
Ashoka Tano

Product Design @ Chicago

<div class="card">
    <div class="card-header pb-0">
        <div class="card-header-right">
            <div class="btn-group card-option">
                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="feather icon-more-horizontal"></i>
                </button>
                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-body text-center">
        <div class="d-inline-flex align-items-end justify-content-end">
            <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid img-radius wid-80">
            <span class="avtar avtar-icon avtar-xs position-absolute bg-white mt-2 ml-2"><img src="assets/images/uikit/logo-slack.svg" alt="images" class="img-fluid"></span>
        </div>
        <h5 class="mt-4">Ashoka Tano</h5>
        <p>Product Design @ Chicago</p>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-dark rounded border mr-3">Send Message</button>
            <button type="button" class="btn btn-outline-dark rounded border">Invite Project</button>
        </div>
    </div>
</div>
Copycollapse

INFO

status
Version

2.0

stars

Reviews

1.5K reviews

Installed

2 years ago

Last updated

3 weeks ago

developer

Mailchimp, Inc.

<div class="card">
    <div class="card-header border-bottom">
        <h5 class="text-uppercase text-body font-weight-normal">status</h5>
        <div class="float-right">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="INFOswitch1" checked>
                <label class="custom-control-label" for="INFOswitch1"></label>
            </div>
        </div>
    </div>
    <div class="card-body text-center mt-4">
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h6 class="mb-0 text-uppercase text-body">Version</h6>
            <p class="mb-0">2.0</p>
        </div>
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h6 class="mb-0 text-uppercase text-body">stars</h6>
            <p class="mb-0">
                <a href="#!"><i class="fa fa-star f-14 text-c-yellow"></i></a>
                <a href="#!"><i class="fa fa-star f-14 text-c-yellow"></i></a>
                <a href="#!"><i class="fa fa-star f-14 text-c-yellow"></i></a>
                <a href="#!"><i class="fa fa-star f-14 text-c-yellow"></i></a>
                <a href="#!"><i class="fa fa-star f-14 text-black-50"></i></a>
            </p>
        </div>
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h6 class="mb-0 text-uppercase text-body">Reviews</h6>
            <p class="mb-0">1.5K reviews</p>
        </div>
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h6 class="mb-0 text-uppercase text-body">Installed</h6>
            <p class="mb-0">2 years ago</p>
        </div>
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h6 class="mb-0 text-uppercase text-body">Last updated</h6>
            <p class="mb-0">3 weeks ago</p>
        </div>
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h6 class="mb-0 text-uppercase text-body">developer</h6>
            <p class="mb-0"><a href="#!">Mailchimp, Inc.</a></p>
        </div>
        <button type="button" class="btn btn-primary btn-block">Button</button>
    </div>
</div>
Copycollapse

EMPTY STATE

Add New

<div class="card empty-card">
    <p class="mb-0"><i class="feather icon-plus mr-2"></i>Add New</p>
</div>
Copycollapse

KANBAN

on track

Payment modules based on new Accessibilty assessment

images

Tobias B.

on hold

Payment modules based on new Accessibilty assessment

Wireframes Design
images

Tobias B.

Card IMAGES
off track

Payment modules based on new Accessibilty assessment

Wireframes Design
images

Tobias B.

<div class="row">
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <span class="badge badge-pill badge-success f-12 text-uppercase">on track</span>
                <p class="my-3">Payment modules based on new Accessibilty assessment</p>
                <div class="media">
                    <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs">
                    <div class="media-body ml-3 align-self-center">
                        <p class="mb-0 text-truncate">Tobias B.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <span class="badge badge-pill badge-warning f-12 text-uppercase">on hold</span>
                <p class="my-3">Payment modules based on new Accessibilty assessment</p>
                <div class="mb-3">
                    <span class="badge badge-light-primary">Wireframes</span>
                    <span class="badge badge-light-success">Design</span>
                </div>
                <div class="media">
                    <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs">
                    <div class="media-body ml-3 align-self-center">
                        <p class="mb-0 text-truncate">Tobias B.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-6">
        <div class="card">
            <div class="card-img-top px-4 pt-4">
                <img class="img-fluid rounded" src="assets/images/slider/img-slide-3.jpg" alt="Card IMAGES">
            </div>
            <div class="card-header pb-0">
                <div class="card-header-right">
                    <div class="btn-group card-option">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="feather icon-more-horizontal"></i>
                        </button>
                        <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                            <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <span class="badge badge-pill badge-danger f-12 text-uppercase">off track</span>
                <p class="my-3">Payment modules based on new Accessibilty assessment</p>
                <div class="mb-3">
                    <span class="badge badge-light-primary">Wireframes</span>
                    <span class="badge badge-light-success">Design</span>
                </div>
                <div class="media">
                    <img src="assets/images/user/avatar-2.jpg" alt="images" class="img-fluid avtar avtar-xs">
                    <div class="media-body ml-3 align-self-center">
                        <p class="mb-0 text-truncate">Tobias B.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Copycollapse