aowlyne
Informationinfo
Bloc permettant de mettre en avant un message d'information.
visuel
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

Code:

<stag class="-info">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: #2c2c54;
  --neutral1: #FFFFFF;
  --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.-info {
  background-color: var(--primary1);
  color: var(--neutral1);
}

stag.-info:before {
  content: '\e88e';
}


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.