Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Notification Systems
Table-organized admin notification system.
Table Format List of Checkboxes
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative h3sa8 du2fm"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body><!-- Notifications --> <div class="do9bm"> <!-- Header --> <div class="hidden mhpj3"> <!-- Grid --> <div class="o4dae n7gog r6plf kio0y ogll8 ge2mg"> <div class="h1env b8921"> <h2 class="lno3i t4wtn dark:text-neutral-200"> Notify me about </h2> </div> <!-- End Col --> <div class="bbqht iieae"> <svg class="xqknn t0r8j pvi3v kugle dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <h3 class="vvl4w a3wk8 zd5ha t4wtn dark:text-neutral-200"> Email </h3> </div> <!-- End Col --> <div class="bbqht iieae"> <svg class="xqknn t0r8j pvi3v kugle dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg> <h3 class="vvl4w a3wk8 zd5ha t4wtn dark:text-neutral-200"> Desktop </h3> <p class="egssd kugle dark:text-neutral-500"> Push notification </p> </div> <!-- End Col --> <div class="bbqht iieae"> <svg class="xqknn t0r8j pvi3v kugle dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> <h3 class="vvl4w a3wk8 zd5ha t4wtn dark:text-neutral-200"> Mobile </h3> <p class="egssd kugle dark:text-neutral-500"> Push notification </p> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <!-- End Header --> <!-- List --> <ul class="o4dae n7gog kio0y o7p0z zb2tq ogll8 ge2mg dark:bg-neutral-700"> <!-- Item --> <li class="fls8t"> <h3 class="lno3i t4wtn dark:text-neutral-200"> General </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Mentions </p> <p class="a3wk8 kugle dark:text-neutral-500"> Receive a notification if a teammate mentions you in a note. </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Service provider updates </p> <p class="a3wk8 kugle dark:text-neutral-500"> Receive a notification when there are changes to the list of Preline service providers </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog kio0y o7p0z zb2tq ogll8 ge2mg dark:bg-neutral-700"> <!-- Item --> <li class="fls8t"> <h3 class="lno3i t4wtn dark:text-neutral-200"> API </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Webhooks </p> <p class="a3wk8 kugle dark:text-neutral-500"> Receive a notification when webhooks are consistently failing. </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog kio0y o7p0z zb2tq ogll8 ge2mg dark:bg-neutral-700"> <!-- Item --> <li class="fls8t"> <h3 class="lno3i t4wtn dark:text-neutral-200"> Tasks </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Task Assignments </p> <p class="a3wk8 kugle dark:text-neutral-500"> Notify me when I'm assigned a task </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Tasks msrku </p> <p class="a3wk8 kugle dark:text-neutral-500"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Tasks uncompleted </p> <p class="a3wk8 kugle dark:text-neutral-500"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> </div> <!-- End Notifications --> <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script> </body> </html>
<!-- Notifications --> <div class="do9bm"> <!-- Header --> <div class="hidden dywcs aemez vvp3o nz7b4 dark:bg-neutral-800 mhpj3"> <!-- Grid --> <div class="o4dae n7gog r6plf kio0y ogll8 ge2mg"> <div class="h1env b8921"> <h2 class="lno3i t4wtn dark:text-neutral-200"> Notify me about </h2> </div> <!-- End Col --> <div class="bbqht iieae"> <svg class="xqknn t0r8j pvi3v kugle dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> <h3 class="vvl4w a3wk8 zd5ha t4wtn dark:text-neutral-200"> Email </h3> </div> <!-- End Col --> <div class="bbqht iieae"> <svg class="xqknn t0r8j pvi3v kugle dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg> <h3 class="vvl4w a3wk8 zd5ha t4wtn dark:text-neutral-200"> Desktop </h3> <p class="egssd kugle dark:text-neutral-500"> Push notification </p> </div> <!-- End Col --> <div class="bbqht iieae"> <svg class="xqknn t0r8j pvi3v kugle dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> <h3 class="vvl4w a3wk8 zd5ha t4wtn dark:text-neutral-200"> Mobile </h3> <p class="egssd kugle dark:text-neutral-500"> Push notification </p> </div> <!-- End Col --> </div> <!-- End Grid --> </div> <!-- End Header --> <!-- List --> <ul class="o4dae n7gog kio0y o7p0z zb2tq ogll8 ge2mg dark:bg-neutral-700"> <!-- Item --> <li class="fls8t"> <h3 class="lno3i t4wtn dark:text-neutral-200"> General </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Mentions </p> <p class="a3wk8 kugle dark:text-neutral-500"> Receive a notification if a teammate mentions you in a note. </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Service provider updates </p> <p class="a3wk8 kugle dark:text-neutral-500"> Receive a notification when there are changes to the list of Preline service providers </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog kio0y o7p0z zb2tq ogll8 ge2mg dark:bg-neutral-700"> <!-- Item --> <li class="fls8t"> <h3 class="lno3i t4wtn dark:text-neutral-200"> API </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Webhooks </p> <p class="a3wk8 kugle dark:text-neutral-500"> Receive a notification when webhooks are consistently failing. </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog kio0y o7p0z zb2tq ogll8 ge2mg dark:bg-neutral-700"> <!-- Item --> <li class="fls8t"> <h3 class="lno3i t4wtn dark:text-neutral-200"> Tasks </h3> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> <!-- Item --> <li class="hidden mhpj3 u07mp nzo6u"> <button type="button" class="egssd tiwe1 ue3li e229p zd5ha t4rxa nvzxt dark:text-blue-400 dark:hover:text-blue-500"> Toggle all </button> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Task Assignments </p> <p class="a3wk8 kugle dark:text-neutral-500"> Notify me when I'm assigned a task </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Tasks msrku </p> <p class="a3wk8 kugle dark:text-neutral-500"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> <!-- List --> <ul class="o4dae n7gog fh2yq bag0c y4h4h cc1ly zeyhu"> <!-- Item --> <li class="fls8t"> <p class="a3wk8 zd5ha t4wtn dark:text-neutral-200"> Tasks uncompleted </p> <p class="a3wk8 kugle dark:text-neutral-500"> Only for tasks youʼve created or assigned </p> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Email </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Desktop </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> <!-- Item --> <li class="bbqht"> <div class="o4dae ytg72 items-center mhpj3"> <span class="uk6li a3wk8 kugle dark:text-neutral-200"> Mobile </span> <div class="wdn83 nzo6u"> <input type="checkbox" class="xqknn p0r8k v58qp tiwe1 f9924 iec4s haq8z dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked> </div> </div> </li> <!-- End Item --> </ul> <!-- End List --> </div> <!-- End Notifications -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close