MK LIBRARY

CREAR COMPONENTES

Botones Formularios Tarjetas Alertas Barras de Navegacion Badges Containers

CLASES UTILITARIAS

Modificar tamaño,grosor Crear Sombras Crear Margenes,padding Mover elementos Redondear elementos Ocultar Elementos Colores de fondo
Alertas Proporciona mensajes de retroalimentación contextuales para las acciones típicas de los usuarios con mensajes de alerta disponibles y flexibles. Ejemplos Las alertas están disponibles en diferentes colores y estilos y para hacer uso de ellas tienes que poner las clases contextuales obligatorias (por ejemplo .alerta-peligro).
Alerta de información
Alerta de peligro
Alerta de advertencia
Alerta de completado
<div class="alerta alerta-informacion">
    Alerta de información
</div>
<div class="alerta alerta-peligro">
  Alerta de peligro
</div>
<div class="alerta alerta-advertencia">
  Alerta de advertencia
</div>
<div class="alerta alerta-completado">
  Alerta de completado
</div>
Alertas con links Utiliza la clase .alerta-link para para que los enlaces obtengan el color referente igual a cualquier alerta.
Alerta de informacion para mas informacion visite aqui
Alerta de peligro para mas informacion visite aqui
Alerta de advertencia para mas informacion visite aqui
Alerta de completado para mas informacion visite aqui
<div class="alerta alerta-informacion">
    Alerta de información para mas <a href="#" class="alerta-link">informacion visite aqui </a>
</div>
<div class="alerta alerta-peligro">
    Alerta de peligro para mas <a href="#" class="alerta-link">informacion visite aqui </a>
</div>
<div class="alerta alerta-advertencia">
    Alerta de advertencia para mas <a href="#" class="alerta-link">informacion visite aqui </a>
</div>
<div class="alerta alerta-completado">
    Alerta de completado para mas <a href="#" class="alerta-link">informacion visite aqui </a>
</div>
Iconos Puedes utilizar iconos en tus alertas, si tienes una imagen en formato sgv puedes personalizar el icono, pero ahora te dejamos unas alertas con unos iconos.
Esta es una alerta de informacion
Es una advertencia de peligro!
Es una advertencia!
Se a completado satisfactoriamente
<div class="alerta alerta-informacion">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
       <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
   </svg>
Esta es una alerta de informacion
</div>
<div class="alerta alerta-peligro">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
       <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
   </svg>
Esta es una alerta de peligro
</div>
<div class="alerta alerta-advertencia">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
       <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
   </svg>
Es una advertencia!
</div>
<div class="alerta alerta-completado">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
       <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
   </svg>
Se a completado satisfactoriamente
</div>
Alerta con informacion adicional Las alertas también pueden contener elementos HTML adicionales como encabezados y párrafos.

Bien hecho!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et a ex assumenda. Suscipit tenetur soluta, animi reiciendis nobis fuga dolore illo perspiciatis ex, dolores similique, libero impedit commodi eum labore?

<div class="alerta alerta-Completado">
    <h1> Bien Hecho! </h1>
    <p class="ttxt-Arial"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et a ex assumenda. Suscipit tenetur soluta, animi reiciendis nobis
    fuga dolore illo perspiciatis ex, dolores similique, libero impedit commodi eum labore? </p>
</div>