Notice (Aviso)
Aviso contextual para comunicar mensajes de error, información o advertencia al usuario.
1. Error
Titulo mensaje
Horem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
Mostrar HTML
<div class="gn-notice gn-notice--error" role="alert">
<p class="gn-notice__title">Titulo mensaje</p>
<p class="gn-notice__body">Horem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.</p>
<div class="gn-notice__content">
<a href="#" class="gn-notice__link">Horem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
</div>2. Info
Titulo mensaje
Horem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mostrar HTML
<div class="gn-notice gn-notice--info" role="note">
<p class="gn-notice__title">Titulo mensaje</p>
<p class="gn-notice__body">Horem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="gn-notice__content">
<a href="#" class="gn-notice__link">
Accesibilidad
<span class="gn-notice__link-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none" focusable="false">
<path d="M4.14258 16.357V4.10699H10.2676V5.41949H5.45508V15.0445H15.0801V10.232H16.3926V16.357H4.14258ZM8.57227 12.857L7.64258 11.9273L14.1504 5.41949H12.0176V4.10699H16.3926V8.48199H15.0801V6.34918L8.57227 12.857Z" fill="currentColor"/>
</svg>
</span>
</a>
</div>
</div>3. Warning
Titulo mensaje
Horem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
Mostrar HTML
<div class="gn-notice gn-notice--warning" role="alert">
<p class="gn-notice__title">Titulo mensaje</p>
<p class="gn-notice__body">Horem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.</p>
<div class="gn-notice__content">
<a href="#" class="gn-notice__link">Horem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
</div>Notice (Aviso)
El componente Notice comunica mensajes contextuales al usuario: errores del sistema, información relevante o advertencias. Se presenta como un bloque con borde de color, fondo tintado y estructura fija de título + cuerpo + contenido opcional.
Cuándo usarlo
- Para notificar errores de validación o del sistema que requieren acción inmediata (Error).
- Para mostrar información complementaria o aclaraciones contextuales (Info).
- Para alertar sobre situaciones que requieren atención sin ser críticas (Warning).
Variantes
| Clase | Uso | |---|---| | gn-notice--error | Error del sistema o validación crítica | | gn-notice--info | Información contextual o aclaraciones | | gn-notice--warning | Advertencia no bloqueante |
Estructura
El bloque .gn-notice__content es opcional y puede contener uno o varios .gn-notice__link. El enlace de la variante Info admite además un icono externo con .gn-notice__link-icon.
Accesibilidad
role="alert"(Error, Warning): el navegador anuncia el contenido en cuanto se inserta en el DOM. Usar cuando el aviso se inyecta dinámicamente y requiere atención inmediata.role="note"(Info): para avisos informativos estáticos que no requieren interrupción.- Si el aviso es estático y ya forma parte del HTML inicial, puede omitirse el
roleo usarserole="note".