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.
Primer CSS Box se utiliza para mostrar el contenido en el cuadro de esquina redondeada simple. Primer CSS Boxes with Flash Alerts se utilizan para colocar las alertas flash debajo del encabezado del cuadro y encima del cuerpo del cuadro. Podemos tener diferentes colores de alertas flash y se pueden usar con iconos y botones. En este artículo, discutiremos las Cajas CSS de Primer con Alertas Flash.
Primer CSS Boxes con Flash Alerts Class:
- flash-full: esta clase se utiliza para crear la alerta flash.
Sintaxis:
<div class="Box">
<div class="flash flash-full">
...
</div>
</div>
Ejemplo 1: El siguiente código demuestra los cuadros CSS básicos con alertas de Flash.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Boxes with Flash Alerts </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Boxes with Flash Alerts </h3> </div> <br> <br> <div class="Box"> <div class="Box-header"> GFG header </div> <div class="flash flash-full"> <svg class="octicon" viewBox="0 0 14 16" width="18" height="20"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> <span> GeeksforGeeks Flash alert with Icon </span> </div> <div class="Box-body"> GFG Body </div> </div> </body> </html>
Producción:
Primer CSS Boxes con Flash Alerts.
Ejemplo 2: El siguiente código muestra las Cajas CSS de Primer con Alertas Flash con diferentes colores de alertas flash.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Boxes with Flash Alerts </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Boxes with Flash Alerts </h3> </div> <br> <br> <div class="Box"> <div class="Box-header"> GFG header </div> <div class="flash flash-full flash-warn"> <button href="#" class="Box-btn-octicon btn-octicon"> <svg class="octicon" viewBox="0 0 14 16" width="18" height="20" > <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> </button> <span> GeeksforGeeks Warning Flash alert </span> </div> <div class="flash flash-full flash-success"> <svg class="octicon" viewBox="0 0 14 16" width="18" height="20"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> <span> GeeksforGeeks Success Flash alert </span> </div> <div class="flash flash-full flash-error"> <svg class="octicon" viewBox="0 0 14 16" width="18" height="20"> <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> </path> </svg> <span> GeeksforGeeks Error Flash alert </span> </div> <div class="Box-body"> GFG Body </div> </div> </body> </html>
Producción:
Primer CSS Boxes con Flash Alerts.
Referencia: https://primer.style/css/components/box#boxes-with-flash-alerts
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA