<!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="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header">
<div class="d-flex justify-content-between">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
</div>
<div class="toggler">
<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-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item active">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">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">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</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">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">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">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">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-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">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">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">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">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">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">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">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">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">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">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</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">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">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">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">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#donate" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
<button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
</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 ml-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 ml-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 ml-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 ml-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 class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Cras justo odio
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Morbi leo risus
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Porta ac consectetur ac
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Vestibulum at eros
</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>2021 © Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="http://ahmadsaugi.com">A. Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/mazer.js"></script>
</body>
</html>