aowlyne
Warningwarning
Bloc permettant de mettre en avant un message d'avertissement.
visuel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida ligula, nec sagittis nisi. Donec tincidunt lectus sed facilisis porttitor. Quisque sagittis malesuada justo et vehicula. Etiam dapibus dictum lacus at molestie. Etiam blandit fermentum dictum. Ut id ex nec dolor pulvinar posuere. Maecenas pharetra neque quam, at ornare sapien pharetra in. Ut sagittis vel orci ac hendrerit. Duis sit amet erat eget odio maximus porta vitae sit amet dui. Proin lacinia aliquam rhoncus. Vivamus nisl lacus, ultricies eget placerat blandit, molestie ut magna. Nunc ac lorem non est malesuada hendrerit. Etiam interdum magna et justo auctor porta. In dapibus ultrices augue, sed finibus leo bibendum vitae.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. Quisque sit amet justo urna. Duis vel nisl quis turpis ullamcorper maximus. Etiam porta quis lectus quis fringilla.

HTML

Code:

<ltag class="-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida ligula, nec sagittis nisi. Donec tincidunt lectus sed facilisis porttitor. Quisque sagittis malesuada justo et vehicula. Etiam dapibus dictum lacus at molestie. Etiam blandit fermentum dictum. Ut id ex nec dolor pulvinar posuere. Maecenas pharetra neque quam, at ornare sapien pharetra in. Ut sagittis vel orci ac hendrerit. Duis sit amet erat eget odio maximus porta vitae sit amet dui. Proin lacinia aliquam rhoncus. Vivamus nisl lacus, ultricies eget placerat blandit, molestie ut magna. Nunc ac lorem non est malesuada hendrerit. Etiam interdum magna et justo auctor porta. In dapibus ultrices augue, sed finibus leo bibendum vitae.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. Quisque sit amet justo urna. Duis vel nisl quis turpis ullamcorper maximus. Etiam porta quis lectus quis fringilla.</ltag>


CSS

Code:

:root {
  --font-icon: 'Material Icons';
  --primary1: #eb4d4b;
  --neutral1: #2f3640;
  --neutral2: #ffffff;
  --br-md: 8px;
}

ltag {
  position: relative;
  border-radius: var(--br-md);
  min-height: 200px;
  padding: 8px;
  font-size: 12px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  text-align: justify;
  gap: 8px;
  border-right: 8px solid;
  color: var(--neutral1);
  font-style: normal;
  background-color: var(--neutral2);
}

ltag:before {
  width: 100%;
  font-family: var(--font-icon);
  font-size: 200px;
  position:absolute;
  opacity: 0.2;
  text-align: center;
}

ltag * {
  display: contents;
}

ltag.-warning{
  border-color: var(--primary1);
}

ltag.-warning:before {
  content: '\e002';
  color: var(--primary1);
}


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.