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 Flash Banner. Primer CSS Alerts Flash Banner se utiliza para mostrar un mensaje que se encuentra en una posición fija en la parte superior de la página.
Sintaxis:
<div class="flash flash-banner">
<!--Flash banner message.-->
</div>
Ejemplo 1: En este ejemplo, simplemente colocaremos un banner flash. Notará que el banner flash se coloca en la parte superior utilizando las clases flash y flash-banner .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="flash flash-banner"> Flash banner message. </div> <div style="margin-top:5%"> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Alert Flash Banner</h3> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aplicaremos un botón para obtener un banner flash.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="flash flash-banner"
style="display:none;" id="GFG">
Flash banner message.
</div>
<div style="margin-top:5%;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3> Alert Flash Banner</h3>
<button onclick="getAlert()">
Click me
</button>
</br></br>
</div>
<script>
function getAlert() {
document.getElementById("GFG")
.style.display = 'block';
}
</script>
</body>
</html>
Producción:
Referencia: https://primer.style/css/components/alerts#flash-banner
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA