Alertas y mensajes de estado del sistema. Usa el bloque BEM .cl-alert del Kit Digital.
Info
<div class="cl-alert cl-alert--info" role="status">
<span class="cl-alert__icon cl-icon" data-icon="info" aria-hidden="true"></span>
<div class="cl-alert__content">
<p class="cl-alert__message">Tu sesión terminará en 30 segundos por inactividad</p>
</div>
</div>
Con título
<div class="cl-alert cl-alert--warning" role="status">
<span class="cl-alert__icon cl-icon" data-icon="warning" aria-hidden="true"></span>
<div class="cl-alert__content">
<p class="cl-alert__title">Alerta</p>
<p class="cl-alert__message">Revisa la información antes de continuar</p>
</div>
</div>
Cierre
<div class="cl-alert cl-alert--error" role="status">
<span class="cl-alert__icon cl-icon" data-icon="block" aria-hidden="true"></span>
<div class="cl-alert__content">
<p class="cl-alert__message">No pudimos guardar los cambios</p>
</div>
<button class="cl-alert__close" type="button" aria-label="Cerrar alerta">
<span class="cl-icon" data-icon="close" aria-hidden="true"></span>
</button>
</div>