templates/apps-contacts-grid.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'User Grid'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Contacts', title: 'User Grid'}) }}
  28.                         <div class="row align-items-center">
  29.                             <div class="col-md-6">
  30.                                 <div class="mb-3">
  31.                                     <h5 class="card-title">Contact List <span class="text-muted fw-normal ms-2">(834)</span></h5>
  32.                                 </div>
  33.                             </div>
  35.                             <div class="col-md-6">
  36.                                 <div class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3">
  37.                                     <div>
  38.                                         <ul class="nav nav-pills">
  39.                                             <li class="nav-item">
  40.                                                 <a class="nav-link" href="apps-contacts-list" data-bs-toggle="tooltip" data-bs-placement="top" title="List"><i class="bx bx-list-ul"></i></a>
  41.                                             </li>
  42.                                             <li class="nav-item">
  43.                                                 <a class="nav-link active" href="apps-contacts-grid" data-bs-toggle="tooltip" data-bs-placement="top" title="Grid"><i class="bx bx-grid-alt"></i></a>
  44.                                             </li>
  45.                                         </ul>
  46.                                     </div>
  47.                                     <div>
  48.                                         <a href="#" class="btn btn-light"><i class="bx bx-plus me-1"></i> Add New</a>
  49.                                     </div>
  50.                                     
  51.                                     <div class="dropdown">
  52.                                         <a class="btn btn-link text-muted py-1 font-size-16 shadow-none dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  53.                                             <i class="bx bx-dots-horizontal-rounded"></i>
  54.                                         </a>
  55.                                       
  56.                                         <ul class="dropdown-menu dropdown-menu-end">
  57.                                             <li><a class="dropdown-item" href="#">Action</a></li>
  58.                                             <li><a class="dropdown-item" href="#">Another action</a></li>
  59.                                             <li><a class="dropdown-item" href="#">Something else here</a></li>
  60.                                         </ul>
  61.                                     </div>
  62.                                 </div>
  64.                             </div>
  65.                         </div>
  66.                         <!-- end row -->
  68.                         <div class="row">
  69.                             <div class="col-xl-3 col-sm-6">
  70.                                 <div class="card text-center">
  71.                                     <div class="card-body">
  72.                                         <div class="dropdown text-end">
  73.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  74.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  75.                                             </a>
  76.                                           
  77.                                             <div class="dropdown-menu dropdown-menu-end">
  78.                                                 <a class="dropdown-item" href="#">Edit</a>
  79.                                                 <a class="dropdown-item" href="#">Action</a>
  80.                                                 <a class="dropdown-item" href="#">Remove</a>
  81.                                             </div>
  82.                                         </div>
  83.                                         
  84.                                         <div class="mx-auto mb-4">
  85.                                             <img src="/images/users/avatar-2.jpg" alt="" class="avatar-xl rounded-circle img-thumbnail">
  86.                                         </div>
  87.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Phyllis Gatlin</a></h5>
  88.                                         <p class="text-muted mb-2">Full Stack Developer</p>
  89.                                         
  90.                                     </div>
  92.                                     <div class="btn-group" role="group">
  93.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  94.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  96.                                     </div>
  97.                                 </div>
  98.                                 <!-- end card -->
  99.                             </div>
  100.                             <!-- end col -->
  101.                             <div class="col-xl-3 col-sm-6">
  102.                                 <div class="card text-center">
  103.                                     <div class="card-body">
  104.                                         <div class="dropdown text-end">
  105.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  106.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  107.                                             </a>
  108.                                           
  109.                                             <div class="dropdown-menu dropdown-menu-end">
  110.                                                 <a class="dropdown-item" href="#">Edit</a>
  111.                                                 <a class="dropdown-item" href="#">Action</a>
  112.                                                 <a class="dropdown-item" href="#">Remove</a>
  113.                                             </div>
  114.                                         </div>
  115.                                         
  116.                                         <div class="mx-auto mb-4">
  117.                                             <img src="/images/users/avatar-1.jpg" alt="" class="avatar-xl rounded-circle img-thumbnail">
  118.                                         </div>
  119.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">James Nix</a></h5>
  120.                                         <p class="text-muted mb-2">Full Stack Developer</p>
  121.                                         
  122.                                     </div>
  124.                                     <div class="btn-group" role="group">
  125.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  126.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  128.                                     </div>
  129.                                 </div>
  130.                                 <!-- end card -->
  131.                             </div>
  132.                             <!-- end col -->
  133.                             <div class="col-xl-3 col-sm-6">
  134.                                 <div class="card text-center">
  135.                                     <div class="card-body">
  136.                                         <div class="dropdown text-end">
  137.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  138.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  139.                                             </a>
  140.                                           
  141.                                             <div class="dropdown-menu dropdown-menu-end">
  142.                                                 <a class="dropdown-item" href="#">Edit</a>
  143.                                                 <a class="dropdown-item" href="#">Action</a>
  144.                                                 <a class="dropdown-item" href="#">Remove</a>
  145.                                             </div>
  146.                                         </div>
  147.                                         
  148.                                         <div class="mx-auto mb-4">
  149.                                             <img src="/images/users/avatar-3.jpg" alt="" class="avatar-xl rounded-circle img-thumbnail">
  150.                                         </div>
  151.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Darlene Smith</a></h5>
  152.                                         <p class="text-muted mb-2">UI/UX Designer</p>
  153.                                         
  154.                                     </div>
  156.                                     <div class="btn-group" role="group">
  157.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  158.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  159.                                     </div>
  160.                                 </div>
  161.                                 <!-- end card -->
  162.                             </div>
  163.                             <!-- end col -->
  164.                             <div class="col-xl-3 col-sm-6">
  165.                                 <div class="card text-center">
  166.                                     <div class="card-body">
  167.                                         <div class="dropdown text-end">
  168.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  169.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  170.                                             </a>
  171.                                           
  172.                                             <div class="dropdown-menu dropdown-menu-end">
  173.                                                 <a class="dropdown-item" href="#">Edit</a>
  174.                                                 <a class="dropdown-item" href="#">Action</a>
  175.                                                 <a class="dropdown-item" href="#">Remove</a>
  176.                                             </div>
  177.                                         </div>
  178.                                         
  179.                                         <div class="avatar-xl mx-auto mb-4">
  180.                                             <div class="avatar-title bg-soft-light text-light display-4 m-0 rounded-circle">
  181.                                                 <i class="bx bxs-user-circle"></i>
  182.                                             </div>
  183.                                         </div>
  184.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">William Swift</a></h5>
  185.                                         <p class="text-muted mb-2">Backend Developer</p>
  186.                                         
  187.                                     </div>
  189.                                     <div class="btn-group" role="group">
  190.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  191.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  193.                                     </div>
  194.                                 </div>
  195.                                 <!-- end card -->
  196.                             </div>
  197.                             <!-- end col -->
  199.                             <div class="col-xl-3 col-sm-6">
  200.                                 <div class="card text-center">
  201.                                     <div class="card-body">
  202.                                         <div class="dropdown text-end">
  203.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  204.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  205.                                             </a>
  206.                                           
  207.                                             <div class="dropdown-menu dropdown-menu-end">
  208.                                                 <a class="dropdown-item" href="#">Edit</a>
  209.                                                 <a class="dropdown-item" href="#">Action</a>
  210.                                                 <a class="dropdown-item" href="#">Remove</a>
  211.                                             </div>
  212.                                         </div>
  213.                                         
  214.                                         <div class="avatar-xl mx-auto mb-4">
  215.                                             <div class="avatar-title bg-soft-light text-light display-4 m-0 rounded-circle">
  216.                                                 <i class="bx bxs-user-circle"></i>
  217.                                             </div>
  218.                                         </div>
  219.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Kevin West</a></h5>
  220.                                         <p class="text-muted mb-2">Full Stack Developer</p>
  221.                                         
  222.                                     </div>
  224.                                     <div class="btn-group" role="group">
  225.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  226.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  228.                                     </div>
  229.                                 </div>
  230.                                 <!-- end card -->
  231.                             </div>
  232.                             <!-- end col -->
  233.                             <div class="col-xl-3 col-sm-6">
  234.                                 <div class="card text-center">
  235.                                     <div class="card-body">
  236.                                         <div class="dropdown text-end">
  237.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  238.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  239.                                             </a>
  240.                                           
  241.                                             <div class="dropdown-menu dropdown-menu-end">
  242.                                                 <a class="dropdown-item" href="#">Edit</a>
  243.                                                 <a class="dropdown-item" href="#">Action</a>
  244.                                                 <a class="dropdown-item" href="#">Remove</a>
  245.                                             </div>
  246.                                         </div>
  247.                                         
  248.                                         <div class="mx-auto mb-4">
  249.                                             <img src="/images/users/avatar-6.jpg" alt="" class="avatar-xl rounded-circle img-thumbnail">
  250.                                         </div>
  251.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Tommy Hayes</a></h5>
  252.                                         <p class="text-muted mb-2">Backend Developer</p>
  253.                                         
  254.                                     </div>
  256.                                     <div class="btn-group" role="group">
  257.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  258.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  260.                                     </div>
  261.                                 </div>
  262.                                 <!-- end card -->
  263.                             </div>
  264.                             <!-- end col -->
  265.                             <div class="col-xl-3 col-sm-6">
  266.                                 <div class="card text-center">
  267.                                     <div class="card-body">
  268.                                         <div class="dropdown text-end">
  269.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  270.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  271.                                             </a>
  272.                                           
  273.                                             <div class="dropdown-menu dropdown-menu-end">
  274.                                                 <a class="dropdown-item" href="#">Edit</a>
  275.                                                 <a class="dropdown-item" href="#">Action</a>
  276.                                                 <a class="dropdown-item" href="#">Remove</a>
  277.                                             </div>
  278.                                         </div>
  279.                                         
  280.                                         <div class="mx-auto mb-4">
  281.                                             <img src="/images/users/avatar-8.jpg" alt="" class="avatar-xl rounded-circle img-thumbnail">
  282.                                         </div>
  283.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Diana Owens</a></h5>
  284.                                         <p class="text-muted mb-2">UI/UX Designer</p>
  285.                                         
  286.                                     </div>
  288.                                     <div class="btn-group" role="group">
  289.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  290.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  291.                                     </div>
  292.                                 </div>
  293.                                 <!-- end card -->
  294.                             </div>
  295.                             <!-- end col -->
  296.                             <div class="col-xl-3 col-sm-6">
  297.                                 <div class="card text-center">
  298.                                     <div class="card-body">
  299.                                         <div class="dropdown text-end">
  300.                                             <a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true">
  301.                                               <i class="bx bx-dots-horizontal-rounded"></i>
  302.                                             </a>
  303.                                           
  304.                                             <div class="dropdown-menu dropdown-menu-end">
  305.                                                 <a class="dropdown-item" href="#">Edit</a>
  306.                                                 <a class="dropdown-item" href="#">Action</a>
  307.                                                 <a class="dropdown-item" href="#">Remove</a>
  308.                                             </div>
  309.                                         </div>
  310.                                         
  311.                                         <div class="mx-auto mb-4">
  312.                                             <img src="/images/users/avatar-9.jpg" alt="" class="avatar-xl rounded-circle img-thumbnail">
  313.                                         </div>
  314.                                         <h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Paul Sanchez</a></h5>
  315.                                         <p class="text-muted mb-2">Full Stack Developer</p>
  316.                                         
  317.                                     </div>
  319.                                     <div class="btn-group" role="group">
  320.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-user me-1"></i> Profile</button>
  321.                                         <button type="button" class="btn btn-outline-light text-truncate"><i class="uil uil-envelope-alt me-1"></i> Message</button>
  323.                                     </div>
  324.                                 </div>
  325.                                 <!-- end card -->
  326.                             </div>
  327.                             <!-- end col -->
  328.                             
  329.                         </div>
  330.                         <!-- end row -->
  332.                         <div class="row g-0 align-items-center mb-4">
  333.                             <div class="col-sm-6">
  334.                                 <div>
  335.                                     <p class="mb-sm-0">Showing 1 to 10 of 57 entries</p>
  336.                                 </div>
  337.                             </div>
  338.                             <div class="col-sm-6">
  339.                                 <div class="float-sm-end">
  340.                                     <ul class="pagination mb-sm-0">
  341.                                         <li class="page-item disabled">
  342.                                             <a href="#" class="page-link"><i class="mdi mdi-chevron-left"></i></a>
  343.                                         </li>
  344.                                         <li class="page-item">
  345.                                             <a href="#" class="page-link">1</a>
  346.                                         </li>
  347.                                         <li class="page-item active">
  348.                                             <a href="#" class="page-link">2</a>
  349.                                         </li>
  350.                                         <li class="page-item">
  351.                                             <a href="#" class="page-link">3</a>
  352.                                         </li>
  353.                                         <li class="page-item">
  354.                                             <a href="#" class="page-link">4</a>
  355.                                         </li>
  356.                                         <li class="page-item">
  357.                                             <a href="#" class="page-link">5</a>
  358.                                         </li>
  359.                                         <li class="page-item">
  360.                                             <a href="#" class="page-link"><i class="mdi mdi-chevron-right"></i></a>
  361.                                         </li>
  362.                                     </ul>
  363.                                 </div>
  364.                             </div>
  365.                         </div>
  366.                         <!-- end row -->
  367.                         
  368.                     </div> <!-- container-fluid -->
  369.                 </div>
  370.                 <!-- End Page-content -->
  372.                 
  373.                 {{ include('partials/footer.html.twig') }}
  374.             </div>
  375.             <!-- end main content-->
  377.         </div>
  378.         <!-- END layout-wrapper -->
  380.         {{ include('partials/right-sidebar.html.twig') }}
  382.         {{ include('partials/vendor-scripts.html.twig') }}
  384.         <script src="/js/app.js"></script>
  386.     </body>
  387. </html>