Alertas

Impulsa la interactividad en tu plataforma con las nuevas Alertas de Quickly. Notifica eventos importantes, éxitos y advertencias a tus usuarios de manera clara y efectiva.

Alerta de Información

Información: Descubre nuestras Alertas de Información para comunicar datos importantes y detalles relevantes de manera clara y concisa. Diseñadas para proporcionar orientación y contexto, estas alertas mejoran la comprensión y la experiencia del usuario.

.alert-info

Información
¡Debes cambiar el texto!
Información ¡Debes cambiar el texto!
HTML 
                                    
    <!-- Información opción 1 -->
    <div class="alert-info text-ac">
        <div class="alert-title border-b">
            <svg class="ico-32 ico-info pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>                                                
            <strong class="pr-1">Información</strong><br>
        </div>
        <div class="alert-body">
            ¡Debes cambiar el texto!
        </div>
    </div>

    <!-- Información opción 2 -->
    <div class="alert-info text-al">
        <svg class="ico-32 ico-info pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>                                                
        <strong class="alert-title pr-1">Información</strong>
        <span class="alert-body">¡Debes cambiar el texto!</span>                                                                           
    </div>

Alerta de Éxito

¡Éxito alcanzado! Utiliza nuestras Alertas de Éxito: flexibles, simples de integrar y ideales para celebrar logros de manera impresionante.

.alert-success

Éxito
¡Debes cambiar el texto!
Éxito ¡Debes cambiar el texto!
HTML 
                                    
    <!-- Éxito opción 1 -->
    <div class="alert-success text-al">
        <div class="alert-title border-b">
            <svg class="ico-32 ico-success pr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>
            <strong class="pr-1">Éxito</strong><br>
        </div>
        <div class="alert-body">
            ¡Debes cambiar el texto!
        </div>
    </div>     
        
    <!-- Éxito opción 2 -->    
    <div class="alert-success text-al">
        <svg class="ico-32 ico-success pr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>
        <strong class="alert-title pr-1">Éxito</strong>
        <span class="alert-body">¡Debes cambiar el texto!</span>                                                                           
    </div>

Alerta de Atención

Atención: Utiliza nuestras Alertas de Advertencia para notificar eventos importantes y situaciones críticas de manera clara y efectiva. Configúralas automáticamente o según tus necesidades específicas para mantener informados a tus usuarios de forma óptima.

.alert-warning

Atención
¡Debes cambiar el texto!
Atención ¡Debes cambiar el texto!
HTML 
                                    
    <!-- Atención opción 1 -->
    <div class="alert-warning text-ac">
        <div class="alert-title border-b">
            <svg class="ico-32 ico-warning pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg> 
            <strong class="pr-1">Atención</strong><br>
        </div>
        <div class="alert-body">
            ¡Debes cambiar el texto!
        </div>
    </div>
    
    <!-- Atención opción 2 -->
    <div class="alert-warning text-al">
        <svg class="ico-32 ico-warning pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg> 
        <strong class="alert-title pr-1">Atención</strong>
        <span class="alert-body">¡Debes cambiar el texto!</span>                                                                           
    </div>

Alerta de Peligro

Peligro: Emplea nuestras Alertas de Peligro para destacar situaciones críticas y emergencias con claridad y urgencia. Diseñadas para captar la atención inmediata, estas alertas garantizan una respuesta rápida y efectiva.

.alert-danger

Peligro
¡Debes cambiar el texto!
Peligro ¡Debes cambiar el texto!
HTML 
                                    
    <!-- Warning opción 1 -->
    <div class="alert-danger text-ac">
        <div class="alert-title border-b">
            <svg class="ico-32 ico-danger pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg> 
            <strong class="pr-1">Peligro</strong><br>
        </div>
        <div class="alert-body">
            ¡Debes cambiar el texto!
        </div>
    </div>
    
    <!-- Warning opción 2 -->
    <div class="alert-danger text-al">
        <svg class="ico-32 ico-danger pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg> 
        <strong class="alert-title pr-1">Peligro</strong>
        <span class="alert-body">¡Debes cambiar el texto!</span>                                                                           
    </div>