Banners

Aviso contextual: .cl-banner más un modificador de tono. Contiene un ícono .cl-banner-icon, cuerpo .cl-banner-body (.cl-banner-title + .cl-banner-text) y acciones opcionales .cl-banner-actions. Tonos disponibles: --info, --positive, --warning, --negative.

Info

Avisos informativos o de contexto (períodos, plazos). Puede llevar acciones, incluida una para cerrar.

Período abierto hasta el 30 de noviembre
Las modificaciones después del cierre requieren ajuste manual.
<div class="cl-banner cl-banner--info">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-banner-icon"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg>
  <div class="cl-banner-body">
    <div class="cl-banner-title">Período abierto hasta el 30 de noviembre</div>
    <div class="cl-banner-text">Las modificaciones después del cierre requieren ajuste manual.</div>
  </div>
  <div class="cl-banner-actions">
    <button class="cl-btn cl-btn--secondary cl-btn--sm">Ver período</button>
    <button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Cerrar"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
</div>

Positivo

Confirma que algo se completó correctamente. No siempre necesita acciones.

Proceso de octubre aprobado y enviado
147 registros · ₡42,873,540 procesados · ref. REF-2024-1031
<div class="cl-banner cl-banner--positive">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-banner-icon"><circle cx="12" cy="12" r="9"/><polyline points="9 12 11 14 15 10"/></svg>
  <div class="cl-banner-body">
    <div class="cl-banner-title">Proceso de octubre aprobado y enviado</div>
    <div class="cl-banner-text">147 registros · ₡42,873,540 procesados · ref. REF-2024-1031</div>
  </div>
</div>

Advertencia

Algo requiere atención pero no bloquea el flujo.

3 registros con datos incompletos
Se aplicará el método de respaldo configurado.
<div class="cl-banner cl-banner--warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-banner-icon"><path d="M10.3 3.5 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3l-8.5-14.5a2 2 0 0 0-3.4 0Z"/><path d="M12 9v5M12 17h.01"/></svg>
  <div class="cl-banner-body">
    <div class="cl-banner-title">3 registros con datos incompletos</div>
    <div class="cl-banner-text">Se aplicará el método de respaldo configurado.</div>
  </div>
  <div class="cl-banner-actions">
    <button class="cl-btn cl-btn--secondary cl-btn--sm">Revisar</button>
  </div>
</div>

Negativo

Errores o fallas de proceso.

Error al procesar 1 registro
Código 3-0245-0712 · datos incompletos en el perfil.
<div class="cl-banner cl-banner--negative">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-banner-icon"><circle cx="12" cy="12" r="9"/><path d="M15 9 9 15M9 9l6 6"/></svg>
  <div class="cl-banner-body">
    <div class="cl-banner-title">Error al procesar 1 registro</div>
    <div class="cl-banner-text">Código 3-0245-0712 · datos incompletos en el perfil.</div>
  </div>
</div>