Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre Primer CSS Alerts Color. Primer CSS Alerts Color se utiliza para agregar colores a las alertas como azul, rojo, verde y amarillo.
Clases:
- flash: esta es la clase predeterminada, proporciona color azul a la alerta.
- flash-warn: Esta clase proporciona color amarillo a la alerta.
- flash-error: esta clase proporciona color rojo a la alerta.
- flash-success: esta clase proporciona un color de éxito a la alerta.
Sintaxis:
<div class="flash flash-*">
Flash message goes here.
</div>
Nota: * representa una clase que se utiliza para proporcionar color. Discutiremos estas clases a continuación.
Ejemplo 1: En este ejemplo, mostraremos Alertas usando las clases flash y flash-warn
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Alert With Colors</h3> </div> <div class="flash "> Hi Geek !! I am Blue color Alert </div> <div class="flash flash-warn"> Hi Geek !! I am yellow color Alert </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos sobre las clases flash-error y flash-success para mostrar alertas de color rojo y verde respectivamente
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Primer CSS Alerts Color </h3> </div> <div class="flash flash-success"> Hi Geek !! I am Green color Alert </div> <div class="flash flash-error"> Hi Geek !! I am Red color Alert </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/alerts#colors
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA