templates/ui-alerts.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: 'Alerts'}) }}
  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: 'Components', title: 'Alerts'}) }}
  28.                         <div class="row">
  29.                             <div class="col-xl-6">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Default Alerts</h4>
  33.                                         <p class="card-title-desc">Alerts are available for any length of
  34.                                             text, as well as an optional dismiss button. For proper styling, use one
  35.                                             of the four <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline
  36.                                             dismissal, use the alerts jQuery plugin.
  37.                                         </p>
  38.                                     </div><!-- end card header-->
  40.                                     <div class="card-body">
  41.                                         <div class="alert alert-primary" role="alert">
  42.                                             A simple primary alert—check it out!
  43.                                         </div>
  44.                                         <div class="alert alert-secondary" role="alert">
  45.                                             A simple secondary alert—check it out!
  46.                                         </div>
  47.                                         <div class="alert alert-success" role="alert">
  48.                                             A simple success alert—check it out!
  49.                                         </div>
  50.                                         <div class="alert alert-danger" role="alert">
  51.                                             A simple danger alert—check it out!
  52.                                         </div>
  53.                                         <div class="alert alert-warning" role="alert">
  54.                                             A simple warning alert—check it out!
  55.                                         </div>
  56.                                         <div class="alert alert-info" role="alert">
  57.                                             A simple info alert—check it out!
  58.                                         </div>
  59.                                         <div class="alert alert-light" role="alert">
  60.                                             A simple light alert—check it out!
  61.                                         </div>
  62.                                         <div class="alert alert-dark mb-0" role="alert">
  63.                                             A simple dark alert—check it out!
  64.                                         </div>
  65.                                     </div><!-- end card-body --> 
  66.                                 </div><!-- end card -->
  67.                             </div><!-- end col -->
  69.                             <div class="col-xl-6">
  70.                                 <div class="card">
  71.                                     <div class="card-header">
  72.                                         <h4 class="card-title">Link Color</h4>
  73.                                         <p class="card-title-desc">Use the <code
  74.                                             >.alert-link</code> utility class to
  75.                                         quickly provide matching colored links within any alert.
  76.                                         </p>
  77.                                     </div><!-- end card header-->
  79.                                     <div class="card-body">
  80.                                         <div class="alert alert-primary" role="alert">
  81.                                             A simple primary alert with <a href="javascript: void(0);" class="alert-link">an example link</a>. Give it a
  82.                                             click if you like.
  83.                                         </div>
  84.                                         <div class="alert alert-secondary" role="alert">
  85.                                             A simple secondary alert with <a href="javascript: void(0);" class="alert-link">an example link</a>. Give it a
  86.                                             click if you like.
  87.                                         </div>
  88.                                         <div class="alert alert-success" role="alert">
  89.                                             A simple success alert with <a href="javascript: void(0);" class="alert-link">an example link</a>. Give it a
  90.                                             click if you like.
  91.                                         </div>
  92.                                         <div class="alert alert-danger" role="alert">
  93.                                             A simple danger alert with <a href="javascript: void(0);" class="alert-link">an example link</a>. Give it a
  94.                                             click if you like.
  95.                                         </div>
  96.                                         <div class="alert alert-warning" role="alert">
  97.                                             A simple warning alert with <a href="javascript: void(0);" class="alert-link">an example link</a>. Give it a
  98.                                             click if you like.
  99.                                         </div>
  100.                                         <div class="alert alert-info" role="alert">
  101.                                             A simple info alert with <a href="javascript: void(0);" class="alert-link">an example link</a>. Give it a click
  102.                                             if you like.
  103.                                         </div>
  104.                                         <div class="alert alert-light" role="alert">
  105.                                             A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  106.                                         </div>
  107.                                         <div class="alert alert-dark mb-0" role="alert">
  108.                                             A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  109.                                         </div>
  110.                                     </div><!-- end card-body -->
  111.                                 </div><!-- end card -->
  112.                             </div><!-- end col -->
  113.                         </div><!-- end row -->
  115.                         <div class="row">
  116.                             <div class="col-xl-6">
  117.                                 <div class="card">
  118.                                     <div class="card-header">
  119.                                         <h4 class="card-title">Dismissing</h4>
  120.                                         <p class="card-title-desc">Add a dismiss button and the <code>.alert-dismissible</code> class, which adds extra padding
  121.                                             to the right of the alert and positions the <code>.btn-close</code> button.
  122.                                         </p>
  123.                                     </div><!-- end card header-->
  125.                                     <div class="card-body">
  126.                                         <div class="alert alert-success alert-dismissible fade show" role="alert">
  127.                                             A simple success alert—check it out!
  128.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  129.                                         </div>
  130.                                         <div class="alert alert-danger alert-dismissible fade show" role="alert">
  131.                                             A simple danger alert—check it out!
  132.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  133.                                         </div>
  134.                                         <div class="alert alert-warning alert-dismissible fade show" role="alert">
  135.                                             A simple warning alert—check it out!
  136.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  137.                                         </div>
  138.                                         <div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
  139.                                             A simple info alert—check it out!
  140.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  141.                                         </div>
  142.                                     </div><!-- end card-body -->
  143.                                 </div><!-- end card -->
  144.                             </div><!-- end col -->
  146.                             <div class="col-xl-6">
  147.                                 <div class="card">
  148.                                     <div class="card-header">
  149.                                         <h4 class="card-title"> Alert with Icon</h4>
  150.                                         <p class="card-title-desc">You can use flexbox utilities and Icons to create alerts with icons</p>
  151.                                     </div><!-- end card header-->
  153.                                     <div class="card-body">
  154.                                         <div class="alert alert-success alert-dismissible fade show" role="alert">
  155.                                             <i class="mdi mdi-check-all me-2"></i>
  156.                                             A simple success alert—check it out!
  157.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  158.                                         </div>
  159.                                         <div class="alert alert-danger alert-dismissible fade show" role="alert">
  160.                                             <i class="mdi mdi-block-helper me-2"></i>
  161.                                             A simple danger alert—check it out!
  162.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  163.                                         </div>
  164.                                         <div class="alert alert-warning alert-dismissible fade show" role="alert">
  165.                                             <i class="mdi mdi-alert-outline me-2"></i>
  166.                                             A simple warning alert—check it out!
  167.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  168.                                         </div>
  169.                                         <div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
  170.                                             <i class="mdi mdi-alert-circle-outline me-2"></i>
  171.                                             A simple info alert—check it out!
  172.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  173.                                         </div>
  174.                                     </div><!-- end card-body -->
  175.                                 </div><!-- end card -->
  176.                             </div><!-- end col -->
  177.                         </div><!-- end row -->
  179.                         <div class="row">
  180.                             <div class="col-xl-6">
  181.                                 <div class="card">
  182.                                     <div class="card-header">
  183.                                         <h4 class="card-title">Outline Alerts</h4>
  184.                                         <p class="card-title-desc">Add <code>.alert-outline</code> class with for Outline alerts.</p>
  185.                                     </div><!-- end card header-->
  187.                                     <div class="card-body">
  188.                                         <div class="alert alert-success alert-dismissible alert-outline fade show" role="alert">
  189.                                             <strong>Success</strong> - Outline success alert example
  190.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  191.                                         </div>
  192.                                         <div class="alert alert-danger alert-dismissible alert-outline fade show" role="alert">
  193.                                             <strong>Danger</strong> - Outline danger alert example
  194.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  195.                                         </div>
  196.                                         <div class="alert alert-warning alert-dismissible alert-outline fade show" role="alert">
  197.                                             <strong>Warning</strong> - Outline warning alert example
  198.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  199.                                         </div>
  200.                                         <div class="alert alert-info alert-dismissible alert-outline fade show mb-0" role="alert">
  201.                                             <strong>Info</strong> - Outline info alert example
  202.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  203.                                         </div>
  204.                                     </div><!-- end card-body -->
  205.                                 </div><!-- end card -->
  206.                             </div><!-- end col -->
  208.                             <div class="col-xl-6">
  209.                                 <div class="card">
  210.                                     <div class="card-header">
  211.                                         <h4 class="card-title">Left Border Alerts</h4>
  212.                                         <p class="card-title-desc">Add <code>.alert-outline</code> class with for Outline alerts.</p>
  213.                                     </div><!-- end card header-->
  215.                                     <div class="card-body">
  216.                                         <div class="alert alert-success alert-border-left alert-dismissible fade show" role="alert">
  217.                                             <i class="mdi mdi-check-all me-3 align-middle"></i><strong>Success</strong> - Left border alert
  218.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  219.                                         </div>
  220.                                         <div class="alert alert-danger alert-border-left alert-dismissible fade show" role="alert">
  221.                                             <i class="mdi mdi-block-helper me-3 align-middle"></i><strong>Danger</strong> - Left border alert
  222.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  223.                                         </div>
  224.                                         <div class="alert alert-warning alert-border-left alert-dismissible fade show" role="alert">
  225.                                             <i class="mdi mdi-alert-outline align-middle me-3"></i><strong>Warning</strong> - Left border alert
  226.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  227.                                         </div>
  228.                                         <div class="alert alert-info alert-border-left alert-dismissible fade show mb-0" role="alert">
  229.                                             <i class="mdi mdi-alert-circle-outline align-middle me-3"></i><strong>Info</strong> - Left border alert
  230.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  231.                                         </div>                                       
  232.                                     </div><!-- end card-body -->
  233.                                 </div><!-- end card -->
  234.                             </div><!-- end col -->
  235.                         </div><!-- end row -->
  237.                         <div class="row">
  239.                             <div class="col-xl-6">
  240.                                 <div class="card">
  241.                                     <div class="card-header">
  242.                                         <h4 class="card-title">Top Border Alerts</h4>
  243.                                         <p class="card-title-desc">Left Border Alert example</p>
  244.                                     </div><!-- end card header-->
  246.                                     <div class="card-body">
  247.                                         <div class="alert alert-success alert-top-border alert-dismissible fade show" role="alert">
  248.                                             <i class="mdi mdi-check-all me-3 align-middle text-success"></i><strong>Success</strong> - Top border alert
  249.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  250.                                         </div>
  252.                                         
  253.                                         <div class="alert alert-danger alert-top-border alert-dismissible fade show" role="alert">
  254.                                             <i class="mdi mdi-block-helper me-3 align-middle text-danger"></i><strong>Danger</strong> - Top border alert
  255.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  256.                                         </div>
  257.                                         
  258.                                         <div class="alert alert-warning alert-top-border alert-dismissible fade show" role="alert">
  259.                                             <i class="mdi mdi-alert-outline align-middle text-warning me-3"></i><strong>Warning</strong> - Top border alert
  260.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  261.                                         </div>
  262.                                         
  263.                                         <div class="alert alert-info alert-top-border alert-dismissible fade show mb-0" role="alert">
  264.                                             <i class="mdi mdi-alert-circle-outline text-info align-middle me-3"></i><strong>Info</strong> - Top border alert
  265.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  266.                                         </div>                                   
  267.                                     </div><!-- end card-body -->
  268.                                 </div><!-- end card -->
  269.                             </div><!-- end col -->
  271.                             <div class="col-xl-6">
  272.                                 <div class="card">
  273.                                     <div class="card-header">
  274.                                         <h4 class="card-title">Label Icon Arrow Alerts</h4>
  275.                                         <p class="card-title-desc">Alert label arrow example</p>
  276.                                     </div><!-- end card header-->
  278.                                     <div class="card-body">
  279.                                         <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
  280.                                             <i class="mdi mdi-check-all label-icon"></i><strong>Success</strong> - Label icon arrow alert
  281.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  282.                                         </div>
  284.                                         <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show" role="alert">
  285.                                             <i class="mdi mdi-block-helper label-icon"></i><strong>Danger</strong> - Label icon arrow alert
  286.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  287.                                         </div>
  288.                                         
  289.                                         <div class="alert alert-warning alert-dismissible alert-label-icon label-arrow fade show" role="alert">
  290.                                             <i class="mdi mdi-alert-outline label-icon"></i><strong>Warning</strong> - Label icon arrow alert
  291.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  292.                                         </div>
  293.                                         
  294.                                         <div class="alert alert-info alert-dismissible alert-label-icon label-arrow fade show mb-0" role="alert">
  295.                                             <i class="mdi mdi-alert-circle-outline label-icon"></i><strong>Info</strong> - Label icon arrow alert
  296.                                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  297.                                         </div>                                   
  298.                                     </div><!-- end card-body -->
  299.                                 </div><!-- end card -->
  300.                             </div><!-- end col -->
  301.                         </div><!-- end row -->
  303.                         <div class="row">
  304.                             <div class="col-xl-12">
  305.                                 <div class="card">
  306.                                     <div class="card-header">
  307.                                         <h4 class="card-title">Alert Live Examples</h4>
  308.                                         <p class="card-title-desc">Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.</p>
  309.                                     </div><!-- end card header-->
  311.                                     <div class="card-body">
  312.                                         <div id="liveAlertPlaceholder"></div>
  313.                                         <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
  314.                                     </div><!-- end card-body -->
  315.                                 </div><!-- end card -->
  316.                             </div><!-- end col -->
  317.                         </div><!-- end row --> 
  318.                         
  319.                         <div class="row">
  320.                             <div class="col-xl-12">
  321.                                 <div class="card">
  322.                                     <div class="card-header">
  323.                                         <h4 class="card-title">Alert Examples</h4>
  324.                                         <p class="card-title-desc">Success, Error and Warning Alert Examples.</p>
  325.                                     </div><!-- end card header-->
  327.                                     <div class="card-body">
  328.                                         <div class="row g-4">
  329.                                             <div class="col-sm-3">
  330.                                                 <div class="alert alert-success alert-dismissible fade show px-4 mb-0 text-center" role="alert">
  331.                                                     <i class="mdi mdi-check-all d-block display-4 mt-2 mb-3 text-success"></i>
  332.                                                     <h5 class="text-success">Success</h5>
  333.                                                     <p>A simple success alert</p>
  334.                                                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  335.                                                 </div>
  336.                                             </div><!-- end col -->
  338.                                             <div class="col-sm-3">
  339.                                                 <div class="alert alert-danger alert-dismissible fade show px-4 mb-0 text-center" role="alert">
  340.                                                     <i class="mdi mdi-block-helper d-block display-4 mt-2 mb-3 text-danger"></i>
  341.                                                     <h5 class="text-danger">Error</h5>
  342.                                                     <p>A simple danger alert</p>
  343.                                                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  344.                                                 </div>
  345.                                             </div><!-- end col -->
  347.                                             <div class="col-sm-3">
  348.                                                 <div class="alert alert-warning alert-dismissible fade show px-4 mb-0 text-center" role="alert">
  349.                                                     <i class="mdi mdi-alert-outline d-block display-4 mt-2 mb-3 text-warning"></i>
  350.                                                     <h5 class="text-warning">Warning</h5>
  351.                                                     <p>A simple warning alert</p>
  352.                                                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  353.                                                 </div>
  354.                                             </div><!-- end col -->
  356.                                             <div class="col-sm-3">
  357.                                                 <div class="alert alert-info alert-dismissible fade show px-4 mb-0 text-center" role="alert">
  358.                                                     <i class="mdi mdi-alert-circle-outline d-block display-4 mt-2 mb-3 text-info"></i>
  359.                                                     <h5 class="text-info">Info</h5>
  360.                                                     <p>A simple info alert</p>
  361.                                                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  362.                                                 </div>
  363.                                             </div><!-- end col -->
  364.                                         </div><!-- end row -->
  365.                                     </div><!-- end card-body -->
  366.                                 </div><!-- end card -->
  367.                             </div><!-- end col -->
  368.                         </div><!-- end row -->
  370.                     </div>
  371.                     <!-- container-fluid -->
  372.                 </div>
  373.                 <!-- End Page-content -->
  375.                 {{ include('partials/footer.html.twig') }}
  376.                 
  377.             </div>
  378.             <!-- end main content-->
  380.         </div>
  381.         <!-- END layout-wrapper -->
  383.         {{ include('partials/right-sidebar.html.twig') }}
  385.         {{ include('partials/vendor-scripts.html.twig') }}
  387.          <!-- Alert init js -->
  388.         <script src="/js/pages/alert.init.js"></script>
  391.         <script src="/js/app.js"></script>
  393.     </body>
  394. </html>