- var page_Title = 'Toasts';
- var theme_customizer      = true;
- var toasts                = true;
- var page_notify           = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var clipboard             = true;
- var prism                 = true;
- var customcard            = true;
- var height_equal          = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Toasts
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Toasts
          // Container-fluid starts
          .container.default-toasts
            .grid.grid.cols-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Message Toasts
                    p.f-m-light.mt-1 
                      | Use
                      code  fixed
                      |   class to 
                      code  [top/end/start/bottom]
                      |  toasts.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.common-flex.common-toasts
                    button#liveToastBtn6.btn.btn-success.text-white(type='button') Success Toast
                    .toast-container.fixed.top-0.end-0.p-3.toast-index.toast-rtl(class="")
                      #liveToast6.toast(role='alert' aria-live='polite' aria-atomic='true')
                        .common-space.alert-light-success
                          .toast-body
                            i(data-feather='check-square').close-search.stroke-success
                            | Success: We've updated your info
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                    button#liveToastBtn5.btn.btn-warning.text-white(type='button') Warning Toast
                    .toast-container.fixed.top-50.end-0.p-3.toast-index.toast-rtl
                      #liveToast5.toast(role='alert' aria-live='polite' aria-atomic='true')
                        .common-space.alert-light-warning
                          .toast-body
                            i(data-feather='alert-triangle').close-search.stroke-warning
                            | Software drivers needed to be updated in advance
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                    button#liveToastBtn4.btn.btn-danger.text-white(type='button') Error Toast
                    .toast-container.fixed.bottom-0.end-0.p-3.toast-index.toast-rtl
                      #liveToast4.toast(role='alert' aria-live='polite' aria-atomic='true')
                        .common-space.alert-light-danger
                          .toast-body
                            i(data-feather='x-circle').close-search.stroke-danger
                            | A database connection error has occurred
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#message-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#message-toast-copy
                          |&lt;div class="card-body common-flex common-toasts"&gt;
                          |  &lt;button class="btn btn-success" id="liveToastBtn6" type="button"&gt;Success Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed top-0 end-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast" id="liveToast6" role="alert" aria-live="polite" aria-atomic="true"&gt;
                          |      &lt;div class="common-space alert-light-success"&gt;
                          |        &lt;div class="toast-body"&gt;
                          |          &lt;i class="close-search stroke-success" data-feather="check-square"&gt;&lt;/i&gt;Success: We've updated your info
                          |        &lt;/div&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;button class="btn btn-warning" id="liveToastBtn5" type="button"&gt;Warning Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed top-50 end-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast" id="liveToast5" role="alert" aria-live="polite" aria-atomic="true"&gt;
                          |      &lt;div class="common-space alert-light-warning"&gt;
                          |        &lt;div class="toast-body"&gt;
                          |          &lt;i class="close-search stroke-warning" data-feather="alert-triangle"&gt;&lt;/i&gt;Software drivers needed to be updated in advance
                          |        &lt;/div&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;button class="btn btn-danger" id="liveToastBtn4" type="button"&gt;Error Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed bottom-0 end-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast" id="liveToast4" role="alert" aria-live="polite" aria-atomic="true"&gt;
                          |      &lt;div class="common-space alert-light-danger"&gt;
                          |        &lt;div class="toast-body"&gt;
                          |          &lt;i class="close-search stroke-danger" data-feather="x-circle"&gt;&lt;/i&gt;A database connection error has occurred
                          |        &lt;/div&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Live Toast
                    p.f-m-light.mt-1 
                      | Use 
                      code hide 
                      | class to hide toast and 
                      code show 
                      | class to visible toast and given directions.
                      code [top-0/bottom-0/start-0/end-0]
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.relative.common-flex.live-toast
                    button#liveToastBtn.btn.btn-primary.text-white(type='button') Top-right Toast
                    .toast-container.fixed.top-0.end-0.p-3.toast-index.toast-rtl
                      #liveToast.toast.hide.toast.fade(role='alert' aria-live='assertive' aria-atomic='true')
                        .toast-header.toast-img
                          img.rounded-full.me-2(src='../assets/images/dashboard-5/profile.png' alt='profile')
                          strong.me-auto Yuri Theme
                          small 5 min ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          | Hello, I'm a web-designer.
                    button#liveToastBtn1.btn.btn-secondary.text-white(type='button') Bottom-right Toast
                    .toast-container.fixed.bottom-0.end-0.p-3.toast-index.toast-rtl
                      #liveToast1.toast.hide.toast.fade(role='alert' aria-live='assertive' aria-atomic='true')
                        .flex.justify-between.alert-secondary
                          .toast-body
                            | Your time over after 5 minute.
                          button.btn-close.btn-close-white.me-2.m-auto(type='button' data-bs-dismiss='toast' aria-label='Close')
                    button#liveToastBtn2.btn.btn-warning.text-white(type='button') Top-left Toast
                    .toast-container.fixed.start-0.top-0.p-3.toast-index.toast-rtl
                      #liveToast2.toast.hide.toast.fade(role='alert' aria-live='assertive' aria-atomic='true')
                        .toast-header.toast-img
                          img.rounded-full.me-2(src='../assets/images/dashboard-5/profile.png' alt='profile')
                          strong.me-auto Riho Theme
                          small.d-sm-block.hidden 10 min ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          strong.txt-success Well done!
                          |  You successfully read this important message.
                    button#liveToastBtn3.btn.btn-success.text-white(type='button') Bottom-left Toast
                    .toast-container.fixed.start-0.bottom-0.p-3.toast-index.toast-rtl
                      #liveToast3.toast.hide.toast.fade(role='alert' aria-live='assertive' aria-atomic='true')
                        .toast-header.toast-img
                          img.rounded-full.me-2(src='../assets/images/dashboard-5/profile.png' alt='profile')
                          strong.me-auto Mofi Theme
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          h6.mb-2 Your account will be permanently deleted?
                          p.mb-0 Do you intend to continue?
                          .mt-2.pt-2.border-top.flex.gap-2
                            button.btn.btn-dark.btn-sm.rounded-md.text-white(type='button') I'm not sure
                            button.btn.btn-danger.btn-sm.rounded-md.text-white(type='button' data-bs-dismiss='toast') Remove My Account
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#live-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#live-toast-copy
                          |&lt;div class="card-body position-relative common-flex"&gt;
                          |  &lt;button class="btn btn-primary" id="liveToastBtn" type="button"&gt;Top-right Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed top-0 end-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast hide toast fade" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
                          |      &lt;div class="toast-header toast-img"&gt;
                          |        &lt;img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile"&gt;
                          |        &lt;strong class="me-auto"&gt;Yuri Theme&lt;/strong&gt;
                          |        &lt;small&gt;5 min ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;Hello, I'm a web-designer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;button class="btn btn-secondary" id="liveToastBtn1" type="button"&gt;Bottom-right Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed bottom-0 end-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast hide toast fade" id="liveToast1" role="alert" aria-live="assertive" aria-atomic="true"&gt;
                          |      &lt;div class="flex justify-between alert-secondary"&gt;
                          |        &lt;div class="toast-body"&gt;Your time over after 5 minute.&lt;/div&gt;
                          |        &lt;button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;button class="btn btn-warning" id="liveToastBtn2" type="button"&gt;Top-left Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed start-0 top-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast hide toast fade" id="liveToast2" role="alert" aria-live="assertive" aria-atomic="true"&gt;
                          |      &lt;div class="toast-header toast-img"&gt;
                          |        &lt;img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile"&gt;
                          |        &lt;strong class="me-auto"&gt;Riho Theme&lt;/strong&gt;&lt;small class="d-sm-block hidden"&gt;10 min ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;
                          |        &lt;strong class="txt-success"&gt;Well done!&lt;/strong&gt; You successfully read this important message.
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;button class="btn btn-success" id="liveToastBtn3" type="button"&gt;Bottom-left Toast&lt;/button&gt;
                          |  &lt;div class="toast-container fixed start-0 bottom-0 p-3 toast-index toast-rtl"&gt;
                          |    &lt;div class="toast hide toast fade" id="liveToast3" role="alert" aria-live="assertive" aria-atomic="true"&gt;
                          |      &lt;div class="toast-header toast-img"&gt;
                          |        &lt;img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile"&gt;
                          |        &lt;strong class="me-auto"&gt;Mofi Theme&lt;/strong&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;
                          |        &lt;h6 class="mb-2"&gt;Your account will be permanently deleted?&lt;/h6&gt;
                          |        &lt;p class="mb-0"&gt;Do you intend to continue?&lt;/p&gt;
                          |        &lt;div class="mt-2 pt-2 border-top flex gap-2"&gt;
                          |          &lt;button class="btn btn-dark btn-sm" type="button"&gt;I'm not sure&lt;/button&gt;
                          |          &lt;button class="btn btn-danger btn-sm" type="button" data-bs-dismiss="toast"&gt;Remove My Account&lt;/button&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Colors Schemes
                    p.f-m-light.mt-1 
                      | Use 
                      code hide 
                      | class to hide toast and 
                      code show 
                      | class to visible toast.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.toast-rtl
                    .toast.default-show-toast.items-center.text-light.bg-warning.border-0.fade.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                      .flex.justify-between.items-center
                        .toast-body
                          | Your time over after 5 minute.
                        button.btn-close.btn-close-white.me-2(type='button' data-bs-dismiss='toast' aria-label='Close')
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#color-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#color-toast-copy
                          |&lt;div class="card-body toast-rtl"&gt;
                          |  &lt;div class="toast default-show-toast align-items-center text-light bg-warning border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |    &lt;div class="flex justify-between"&gt;
                          |      &lt;div class="toast-body"&gt;Your time over after 5 minute.&lt;/div&gt;
                          |      &lt;button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Stacking Toasts
                    p.f-m-light.mt-1 
                      | You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
                      code [toast-*]
                      |  to change icons colors.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.toast-rtl
                    .toast-container.position-static
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true'  data-bs-autohide='false')
                        .toast-header
                          i.toast-icons.toast-primary(data-feather='bell')
                          strong.me-auto Yuri Theme
                          small.txt-danger just now
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          | Hello, I'm a web-designer.
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                        .toast-header
                          i.toast-icons.toast-warning(data-feather='bell')
                          strong.me-auto Roxo Theme
                          small.text-muted 2 sec ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          | Hello, I'm a UX-designer.
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                        .toast-header
                          i.toast-icons.toast-danger(data-feather='bell')
                          strong.me-auto Zeta Theme
                          small.text-muted 6 min ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          | Hello, I'm a Software developer.
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                        .toast-header
                          i.toast-icons.toast-success(data-feather='bell')
                          strong.me-auto Voxo Theme
                          small.text-muted 3 sec ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          | Hello, I'm a professional web-designer.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#stacking-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#stacking-toast-copy 
                          |&lt;div class="card-body toast-rtl"&gt;
                          |  &lt;div class="toast-container position-static"&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-primary" data-feather="bell"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Yuri Theme&lt;/strong&gt;
                          |        &lt;small class="txt-danger"&gt;just now&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;Hello, I'm a web-designer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-warning" data-feather="bell"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Roxo Theme&lt;/strong&gt;
                          |        &lt;small class="text-muted"&gt;2 sec ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;Hello, I'm a UX-designer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-danger" data-feather="bell"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Zeta Theme&lt;/strong&gt;
                          |        &lt;small class="text-muted"&gt;6 min ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;Hello, I'm a Software developer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-success" data-feather="bell"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Voxo Theme&lt;/strong&gt;
                          |        &lt;small class="text-muted"&gt;3 sec ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt;Hello, I'm a professional web-designer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card.overflow-hidden
                  .card-header
                    h5 Translucent Toasts
                    p.f-m-light.mt-1 
                      | Use
                      code  hide 
                      | class to hide toast and 
                      code show 
                      | class to visible toast and given directions.
                      code [toast-*]
                      |  to change icons colors.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.toast-rtl.bg-dark
                    .toast-container
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-delay='80000')
                        .toast-header
                          i.toast-icons.toast-info(data-feather='disc')
                          strong.me-auto Edmin Theme
                          small.text-muted.d-sm-block 11 mins ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          |  Hello, I'm a web-designer.
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-delay='80000')
                        .toast-header
                          i.toast-icons.toast-dark(data-feather='disc')
                          strong.me-auto Koho Theme
                          small.text-muted.d-sm-block 1 sec ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          |  Hello, I'm a full-stack developer.
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-delay='80000')
                        .toast-header
                          i.toast-icons.toast-secondary(data-feather='disc')
                          strong.me-auto Fastkart Theme
                          small.txt-danger.d-sm-block just now
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          |  Hello, I'm a UX-designer.
                      .toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-delay='80000')
                        .toast-header
                          i.toast-icons.toast-success(data-feather='disc')
                          strong.me-auto Oslo Theme
                          small.text-muted.d-sm-block 44 min ago
                          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                        .toast-body.toast-dark
                          |  Hello, I'm a penetration-tester.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#stacking-toast', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#stacking-toast 
                          |&lt;div class="card-body toast-rtl bg-dark"&gt;
                          |  &lt;div class="toast-container"&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-info" data-feather="disc"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Edmin Theme&lt;/strong&gt;
                          |        &lt;small class="text-muted d-sm-block hidden"&gt;11 mins ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt; Hello, I'm a web-designer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-dark" data-feather="disc"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Koho Theme&lt;/strong&gt;
                          |        &lt;small class="text-muted d-sm-block hidden"&gt;1 sec ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt; Hello, I'm a full-stack developer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-secondary" data-feather="disc"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Fastkart Theme&lt;/strong&gt;
                          |        &lt;small class="txt-danger d-sm-block hidden"&gt;just now&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt; Hello, I'm a UX-designer.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="80000"&gt;
                          |      &lt;div class="toast-header"&gt;
                          |        &lt;i class="toast-icons toast-success" data-feather="disc"&gt;&lt;/i&gt;
                          |        &lt;strong class="me-auto"&gt;Oslo Theme&lt;/strong&gt;
                          |        &lt;small class="text-muted d-sm-block hidden"&gt;44 min ago&lt;/small&gt;
                          |        &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |      &lt;/div&gt;
                          |      &lt;div class="toast-body toast-dark"&gt; Hello, I'm a penetration-tester.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Default Toast
                    p.f-m-light.mt-1 
                      | Use
                      code  hide 
                      | class to hide toast and 
                      code show 
                      | class to visible toast.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.toast-rtl
                    .toast.default-show-toast.toast.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                      .toast-header.toast-img
                        img.rounded-full.me-2(src='../assets/images/dashboard-5/profile.png' alt='profile')
                        strong.me-auto Oliva Theme
                        small.d-sm-block.hidden 10 min ago
                        button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                      .toast-body.toast-dark
                        strong.txt-success Well done!
                        |  You successfully read this important message.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#default-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#default-toast-copy 
                          |&lt;div class="card-body toast-rtl"&gt;
                          |  &lt;div class="toast default-show-toast toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |    &lt;div class="toast-header toast-img"&gt;
                          |      &lt;img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile"&gt;
                          |      &lt;strong class="me-auto"&gt;Oliva Theme&lt;/strong&gt;&lt;small class="d-sm-block hidden"&gt;10 min ago&lt;/small&gt;
                          |      &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast-body toast-dark"&gt;
                          |      &lt;strong class="txt-success"&gt;Well done!&lt;/strong&gt; You successfully read this important message.
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Unique Toast
                    p.f-m-light.mt-1 
                      | Use 
                      code hide 
                      | class to hide toast and 
                      code show 
                      | class to visible toast.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.toast-rtl
                    .toast.fade.show(role='alert' aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                      .toast-header.toast-img
                        img.rounded-full.me-2(src='../assets/images/dashboard-5/profile.png' alt='profile')
                        strong.me-auto Poco Theme
                        button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
                      .toast-body.toast-dark
                        h6.mb-2 Your account will be permanently deleted?
                        p.mb-0 Do you intend to continue?
                        .mt-2.pt-2.border-top.flex.gap-2
                          button.btn.btn-dark.btn-sm.text-white(type='button' class="!rounded-md") I'm not sure
                          button.btn.btn-danger.btn-sm.text-white(type='button' data-bs-dismiss='toast' class="!rounded-md") Remove My Account
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#unique-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#unique-toast-copy 
                          |&lt;div class="card-body toast-rtl"&gt;
                          |  &lt;div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false"&gt;
                          |    &lt;div class="toast-header toast-img"&gt;
                          |      &lt;img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile"&gt;
                          |      &lt;strong class="me-auto"&gt;Poco Theme&lt;/strong&gt;
                          |      &lt;button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"&gt;&lt;/button&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="toast-body toast-dark"&gt;
                          |      &lt;h6 class="mb-2"&gt;Your account will be permanently deleted?&lt;/h6&gt;
                          |      &lt;p class="mb-0"&gt;Do you intend to continue?&lt;/p&gt;
                          |      &lt;div class="mt-2 pt-2 border-top flex gap-2"&gt;
                          |        &lt;button class="btn btn-dark btn-sm" type="button"&gt;I'm not sure&lt;/button&gt;
                          |        &lt;button class="btn btn-danger btn-sm" type="button" data-bs-dismiss="toast"&gt;Remove My Account&lt;/button&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Toast Placement
                    p.f-m-light.mt-1 
                      | Use 
                      code hide 
                      | class to hide toast and 
                      code show 
                      | class to visible toast and
                      code  form-select
                      |  to select any positions.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.toast-rtl.toast-dark
                    form
                      .mb-3
                        select#selectToastPlacement.form-select.mt-2
                          option(value='' selected) Select a position...
                          option(value='top-0 start-0') Top left
                          option(value='top-0 start-50 translate-middle-x') Top center
                          option(value='top-0 end-0') Top right
                          option(value='top-50 start-0 translate-middle-y') Middle left
                          option(value='top-50 start-50 translate-middle') Middle center
                          option(value='top-50 end-0 translate-middle-y') Middle right
                          option(value='bottom-0 start-0') Bottom left
                          option(value='bottom-0 start-50 translate-middle-x') Bottom center
                          option(value='bottom-0 end-0') Bottom right
                    .bg-light.relative.bd-example-toasts(aria-live='polite' aria-atomic='true' data-bs-autohide='true')
                      #toastPlacement.toast-container.p-3.position-absolute
                        .toast.toast-fade.show
                          .toast-header.toast-img
                            img.rounded-full.me-2(src='../assets/images/dashboard-5/profile.png' alt='profile')
                            strong.me-auto Zono Theme
                            small.d-sm-block.hidden 25 min ago
                          .toast-body.toast-dark.txt-dark
                            p.toast-content
                              em.txt-danger Attackers
                              |  on malicious activity may trick you into doing something dangerous like installing software or revealing your personal information's.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#placement-toast-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#placement-toast-copy 
                          |&lt;div class="card-body toast-rtl toast-dark"&gt;
                          |  &lt;form&gt;
                          |    &lt;div class="mb-3"&gt;
                          |      &lt;select class="form-select mt-2" id="selectToastPlacement"&gt;
                          |        &lt;option value="" selected&gt;Select a position...&lt;/option&gt;
                          |        &lt;option value="top-0 start-0"&gt;Top left&lt;/option&gt;
                          |        &lt;option value="top-0 start-50 translate-middle-x"&gt;Top center&lt;/option&gt;
                          |        &lt;option value="top-0 end-0"&gt;Top right&lt;/option&gt;
                          |        &lt;option value="top-50 start-0 translate-middle-y"&gt;Middle left&lt;/option&gt;
                          |        &lt;option value="top-50 start-50 translate-middle"&gt;Middle center&lt;/option&gt;
                          |        &lt;option value="top-50 end-0 translate-middle-y"&gt;Middle right&lt;/option&gt;
                          |        &lt;option value="bottom-0 start-0"&gt;Bottom left&lt;/option&gt;
                          |        &lt;option value="bottom-0 start-50 translate-middle-x"&gt;Bottom center&lt;/option&gt;
                          |        &lt;option value="bottom-0 end-0"&gt;Bottom right&lt;/option&gt;
                          |      &lt;/select&gt;
                          |    &lt;/div&gt;
                          |  &lt;/form&gt;
                          |  &lt;div class="bg-light position-relative bd-example-toasts" aria-live="polite" aria-atomic="true" data-bs-autohide="true"&gt;
                          |    &lt;div class="toast-container p-3 position-absolute" id="toastPlacement"&gt;
                          |      &lt;div class="toast toast-fade show"&gt;
                          |        &lt;div class="toast-header toast-img"&gt;
                          |          &lt;img class="rounded me-2" src="../assets/images/dashboard-5/profile.png" alt="profile"&gt;
                          |          &lt;strong class="me-auto"&gt;Zono Theme&lt;/strong&gt;
                          |          &lt;small class="d-sm-block hidden"&gt;25 min ago&lt;/small&gt;
                          |        &lt;/div&gt;
                          |        &lt;div class="toast-body toast-dark txt-dark"&gt;
                          |          &lt;p class="toast-content"&gt;
                          |            &lt;em class="txt-danger"&gt;Attackers&lt;/em&gt;on malicious activity may trick you into doing something dangerous like installing software or revealing your personal information's.
                          |          &lt;/p&gt;
                          |        &lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files      
