Incluir una alerta
Llamá la atención de los usuarios sobre una información en particular dentro de cualquier contenido.
En esta página
Qué es la alerta
La alerta es un componente que te permite orientar la atención del usuario sobre una información en particular dentro de cualquier contenido (área, página, página de libro, noticia).
Usado con cuidado y con los colores correctos (que te explicamos más abajo), es un recurso útil para jerarquizar datos y lograr que el usuario los lea y los recuerde.
Precisamente porque jerarquiza, la información que quede por debajo va a tener menor valor para el usuario, y, si lo ubicás entre dos párrafos, podés interrumpir el flujo de lectura.
Esta alerta, por ejemplo, está ubicada en medio del cuerpo de texto, en amarillo y con ícono porque queremos advertirte sobre buenos y malos usos antes de explicarte cómo poner una alerta en tu contenido.
Uso semántico de los colores
En el caso de las alertas y los botones, debemos aplicarles un color específico de acuerdo con el tipo de información que brindamos o el uso que hacemos del componente.
Por ejemplo, no usamos una alerta color azul acero, sino que notificamos información importante; no coloreamos de rojo, sino que brindamos información sobre un asunto grave.
Información destacada o notificación: info
Usá info (azul acero) para llamar la atención o notificar sobre una nueva información que no es urgente ni de gravedad.
Tina, en tu Whatsapp
La asistente virtual del Estado nacional está siempre disponible para vos en el número 11 39101010.
Información de advertencia: warning
Usa warning (amarillo) para advertir sobre un inconveniente o problema que no es de gravedad o un asunto que el usuario no debe olvidar.
No te olvides
Tenés plazo para presentar la documentación hasta el 30 de abril.
Información positiva: success
Usá success (verde) para llamar la atención sobre una información positiva.
Sube llegó a San Miguel de Tucumán
Usala para viajar en las casi 370 líneas de colectivos de la ciudad.
Información de gravedad o emergencia: danger
Usá danger (rojo) para informar un inconveniente o problema de gravedad o un asunto muy urgente.
Atención
La estación de tren está cerrada por obras hasta fines de abril.
Código markdown y configuración
Para poner una alerta en tu contenido, copiá el siguiente código, editalo y pegalo.
[[alerta-{Texto del título (no obligatorio)}-{Un párrafo de texto (obligatorio). Puede tener negrita, cursiva e hipervínculos.}-{nombre del ícono (no obligatorio)}-{nombre semántico del color (obligatorio)}]]
El nombre del ícono lo encontrás en el GitHub de Poncho.
Por ejemplo, la siguiente alerta
A no olvidar
Falta una semana para el vencimiento de la prórroga.
se escribe así
[[alerta-{A no olvidar}-{Falta **una semana** para el vencimiento de la prórroga.}-{icono-arg-cola-de-espera}-{warning}]]
en tanto que esta
Falta una semana para el vencimiento de la prórroga.
lleva el siguiente código.
[[alerta-{}-{Falta **una semana** para el vencimiento de la prórroga.}-{}-{warning}]]