sleek-dashboard

--- layout: default title: "Listgroup - Sleek Admin Dashboard Template" parent: "components" sub_parent: "components" activePage: "list-group" plugins: [] --- <div class="breadcrumb-wrapper"> <h1>List Group</h1> {% include breadcrumb.htm %} </div> <div class="row"> <div class="col-lg-6"> <div class="card card-default" data-scroll-height="500"> <div class="card-header justify-content-between align-items-center card-header-border-bottom"> <h2>Latest Notifications</h2> <div> <button class="text-black-50 mr-2 font-size-20"><i class="mdi mdi-cached"></i></button> <div class="dropdown show d-inline-block widget-dropdown"> <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-notification"> <li class="dropdown-item"><a href="#">Action</a></li> <li class="dropdown-item"><a href="#">Another action</a></li> <li class="dropdown-item"><a href="#">Something else here</a></li> </ul> </div> </div> </div> <div class="card-body slim-scroll"> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white"> <i class="mdi mdi-cart-outline font-size-20"></i> </div> <div class="media-body pr-3 "> <a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Order</a> <p >Selena has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span> </div> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white"> <i class="mdi mdi-email-outline font-size-20"></i> </div> <div class="media-body pr-3"> <a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a> <p >Phileine has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span> </div> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white"> <i class="mdi mdi-stack-exchange font-size-20"></i> </div> <div class="media-body pr-3"> <a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a> <p >Emma has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span> </div> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white"> <i class="mdi mdi-cart-outline font-size-20"></i> </div> <div class="media-body pr-3"> <a class="mt-0 mb-1 font-size-15 text-dark" href="#">New order</a> <p >Ryan has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span> </div> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white"> <i class="mdi mdi-calendar-blank font-size-20"></i> </div> <div class="media-body pr-3"> <a class="mt-0 mb-1 font-size-15 text-dark" href="">Comapny Meetup</a> <p >Phileine has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span> </div> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white"> <i class="mdi mdi-stack-exchange font-size-20"></i> </div> <div class="media-body pr-3"> <a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a> <p >Emma has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span> </div> <div class="media py-3 align-items-center justify-content-between"> <div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white"> <i class="mdi mdi-email-outline font-size-20"></i> </div> <div class="media-body pr-3"> <a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a> <p >Phileine has placed an new order</p> </div> <span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span> </div> </div> <div class="mt-3"></div> </div> </div> <div class="col-lg-6"> <div class="card card-default todo-table" id="todo" data-scroll-height="500"> <div class="card-header justify-content-between align-items-center card-header-border-bottom"> <h2 class="d-inline-block">To Do List</h2> <a class="btn btn-primary btn-pill" id="add-task" href="#" role="button"> Add task </a> </div> <div class="card-body slim-scroll"> <div class="todo-single-item d-none" id="todo-input"> <form > <div class="form-group"> <input type="text" class="form-control" placeholder="Enter Todo" autofocus> </div> </form> </div> <div class="todo-list" id="todo-list"> <div class="todo-single-item d-flex flex-row justify-content-between finished"> <i class="mdi"></i> <span >Finish Dashboard UI Kit update</span> <span class="badge badge-primary">Finished</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between current"> <i class="mdi"></i> <span >Create new prototype for the landing page</span> <span class="badge badge-primary">Today</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between "> <i class="mdi"></i> <span > Add new Google Analytics code to all main files </span> <span class="badge badge-danger">Yesterday</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between "> <i class="mdi"></i> <span >Update parallax scroll on team page</span> <span class="badge badge-success">Dec 15, 2018</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between "> <i class="mdi"></i> <span >Update parallax scroll on team page</span> <span class="badge badge-success">Dec 15, 2018</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between "> <i class="mdi"></i> <span >Create online customer list book</span> <span class="badge badge-success">Dec 15, 2018</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between "> <i class="mdi"></i> <span >Lorem ipsum dolor sit amet, consectetur.</span> <span class="badge badge-success">Dec 15, 2018</span> </div> <div class="todo-single-item d-flex flex-row justify-content-between mb-1"> <i class="mdi"></i> <span >Update parallax scroll on team page</span> <span class="badge badge-success">Dec 15, 2018</span> </div> </div> </div> <div class="mt-3"></div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Basic List </h2> </div> <div class="card-body"> <p class="mb-5">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/list-group/" target="_blank"> more details.</a></p> <ul class="list-group"> <li class="list-group-item text-dark">Cras justo odio</li> <li class="list-group-item text-dark">Dapibus ac facilisis in</li> <li class="list-group-item text-dark">Morbi leo risus</li> <li class="list-group-item text-dark">Porta ac consectetur ac</li> <li class="list-group-item text-dark">Vestibulum at eros</li> </ul> </div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Links and Buttons </h2> </div> <div class="card-body"> <p class="mb-5">Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.4/components/list-group/#links-and-buttons" target="_blank"> more details.</a></p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> </div> </div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Contextual Classes List</h2> </div> <div class="card-body"> <p class="mb-5">Use contextual classes to style list items with a stateful background and color. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.4/components/list-group/#contextual-classes" target="_blank"> more details.</a></p> <ul class="list-group"> <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li> <li class="list-group-item list-group-item-success">This is a success list group item</li> <li class="list-group-item list-group-item-danger">This is a danger list group item</li> <li class="list-group-item list-group-item-warning">This is a warning list group item</li> <li class="list-group-item list-group-item-info">This is a info list group item</li> </ul> </div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2> With Badges </h2> </div> <div class="card-body"> <p class="mb-5">Add badges to any list group item to show unread counts, activity, and more. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.4/components/list-group/#with-badges" target="_blank"> more details.</a></p> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">24</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Porta ac consectetur ac <span class="badge badge-primary badge-pill">6</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Vestibulum at eros <span class="badge badge-primary badge-pill">6</span> </li> </ul> </div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Desable List</h2> </div> <div class="card-body"> <p class="mb-5">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it appear disabled. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.4/components/list-group/#with-badges" target="_blank"> more details.</a></p> <ul class="list-group"> <li class="list-group-item disabled">Cras justo odio</li> <li class="list-group-item text-dark">Dapibus ac facilisis in</li> <li class="list-group-item text-dark">Morbi leo risus</li> <li class="list-group-item text-dark">Porta ac consectetur ac</li> <li class="list-group-item text-dark">Vestibulum at eros</li> </ul> </div> </div> </div> <div class="col-lg-6"> <div class="card card-default"> <div class="card-header card-header-border-bottom"> <h2>Custom Content </h2> </div> <div class="card-body"> <p class="mb-5">Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.4/components/list-group/#with-badges" target="_blank"> more details.</a></p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> </div> </div> </div> </div> </div>