aowlyne
Vivamus dolor sapien, faucibus et posuere id, imperdiet eleifend nunc. Cras massa turpis, mollis vel viverra sed, iaculis non diam. Pellentesque imperdiet tortor non fringilla scelerisque. Nullam sollicitudin imperdiet ligula vitae mollis.
HTML
CSS
Ce code utilise des tags custom, des variables CSS et nécessite l'installation de material icons, pour comprendre comment ça fonctionne, voici des liens utiles : les tags custom, les variables css et material icons.
Validationverified
Bloc permettant de mettre en avant un message de validation.visuel
HTML
Code:
<stag class="-check">Vivamus dolor sapien, faucibus et posuere id, imperdiet eleifend nunc. Cras massa turpis, mollis vel viverra sed, iaculis non diam. Pellentesque imperdiet tortor non fringilla scelerisque. Nullam sollicitudin imperdiet ligula vitae mollis.</stag>
CSS
Code:
:root {
--font-icon: 'Material Icons';
--primary1: #C4E538;
--neutral1: #2f3640;
--br: 4px;
}
stag {
border-radius: var(--br);
padding: 8px;
font-size: 12px;
line-height: 18px;
display: inline-flex;
align-items: center;
text-align: justify;
gap: 8px;
font-style: normal;
}
stag:before {
font-family: 'Material Icons';
font-size: 25px;
}
stag * {
display: contents;
}
stag.-check{
background-color: var(--primary1);
color: var(--neutral1);
}
stag.-check:before {
content: '\ef76';
}