---
tags: components
title: Notifications
description: "Notification components for toast messages and temporary status updates."
---

%p.mb-heading.prose remove the classes <code>position-relative z-0 top-0</code> in production

.notification-container.position-relative.top-0.z-0
  %a.notification{href:""}
    .notification-title Linked Info Notification
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
    %button.btn.btn-close
      %span.icon.icon-cross
  %a.notification{href:""}
    .notification-badge
      .icon.icon-bug-fix-confirmation-lg
    .notification-title Notification with icon
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
    %button.btn.btn-close
      %span.icon.icon-cross
  %a.notification.success{href:""}
    .notification-title Linked Success Alert
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
    %button.btn.btn-close
      %span.icon.icon-cross
  %a.notification.warning{href:""}
    .notification-title Linked Warning Notification
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
    %button.btn.btn-close
      %span.icon.icon-cross
  %a.notification.error{href:""}
    .notification-title Linked Error Notification
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
    %button.btn.btn-close
      %span.icon.icon-cross
  %a.notification.badges{href:""}
    .notification-badge
      %img{src:"/assets/images/tester-badges/testIO-testerbadge-cybersecurity.svg"}
    .notification-title New badge received
    .notification-content Cyber Security course passed!
    %button.btn.btn-close
      %span.icon.icon-cross
  .notification
    .notification-title Info Notification with dedidacted button
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
      %a.btn.btn-sm.btn-inverted{href:""} Go to page button
    %button.btn.btn-close
      %span.icon.icon-cross
  .notification
    .notification-badge
      .icon.icon-devices-lg
    .notification-title Info Notification with icon and button
    .notification-content
      .notification-message You have 60 min left to finish this task. Be sure to pick it up and finish it soon.
      %a.btn.btn-sm.btn-inverted{href:""} Update devices
    %button.btn.btn-close
      %span.icon.icon-cross