Banners de notificación

Descripción

Los Banners de notificación de Kodeval Pages son mensajes ya armados para avisarle algo al usuario. Hay cuatro tipos: información, éxito, advertencia y error. Cada uno se ve distinto para que se entienda rápido de qué se trata. Están hechos solo con HTML y CSS, sin nada más que instalar.

Este componente cubre las cuatro situaciones más comunes en una web: avisarle al usuario algo importante (info), confirmarle que algo salió bien (success), advertirle que puede haber consecuencias antes de seguir (warning) y avisarle que algo falló y necesita hacer algo (error).

Cada banner tiene tres partes: un ícono redondo con un símbolo, un texto con título y mensaje, y un botón para cerrarlo. Al hacer clic en ese botón, el banner desaparece de la página (técnicamente, se borra del DOM, que es la estructura de la página que ve el navegador). Las cuatro variantes usan siempre esta misma estructura, para que todo se vea parejo.

Para cerrar el banner alcanza con una sola línea de código, escrita directo en el botón: onclick="this.parentElement.remove()". Esa línea borra el banner de la página apenas hacés clic, sin necesitar funciones extra ni librerías de JavaScript. Por eso es tan fácil de copiar y usar en cualquier proyecto.

Cada tipo de banner usa un color distinto que ya todo el mundo asocia con su significado: azul para información, verde para éxito, amarillo para advertencia y rojo para error. Son los mismos colores que se usan en la mayoría de las páginas web, así que el usuario los reconoce sin que se lo tengas que explicar.

El ícono de cada banner va dentro de un círculo de color que resalta sobre el fondo. Esto ayuda a que el usuario entienda de qué tipo de mensaje se trata, incluso antes de leer el texto. La propiedad flex-shrink: 0 (una propiedad CSS que evita que un elemento se achique) hace que el círculo no se aplaste en pantallas angostas.

El banner se adapta solo a cualquier tamaño de pantalla (esto se llama diseño responsive). Usa flexbox (una forma de acomodar elementos en fila o columna) con align-items: flex-start, así el ícono y el texto quedan bien alineados aunque el mensaje ocupe varias líneas. En el celular se ajusta automáticamente al ancho disponible, sin que tengas que escribir código extra.

Los colores de fondo y borde de cada banner se eligieron para que el texto se lea bien, siguiendo las reglas de accesibilidad WCAG (una guía que asegura que el contenido se pueda leer bien, incluso con problemas de visión). El texto usa colores oscuros sobre fondos claros, así que siempre es fácil de leer.

Podés usar este banner de varias formas: crearlo con JavaScript cuando tu página recibe una respuesta de un servidor (una API), escribirlo directo en el HTML si querés que el mensaje quede siempre visible, o combinarlo con animaciones CSS para que aparezca y desaparezca de forma más suave.

La propiedad margin-bottom: 0.75rem (un espacio debajo de cada banner) hace que, si mostrás varios banners juntos, no queden pegados uno con otro. Si necesitás mostrar varios mensajes a la vez, podés ponerlos dentro de un contenedor y controlar el espacio entre ellos con esa propiedad o con gap en flexbox.

Si querés que la página recuerde qué banners cerró el usuario aunque recargue la página, podés guardar esa información en localStorage (un lugar donde el navegador guarda datos). También podés cambiar remove() por una animación CSS que hace que el banner se desvanezca de a poco antes de desaparecer, para que se vea más prolijo.

Este módulo sirve para páginas de presentación, paneles de control, paneles de administración, formularios que validan datos en el servidor, páginas de pago, y en general cualquier lugar donde necesites avisarle algo al usuario de forma clara, sin ser molesto.

Para usarlo, copiá el bloque HTML de más abajo y pegalo en tu archivo .html donde quieras mostrar el banner. Copiá el bloque CSS y pegalo en tu archivo .css (o dentro de una etiqueta <style>) para que se vea bien.

<!-- Info -->
<div class="banner banner-info">
  <span class="banner-icon">ℹ</span>
  <div class="banner-body">
    <strong>Información</strong>
    <p>Este es un mensaje informativo. El usuario puede leerlo y continuar.</p>
  </div>
  <button class="banner-close" onclick="this.parentElement.remove()">✕</button>
</div>

<!-- Éxito -->
<div class="banner banner-success">
  <span class="banner-icon">✓</span>
  <div class="banner-body">
    <strong>¡Listo!</strong>
    <p>La acción se completó correctamente.</p>
  </div>
  <button class="banner-close" onclick="this.parentElement.remove()">✕</button>
</div>

<!-- Advertencia -->
<div class="banner banner-warning">
  <span class="banner-icon">⚠</span>
  <div class="banner-body">
    <strong>Atención</strong>
    <p>Esto puede tener consecuencias. Revisá antes de continuar.</p>
  </div>
  <button class="banner-close" onclick="this.parentElement.remove()">✕</button>
</div>

<!-- Error -->
<div class="banner banner-error">
  <span class="banner-icon">✕</span>
  <div class="banner-body">
    <strong>Error</strong>
    <p>Algo salió mal. Intentá de nuevo o contactá soporte.</p>
  </div>
  <button class="banner-close" onclick="this.parentElement.remove()">✕</button>
</div>

/*
|--------------------------------------------------------------------------
| Banners de Notificación — Kodeval Pages
|--------------------------------------------------------------------------
| Cuatro variantes: info (azul), éxito (verde), advertencia (amarillo),
| error (rojo). El botón ✕ cierra el banner sin JavaScript adicional.
|--------------------------------------------------------------------------
*/

/* =====================
   BASE
   Todos los banners comparten esta estructura.
   ===================== */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid transparent;
  margin-bottom: 0.75rem;
}

/* =====================
   ÍCONO
   El círculo de color con el símbolo.
   ===================== */
.banner-icon {
  font-size: 0.9rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =====================
   CUERPO DEL BANNER
   flex:1 hace que ocupe el espacio disponible.
   ===================== */
.banner-body {
  flex: 1;
}

.banner-body strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.banner-body p {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* =====================
   BOTÓN DE CIERRE
   onclick="this.parentElement.remove()" elimina el banner
   del DOM cuando el usuario hace clic.
   ===================== */
.banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem;
  border-radius: 6px;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity 0.15s;
  margin-top: 2px;
}

.banner-close:hover { opacity: 0.6; }

/* =====================
   VARIANTE INFO
   ===================== */
.banner-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a5f;
}

.banner-info .banner-icon {
  background: #bfdbfe;
  color: #1d4ed8;
}

/* =====================
   VARIANTE ÉXITO
   ===================== */
.banner-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #14532d;
}

.banner-success .banner-icon {
  background: #bbf7d0;
  color: #15803d;
}

/* =====================
   VARIANTE ADVERTENCIA
   ===================== */
.banner-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}

.banner-warning .banner-icon {
  background: #fde68a;
  color: #b45309;
}

/* =====================
   VARIANTE ERROR
   ===================== */
.banner-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

.banner-error .banner-icon {
  background: #fecaca;
  color: #dc2626;
}