@grigorov-it/mazer
Version:
Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page
1,373 lines • 59.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List Group - Mazer Admin Dashboard</title>
<link
rel="shortcut icon"
href="./assets/compiled/svg/favicon.svg"
type="image/x-icon"
/>
<link
rel="shortcut icon"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAEs2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMzIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzQiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzMyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzQiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC4xIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTAzLTMxVDEwOjUwOjIzKzAyOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz5V57uAAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz9maORHo1hYKC9hISNGTWwsRn4VFmOUX5uZZ36oeTOv954kW2WrKLHxa8FfwFZZK0WkZClrYoOe87ypmWTO7dzzud97z+nec8ETzaiaWd4NWtYyIiNhZWZ2TvE946WZSjqoj6mmPjE1HKWkfdxR5sSbgFOr9Ll/rXoxYapQVik8oOqGJTwqPL5i6Q5vCzeo6dii8KlwpyEXFL519LjLLw6nXP5y2IhGBsFTJ6ykijhexGra0ITl5bRqmWU1fx/nJTWJ7PSUxBbxJkwijBBGYYwhBgnRQ7/MIQIE6ZIVJfK7f/MnyUmuKrPOKgZLpEhj0SnqslRPSEyKnpCRYdXp/9++msneoFu9JgwVT7b91ga+LfjetO3PQ9v+PgLvI1xkC/m5A+h7F32zoLXug38dzi4LWnwHzjeg8UGPGbFfySvuSSbh9QRqZ6H+Gqrm3Z7l9zm+h+iafNUV7O5Bu5z3L/wAdthn7QIme0YAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJTSURBVFiF7Zi9axRBGIefEw2IdxFBRQsLWUTBaywSK4ubdSGVIY1Y6HZql8ZKCGIqwX/AYLmCgVQKfiDn7jZeEQMWfsSAHAiKqPiB5mIgELWYOW5vzc3O7niHhT/YZvY37/swM/vOzJbIqVq9uQ04CYwCI8AhYAlYAB4Dc7HnrOSJWcoJcBS4ARzQ2F4BZ2LPmTeNuykHwEWgkQGAet9QfiMZjUSt3hwD7psGTWgs9pwH1hC1enMYeA7sKwDxBqjGnvNdZzKZjqmCAKh+U1kmEwi3IEBbIsugnY5avTkEtIAtFhBrQCX2nLVehqyRqFoCAAwBh3WGLAhbgCRIYYinwLolwLqKUwwi9pxV4KUlxKKKUwxC6ZElRCPLYAJxGfhSEOCz6m8HEXvOB2CyIMSk6m8HoXQTmMkJcA2YNTHm3congOvATo3tE3A29pxbpnFzQSiQPcB55IFmFNgFfEQeahaAGZMpsIJIAZWAHcDX2HN+2cT6r39GxmvC9aPNwH5gO1BOPFuBVWAZue0vA9+A12EgjPadnhCuH1WAE8ivYAQ4ohKaagV4gvxi5oG7YSA2vApsCOH60WngKrA3R9IsvQUuhIGY00K4flQG7gHH/mLytB4C42EgfrQb0mV7us8AAMeBS8mGNMR4nwHamtBB7B4QRNdaS0M8GxDEog7iyoAguvJ0QYSBuAOcAt71Kfl7wA8DcTvZ2KtOlJEr+ByyQtqqhTyHTIeB+ONeqi3brh+VgIN0fohUgWGggizZFTplu12yW8iy/YLOGWMpDMTPXnl+Az9vj2HERYqPAAAAAElFTkSuQmCC"
type="image/png"
/>
<link rel="stylesheet" href="./assets/compiled/css/app.css" />
<link rel="stylesheet" href="./assets/compiled/css/app-dark.css" />
</head>
<body>
<script src="assets/static/js/initTheme.js"></script>
<div id="app">
<div id="sidebar">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"
><img
src="./assets/compiled/svg/logo.svg"
alt="Logo"
srcset=""
/></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--system-uicons"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 21 21"
>
<g
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
opacity=".3"
></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path
d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"
></path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input
class="form-check-input me-0"
type="checkbox"
id="toggle-dark"
style="cursor: pointer"
/>
<label class="form-check-label"></label>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"
></path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"
><i class="bi bi-x bi-middle"></i
></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item">
<a href="index.html" class="sidebar-link">
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item active has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item">
<a href="component-accordion.html" class="submenu-link"
>Accordion</a
>
</li>
<li class="submenu-item">
<a href="component-alert.html" class="submenu-link"
>Alert</a
>
</li>
<li class="submenu-item">
<a href="component-badge.html" class="submenu-link"
>Badge</a
>
</li>
<li class="submenu-item">
<a href="component-breadcrumb.html" class="submenu-link"
>Breadcrumb</a
>
</li>
<li class="submenu-item">
<a href="component-button.html" class="submenu-link"
>Button</a
>
</li>
<li class="submenu-item">
<a href="component-card.html" class="submenu-link">Card</a>
</li>
<li class="submenu-item">
<a href="component-carousel.html" class="submenu-link"
>Carousel</a
>
</li>
<li class="submenu-item">
<a href="component-collapse.html" class="submenu-link"
>Collapse</a
>
</li>
<li class="submenu-item">
<a href="component-dropdown.html" class="submenu-link"
>Dropdown</a
>
</li>
<li class="submenu-item active">
<a href="component-list-group.html" class="submenu-link"
>List Group</a
>
</li>
<li class="submenu-item">
<a href="component-modal.html" class="submenu-link"
>Modal</a
>
</li>
<li class="submenu-item">
<a href="component-navs.html" class="submenu-link">Navs</a>
</li>
<li class="submenu-item">
<a href="component-pagination.html" class="submenu-link"
>Pagination</a
>
</li>
<li class="submenu-item">
<a href="component-progress.html" class="submenu-link"
>Progress</a
>
</li>
<li class="submenu-item">
<a href="component-spinner.html" class="submenu-link"
>Spinner</a
>
</li>
<li class="submenu-item">
<a href="component-toasts.html" class="submenu-link"
>Toasts</a
>
</li>
<li class="submenu-item">
<a href="component-tooltip.html" class="submenu-link"
>Tooltip</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="extra-component-avatar.html" class="submenu-link"
>Avatar</a
>
</li>
<li class="submenu-item">
<a href="extra-component-divider.html" class="submenu-link"
>Divider</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-date-picker.html"
class="submenu-link"
>Date Picker</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-sweetalert.html"
class="submenu-link"
>Sweet Alert</a
>
</li>
<li class="submenu-item">
<a href="extra-component-toastify.html" class="submenu-link"
>Toastify</a
>
</li>
<li class="submenu-item">
<a href="extra-component-rating.html" class="submenu-link"
>Rating</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="layout-default.html" class="submenu-link"
>Default Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-1-column.html" class="submenu-link"
>1 Column</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-navbar.html" class="submenu-link"
>Vertical Navbar</a
>
</li>
<li class="submenu-item">
<a href="layout-rtl.html" class="submenu-link"
>RTL Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-horizontal.html" class="submenu-link"
>Horizontal Menu</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Forms & Tables</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-element-input.html" class="submenu-link"
>Input</a
>
</li>
<li class="submenu-item">
<a href="form-element-input-group.html" class="submenu-link"
>Input Group</a
>
</li>
<li class="submenu-item">
<a href="form-element-select.html" class="submenu-link"
>Select</a
>
</li>
<li class="submenu-item">
<a href="form-element-radio.html" class="submenu-link"
>Radio</a
>
</li>
<li class="submenu-item">
<a href="form-element-checkbox.html" class="submenu-link"
>Checkbox</a
>
</li>
<li class="submenu-item">
<a href="form-element-textarea.html" class="submenu-link"
>Textarea</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="form-layout.html" class="sidebar-link">
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-journal-check"></i>
<span>Form Validation</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-validation-parsley.html" class="submenu-link"
>Parsley</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-editor-quill.html" class="submenu-link"
>Quill</a
>
</li>
<li class="submenu-item">
<a href="form-editor-ckeditor.html" class="submenu-link"
>CKEditor</a
>
</li>
<li class="submenu-item">
<a href="form-editor-summernote.html" class="submenu-link"
>Summernote</a
>
</li>
<li class="submenu-item">
<a href="form-editor-tinymce.html" class="submenu-link"
>TinyMCE</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="table.html" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="table-datatable.html" class="submenu-link"
>Datatable</a
>
</li>
<li class="submenu-item">
<a href="table-datatable-jquery.html" class="submenu-link"
>Datatable (jQuery)</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-widgets-chatbox.html" class="submenu-link"
>Chatbox</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-pricing.html" class="submenu-link"
>Pricing</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-todolist.html" class="submenu-link"
>To-do List</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-icons-bootstrap-icons.html" class="submenu-link"
>Bootstrap Icons
</a>
</li>
<li class="submenu-item">
<a href="ui-icons-fontawesome.html" class="submenu-link"
>Fontawesome</a
>
</li>
<li class="submenu-item">
<a href="ui-icons-dripicons.html" class="submenu-link"
>Dripicons</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-chart-chartjs.html" class="submenu-link"
>ChartJS</a
>
</li>
<li class="submenu-item">
<a href="ui-chart-apexcharts.html" class="submenu-link"
>Apexcharts</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="ui-file-uploader.html" class="sidebar-link">
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-map-google-map.html" class="submenu-link"
>Google Map</a
>
</li>
<li class="submenu-item">
<a href="ui-map-jsvectormap.html" class="submenu-link"
>JS Vector Map</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-three-dots"></i>
<span>Multi-level Menu</span>
</a>
<ul class="submenu">
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">First Level</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="ui-multi-level-menu.html" class="submenu-link"
>Second Level</a
>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">Another Menu</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li class="sidebar-item">
<a href="application-email.html" class="sidebar-link">
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-chat.html" class="sidebar-link">
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-gallery.html" class="sidebar-link">
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-checkout.html" class="sidebar-link">
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="auth-login.html" class="submenu-link">Login</a>
</li>
<li class="submenu-item">
<a href="auth-register.html" class="submenu-link"
>Register</a
>
</li>
<li class="submenu-item">
<a href="auth-forgot-password.html" class="submenu-link"
>Forgot Password</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="error-403.html" class="submenu-link">403</a>
</li>
<li class="submenu-item">
<a href="error-404.html" class="submenu-link">404</a>
</li>
<li class="submenu-item">
<a href="error-500.html" class="submenu-link">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li class="sidebar-item">
<a
href="https://zuramai.github.io/mazer/docs"
class="sidebar-link"
>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md"
class="sidebar-link"
>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer#donation"
class="sidebar-link"
>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>List Group</h3>
<p class="text-subtitle text-muted">
List groups are a flexible and powerful component for
displaying a series of content.
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav
aria-label="breadcrumb"
class="breadcrumb-header float-start float-lg-end"
>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
List Group
</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- list groups simple & disabled start -->
<section id="basic-list-group">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Simple List Group</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
The most basic list group is simply an unordered list
with list items, and the proper classes. Build upon it
with the options that follow, or your own CSS as needed.
</p>
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">
chocolate cheesecake candy
</li>
<li class="list-group-item">
Oat cake icing pastry pie carrot
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled items</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.disabled</code> to a
<code>.list-group-item</code> to gray it out to appear
disabled.
</p>
<div class="list-group">
<span class="list-group-item"> Cras justo odio </span>
<span class="list-group-item"
>Dapibus ac facilisis in</span
>
<span class="list-group-item disabled"
>Morbi leo risus</span
>
<span class="list-group-item"
>Porta ac consectetur ac</span
>
<span class="list-group-item">Vestibulum at eros</span>
<span class="list-group-item"
>Biscuit jelly beans macaroon danish pudding</span
>
<span class="list-group-item"
>Oat cake icing pastry pie carrot</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list groups simple & disabled end -->
<!-- list group button & badge start-->
<section class="list-group-button-badge">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Button list Group</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="list-group">
<button
type="button"
class="list-group-item list-group-item-action active"
>
Cras justo odio
</button>
<button
type="button"
class="list-group-item list-group-item-action"
>
Dapibus ac facilisis in
</button>
<button
type="button"
class="list-group-item list-group-item-action"
>
Morbi leo risus
</button>
<button
type="button"
class="list-group-item list-group-item-action"
>
Porta ac consectetur ac
</button>
<button
type="button"
class="list-group-item list-group-item-action"
>
Vestibulum at eros
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Badges</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Use Utility classes <code>.d-flex</code>
<code>.justify-content-between</code>
<code>align-items-center</code> to create space between
badge and your content
</p>
<ul class="list-group">
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
<span>
Biscuit jelly beans macaroon danish pudding.</span
>
<span
class="badge bg-warning badge-pill badge-round ms-1"
>8</span
>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
<span> chocolate cheesecake candy</span>
<span
class="badge bg-info badge-pill badge-round ms-1"
>7</span
>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
<span> Oat cake icing pastry pie carrot</span>
<span
class="badge bg-danger badge-pill badge-round ms-1"
>6</span
>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
<span
>space between badgeOat cake icing pastry pie
carrot</span
>
<span
class="badge bg-secondary badge-pill badge-round ms-1"
>5</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group button & badge ends -->
<!-- list group Checkboxes and radios start -->
<section id="list-group-icons">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Checkboxes and radios</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Place checkboxes and radios within list group items and
customize as needed.
</p>
<ul class="list-group">
<li class="list-group-item">
<input
id="checkbox-1"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-1">Cras justo odio</label>
</li>
<li class="list-group-item">
<input
id="checkbox-2"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-2"
>Dapibus ac facilisis in</label
>
</li>
<li class="list-group-item">
<input
id="checkbox-3"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-3">Morbi leo risus</label>
</li>
<li class="list-group-item">
<input
id="checkbox-4"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-4"
>Porta ac consectetur ac</label
>
</li>
<li class="list-group-item">
<input
id="checkbox-5"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-5">Vestibulum at eros</label>
</li>
<li class="list-group-item">
<input
id="checkbox-6"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-6">Vestibulum at eros</label>
</li>
<li class="list-group-item">
<input
id="checkbox-7"
class="form-check-input me-1"
type="checkbox"
value=""
aria-label="..."
/>
<label for="checkbox-7">Vestibulum at eros</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom content</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add nearly any HTML within, even for linked list groups
like the one below.
</p>
<div class="list-group">
<a
href="#"
class="list-group-item list-group-item-action active"
>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-white">
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"
>
<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"
>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group Checkboxes and radios end -->
<!-- list group with contextual & horizontal start -->
<section id="list-group-contextual">
<div class="row match-height">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Contextual classes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Use contextual classes to style list items, default or
linked. Also includes .active state.
</p>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">
Cras justo odio
</li>
<li class="list-group-item list-group-item-success">
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-danger">
Morbi leo risus
</li>
<li class="list-group-item list-group-item-warning">
Porta ac consectetur ac
</li>
<li class="list-group-item list-group-item-info">
Vestibulum at eros
</li>
<li class="list-group-item list-group-item-light">
chocolate cheesecake candy
</li>
<li class="list-group-item list-group-item-dark">
Oat cake icing pastry pie carrot
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.list-group-horizontal</code> to change the
layout of list group items from vertical to horizontal
across all breakpoints.choose a responsive variantcode
<code> .list-group-horizontal-{sm|md|lg|xl}</code> to
make a list group horizontal starting at that
breakpoint’s min-width.
</p>
<div
class="list-group list-group-horizontal-sm mb-1 text-center"
role="tablist"
>
<a
class="list-group-item list-group-item-action active"
id="list-sunday-list"
data-bs-toggle="list"
href="#list-sunday"
role="tab"
>Option 1</a
>
<a
class="list-group-item list-group-item-action"
id="list-monday-list"
data-bs-toggle="list"
href="#list-monday"
role="tab"
>Option 2</a
>
<a
class="list-group-item list-group-item-action"
id="list-tuesday-list"
data-bs-toggle="list"
href="#list-tuesday"
role="tab"
>Option 3</a
>
</div>
<div class="tab-content text-justify">
<div
class="tab-pane fade show active"
id="list-sunday"
role="tabpanel"
aria-labelledby="list-sunday-list"
>
Irure enim occaecat labore sit qui aliquip
reprehenderit amet velit. Deserunt ullamco ex elit
nostrud ut dolore nisi officia magna sit occaecat
laboris sunt dolor. Nisi eu minim cillum occaecat aute
est cupidatat aliqua labore aute occaecat ea aliquip
sunt amet. Aute mollit dolor ut exercitation irure
commodo non amet consectetur quis amet culpa. Quis
ullamco nisi amet qui aute irure eu. Magna labore
dolor quis ex labore id nostrud deserunt dolor eiusmod
eu pariatur culpa mollit in irure Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Iusto quis
porro doloribus est natus doloremque, eos laudantium
exercitationem impedit sapiente tenetur soluta
reiciendis deserunt!
</div>
<div
class="tab-pane fade"
id="list-monday"
role="tabpanel"
aria-labelledby="list-monday-list"
>
Cupidatat quis ad sint excepteur laborum in esse qui.
Et excepteur consectetur ex nisi eu do cillum ad
laborum. Mollit et eu officia dolore sunt Lorem culpa
qui commodo velit ex amet id ex. Officia anim
incididunt laboris deserunt anim aute dolor incididunt
veniam aute dolore do exercitation. Dolor nisi culpa
ex ad irure in elit eu dolore. Ad laboris ipsum
reprehenderit irure non commodo enim culpa commodo
veniam incididunt veniam ad. Lorem ipsum dolor sit
amet consectetur, adipisicing elit. Exercitationem,
porro! Amet soluta tempora eveniet blanditiis alias
eos, dolor qui consectetur!
</div>
<div
class="tab-pane fade"
id="list-tuesday"
role="tabpanel"
aria-labelledby="list-tuesday-list"
>
Ut ut do pariatur aliquip aliqua aliquip exercitation
do nostrud commodo reprehenderit aute ipsum voluptate.
Irure Lorem et laboris nostrud amet cupidatat
cupidatat anim do ut velit mollit consequat enim
tempor. Consectetur est minim nostrud nostrud
consectetur irure labore voluptate irure. Ipsum id
Lorem sit sint voluptate est pariatur eu ad cupidatat
et deserunt culpa sit eiusmod deserunt. Consectetur et
fugiat anim do eiusmod aliquip nulla laborum elit
adipisicing pariatur cillum. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Molestias,
inventore!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- list group with contextual & horizontal ends -->
<!-- List group navigation start -->
<section class="list-group-navigation">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">List group navigation</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<div class="list-group" role="tablist">
<a
class="list-group-item list-group-item-action active"
id="list-home-list"
data-bs-toggle="list"
href="#list-home"
role="tab"
>Home</a
>
<a
class="list-group-item list-group-item-action"
id="list-profile-list"
data-bs-toggle="list"
href="#list-profile"
role="tab"
>Profile</a
>
<a
class="list-group-item list-group-item-action"
id="list-messages-list"
data-bs-toggle="list"
href="#list-messages"
role="tab"
>Messages</a
>
<a
class="list-group-item list-group-item-action"
id="list-settings-list"
data-bs-toggle="list"
href="#list-settings"
role="tab"
>Settings</a
>
</div>
</div>
<div class="col-12 col-sm-12 col-md-8 mt-1">
<div
class="tab-content text-justify"
id="nav-tabContent"
>
<div
class="tab-pane show active"
id="list-home"
role="tabpanel"
aria-labelledby="list-home-list"
>
Velit aute mollit ipsum ad dolor consectetur nulla
officia culpa adipisicing exercitation fugiat
tempor. Voluptate deserunt sit sunt nisi aliqua
fugiat proident ea ut. Mollit voluptate
reprehenderit occaecat nisi ad non minim tempor
sunt voluptate consectetur exercitation id ut
nulla. Ea et fugiat aliquip nostrud sunt
incididunt consectetur culpa aliquip eiusmod
dolor. Anim ad Lorem aliqua in cupidatat nisi enim
eu nostrud do aliquip veniam minim. Lorem ipsum
dolor sit amet consectetur, adipisicing elit.
Aliquam itaque nisi obcaecati doloremque et est ex
possimus quidem dolorem soluta.
</div>
<div
class="tab-pane"
id="list-profile"
role="tabpanel"
aria-labelledby="list-profile-list"
>
Cupidatat quis ad sint excepteur laborum in esse
qui. Et excepteur consectetur ex nisi eu do cillum
ad laborum. Mollit et eu officia dolore sunt Lorem
culpa qui commodo velit ex amet id ex. Officia
anim incididunt laboris deserunt anim aute dolor
incididunt veniam aute dolore do exercitation.
Dolor nisi culpa ex ad irure in elit eu dolore. Ad
laboris ipsum reprehenderit irure non commodo enim
culpa commodo veniam incididunt veniam ad.
</div>
<div
class="tab-pane"
id="list-messages"
role="tabpanel"
aria-labelledby="list-messages-list"
>
Ut ut do pariatur aliquip aliqua aliquip
exercitation do nostrud commodo reprehenderit aute
ipsum voluptate. Irure Lorem et laboris nostrud
amet cupidatat cupidatat anim do ut velit mollit
consequat enim tempor. Consectetur est minim
nostrud nostrud consectetur irure labore voluptate
irure. Ipsum id Lorem sit sint voluptate est
pariatur eu ad cupidatat et deserunt culpa sit
eiusmod deserunt. Consectetur et fugiat anim do
eiusmod aliquip nulla laborum elit adipisicing
pariatur cillum.
</div>
<div
class="tab-pane"
id="list-settings"
role="tabpanel"
aria-labelledby="list-settings-list"
>
Irure enim occaecat labore sit qui aliquip
reprehenderit amet velit. Deserunt ullamco ex elit
nostrud ut dolore nisi officia magna sit occaecat
laboris sunt dolor. Nisi eu minim cillum occaecat
aute est cupidatat aliqua labore aute occaecat ea
aliquip sunt amet. Aute mollit dolor ut
exercitation irure commodo non amet consectetur
quis amet culpa. Quis ullamco nisi amet qui aute
irure eu. Magna labore dolor quis ex labore id
nostrud deserunt dolor eiusmod eu pariatur culpa
mollit in irure
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- List group navigation ends -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2023 © Mazer</p>
</div>
<div class="float-end">
<p>
Crafted with
<span class="text-danger"
><i class="bi bi-heart-fill icon-mid"></i
></span>
by <a href="https://saugi.me">Saugi</a>
</p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/static/js/components/dark.js"></script>
<script src="assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/compiled/js/app.js"></script>
</body>
</html>