Notifications

Las notificaciones son mensajes que comunican información al usuario. Recomendamos que el cuerpo de la notificación abarque como mucho dos líneas de texto, sea descriptivo e incluya cualquier acción de solución de problemas o próximos pasos. Puede incluir enlaces dentro del cuerpo de notificación que redirigen al usuario a los siguientes pasos.

Variaciones y tipos

Tenemos dos opciones: Título + descripción o descripción. La opción por defecto será solo descripción.

Demo en vivo

<div class="rds-notification rds-notification--attention rds-notification--with-animation rds-mb-c03" role="alert">
  <span class="rds-icon-Danger rds-notification__icon" aria-hidden="true"></span>
  <p class="rds-notification__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi eros, auctor id mollis.
  </p>
</div>
<div class="rds-notification rds-notification--notification rds-notification--with-animation rds-mb-c03" role="alert">
  <span class="rds-icon-Chat rds-notification__icon" aria-hidden="true"></span>
  <p class="rds-notification__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi eros, auctor id mollis.
  </p>
</div>
<div class="rds-notification rds-notification--confirmation rds-notification--with-animation rds-mb-c03" role="alert">
  <span class="rds-icon-Check_02 rds-notification__icon" aria-hidden="true"></span>
  <p class="rds-notification__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi eros, auctor id mollis.
  </p>
</div>
<div class="rds-notification rds-notification--error rds-notification--with-animation rds-mb-c03" role="alert">
  <span class="rds-icon-Close rds-notification__icon" aria-hidden="true"></span>
  <p class="rds-notification__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi eros, auctor id mollis.
  </p>
</div>

Comportamiento

  • Las notificaciones se descartan automáticamente a los 5 segundos de su entrada y se posicionan de forma fija en la parte superior de la pantalla.

  • Si hay más de una notificación se agruparán verticalmente con un espaciado de 8 px y hasta un máximo de 4 notificaciones simultáneamente. Las notificaciones nuevas aparecerán en la parte superior.