formulaires · validation
Encadré de confirmation à afficher après l'envoi réussi d'un formulaire.
<style>
.bn-validation {
display: flex;
align-items: flex-start;
gap: 1rem;
max-width: 420px;
padding: 1.5rem;
font-family: 'Inter', sans-serif;
background: rgba(63, 185, 80, 0.06);
border: 1px solid rgba(63, 185, 80, 0.35);
border-radius: 8px;
}
.bn-validation__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #3FB950;
display: flex;
align-items: center;
justify-content: center;
color: #3FB950;
font-size: 0.85rem;
}
.bn-validation__title {
margin: 0 0 0.3rem;
color: #E6E4DD;
font-size: 0.9rem;
font-weight: 600;
}
.bn-validation__text {
margin: 0;
color: #979793;
font-size: 0.82rem;
}
</style>
<div class="bn-validation">
<span class="bn-validation__icon">✓</span>
<div>
<p class="bn-validation__title">Votre message a bien été envoyé.</p>
<p class="bn-validation__text">Merci, je vous répondrai dans les plus brefs délais.</p>
</div>
</div>