- var theme_customizer      = true;
- var height_equal          = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var alert                 = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Alert
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Alert
          // Container-fluid starts
          .container-fluid
            .row
              .col-xl-12
                .card
                  .card-header
                    h4 Link Color In Dark Theme
                    p.f-m-light.mt-1
                      | Use the 
                      code .alert-link
                      |  utility class to quickly provide matching colored links within any alert
                  .card-body
                    .row 
                      .col-xl-6 
                        p.mb-0 Primary Alert
                        .alert.alert-primary.dark(role='alert')
                          p
                            | This is a   
                            a.alert-link.text-white(href='#') primary alert
                            |  with an example link.Check it out.
                        p.mb-0 Secondary Alert
                        .alert.alert-secondary.dark(role='alert')
                          p
                            | This is a   
                            a.alert-link.text-white(href='#') secondary alert
                            |   with an example link. Check it out.
                        p.mb-0 Success Alert
                        .alert.alert-success.dark(role='alert')
                          p
                            | This is a  
                            a.alert-link.text-white(href='#') success alert 
                            |   with an example link. Check it out.
                        p.mb-0 Info Alert
                        .alert.alert-info.dark(role='alert')
                          p
                            | This is a  
                            a.alert-link.text-white(href='#') info alert 
                            |   with an example link. Check it out.
                      .col-xl-6
                        p.mb-0 Warning Alert
                        .alert.alert-warning.dark(role='alert')
                          p
                            | This is a  
                            a.alert-link.text-white(href='#') warning alert 
                            |   with an example link. Check it out.
                        p.mb-0 Danger Alert
                        .alert.alert-danger.dark(role='alert')
                          p
                            | This is a  
                            a.alert-link.text-white(href='#') danger alert 
                            |   with an example link. Check it out.
                        p.mb-0 Light Alert
                        .alert.alert-light.dark(role='alert')
                          p
                            | This is a  
                            a.alert-link(href='#') light alert 
                            |   with an example link. Check it out.
                        p.mb-0 Dark Alert
                        .alert.alert-dark.dark(role='alert')
                          p
                            | This is a  
                            a.alert-link.text-white(href='#') dark alert 
                            |   with an example link. Check it out.
              .col-xl-12
                .card
                  .card-header
                    h4 Link Color In Light Theme
                    p.f-m-light.mt-1
                      | Use the 
                      code .alert-link
                      |  utility class to quickly provide matching colored links within any alert
                  .card-body
                    .row 
                      .col-xl-6
                        p.mb-0 Primary Light Alert
                        .alert.alert-light-primary(role='alert')
                          p.txt-primary
                            | This is a   
                            a.alert-link.txt-primary(href='#') primary alert
                            |  with an example link.Check it out.
                        p.mb-0 Secondary Light Alert
                        .alert.alert-light-secondary(role='alert')
                          p.txt-secondary
                            | This is a   
                            a.alert-link.txt-secondary(href='#') secondary alert
                            |   with an example link. Check it out.
                        p.mb-0 Success Light Alert
                        .alert.alert-light-success(role='alert')
                          .txt-success
                            | This is a  
                            a.alert-link.txt-success(href='#') success alert 
                            |   with an example link. Check it out.
                        p.mb-0 Info Light Alert
                        .alert.alert-light-info(role='alert')
                          .txt-info
                            | This is a  
                            a.alert-link.txt-info(href='#') info alert 
                            |   with an example link. Check it out.
                      .col-xl-6
                        p.mb-0 Warning Light Alert
                        .alert.alert-light-warning(role='alert')
                          p.txt-warning
                            | This is a  
                            a.alert-link.txt-warning(href='#') warning alert 
                            |   with an example link. Check it out.
                        p.mb-0 Danger Light Alert
                        .alert.alert-light-danger(role='alert')
                          p.txt-danger
                            | This is a  
                            a.alert-link.txt-danger(href='#') danger alert 
                            |   with an example link. Check it out.
                        p.mb-0 White Light Alert
                        .alert.alert-light-light(role='alert')
                          p.txt-dark
                            | This is a  
                            a.alert-link.txt-dark(href='#') light alert 
                            |   with an example link. Check it out.
                        p.mb-0 Dark Light Alert
                        .alert.alert-light-dark(role='alert')
                          p.txt-dark
                            | This is a  
                            a.alert-link.txt-dark(href='#') dark alert 
                            |   with an example link. Check it out.
              .col-sm-12.col-xl-6
                .card
                  .card-header
                    h4 Outline Dark And Light Alerts
                    p.f-m-light.mt-1
                      | Use the 
                      code .border-*
                      | utility class to quickly provide matching border and border-width within any alert.
                  .card-body
                    .alert.txt-primary.border-primary.alert-dismissible.fade.show(role='alert')
                      i(data-feather='clock')
                      p
                        |One of 
                        strong YouTube's
                        | most crucial ranking factors is Watch Time.
                      button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
                    .alert.txt-success.border-success.outline-2x.alert-dismissible.fade.show.alert-icons(role='alert')
                      i(data-feather='thumbs-up')
                      p
                        b  Well done! 
                        | You successfully read this important message.
                      button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
              .col-sm-12.col-xl-6
                .card
                  .card-header
                    h4 Alerts With Icons and Text Actions
                    p.f-m-light.mt-1
                      | Use the 
                      code .dismiss-text
                      |  class to add dismiss text instead of icon
                  .card-body.dark-txt
                    .alert.border-warning.alert-dismissible.fade.show.p-0(role='alert')
                      .alert-arrow.bg-warning
                        i.icon-timer
                      p
                        | Your time Over after                            
                        strong.txt-dark 5
                        |   minute
                      button.p-0.border-0.me-2.ms-auto(type='button' data-bs-dismiss='alert' aria-label='Close')
                        span.bg-warning.text-black.px-3.py-1(aria-hidden='true') Check
                    .alert.border-danger.alert-dismissible.fade.show.p-0.mb-0(role='alert')
                      .alert-arrow.bg-danger
                        i.icon-heart
                      p
                        | Oh snap! Change a few things up 
                        strong.txt-dark  Notification check
                      button.p-0.border-0.me-2.ms-auto(type='button' data-bs-dismiss='alert' aria-label='Close')
                        span.bg-danger.text-white.px-3.py-1(aria-hidden='true') Alert
              .col-sm-12.col-xl-6
                .card.height-equal
                  .card-header
                    h4 Dismissing Dark Alerts
                    p.f-m-light.mt-1
                      | Use the 
                      code .alert-dismissible
                      |  utility class to quickly remove the alerts.
                  .card-body
                    .alert.alert-secondary.dark.alert-dismissible.fade.show(role='alert')
                      i(data-feather='heart')
                      p Check your update! You should check in on some of those fields below.
                      button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
              .col-sm-12.col-xl-6
                .card.height-equal
                  .card-header
                    h4 Dismissing Light Alerts
                    p.f-m-light.mt-1
                    | Use the 
                    code .alert-dismissible
                    |  utility class to quickly remove the alerts.
                  .card-body
                    .alert.alert-warning.alert-dismissible.fade.show(role='alert')
                      i(data-feather='bell')
                      p Hidden content You should check in on some of those fields below.
                      button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
              .col-xl-6
                .card.height-equal
                  .card-header 
                    h4 Live Alert
                    p.f-m-light.mt-1 
                      | Click the button below to show an alert,then dismiss it with the built-in close button.
                  .card-body.live-dark
                      #liveAlertPlaceholder
                      button#liveAlertBtn.btn.btn-dark(type='button') Show live alert
              .col-xl-6
                .card.height-equal
                  .card-header 
                    h4 Left Border Alert
                    p.f-m-light.mt-1 
                      | Use the 
                      code .border-left-wrapper 
                      | to change border-left radius.
                  .card-body.live-dark
                    .alert.alert-light-dark.light.alert-dismissible.fade.show.text-dark.border-left-wrapper(role='alert')
                      i(data-feather='help-circle')
                      p You can check in on some of those fields below.
                      button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
              .col-sm-12
                .card
                  .card-header
                    h4 Additional content
                    p.f-m-light.mt-1 
                      | Use the 
                      code .alert
                      |  utility class to quickly provide additional content within any alerts.
                  .card-body.dark-alert
                    .alert.alert-light-primary(role='alert')
                      h5.alert-heading.pb-2.txt-primary Please! Check your notifications
                      p
                        | The duty of notification is imposed upon the head of the family, and also upon the medical practitioner who may be in attendance on the patient.
                      hr
                      p.mb-0
                        | The emergency notification system is free and is available in all 50 states.
                    .alert.alert-light-secondary(role='alert')
                      h5.alert-heading.pb-2.txt-secondary Something went wrong! Please, chrome update.
                      p
                        | The duty of notification is imposed upon the head of the family, and also upon the medical practitioner who may be in attendance on the patient.
                      hr
                      p.mb-0
                        | Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
                    .alert.alert-light-success(role='alert')
                      h5.alert-heading.pb-2.txt-success Please! Hidden cameras were not installed.
                      p
                        | Due to increasingly accessible technology, hidden cameras have grown in popularity among regular people in recent years.
                      hr
                      p.mb-0
                        | Consider moving clocks and plush animals from your area if you think they may be concealing cameras because they are both portable items.
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files