Primer CSS Alertas Flash de ancho completo

Cartilla CSS CSS

Primer CSS Alerts son alertas o mensajes flash para informarnos sobre el estado de las acciones. El flash de ancho completo se usa para crear el mensaje de alerta de ancho completo sin el borde y el radio del borde.

Primer CSS Alertas Clase de flash de ancho completo:

flash-full: esta clase se utiliza para crear un mensaje de alerta de ancho completo.

Sintaxis:

<div class="flash flash-full">
  Content
</div>

Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Alerts Full Width Flash.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Alerts Full Width Flash </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 Alerts Full Width Flash </h3>
    </div>
    <br>
    <div class="flash flash-full"> 
        GeeksforGeeks full-width alert 
    </div>
</body>
</html>

Producción:

Primer CSS Alertas Flash de ancho completo

Ejemplo 2: Este ejemplo demuestra el uso de Primer CSS Alerts Full Width Flash with SVG icon .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Alerts Full Width Flash </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 Alerts Full Width Flash </h3>
    </div>
    <br>
    <div class="flash flash-full flash-success">
        <svg class="octicon"
             viewBox="0 0 16 16" 
             width="18" 
             height="18">
            <path fill-rule="evenodd" 
                  d="M11.5 7a4.499 4.499 0 11-8.998 
            0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 
            6 0 111.06-1.06l3.04 3.04a.75.75 0 
            11-1.06 1.06l-3.04-3.04z">
            </path>
        </svg> 
        GeeksforGeeks full-width alert 1
    </div>
    <div class="flash mt-2 flash-full flash-warn">
        <svg class="octicon" 
             viewBox="0 0 16 16" 
             width="18" 
             height="18">
            <path fill-rule="evenodd"
                  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> GeeksforGeeks full-width alert 2 
    </div>
</body>
</html>

Producción:

Primer CSS Alertas Flash de ancho completo

Referencia: https://primer.style/css/components/alerts#full-width-flash

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

HTML

HTML

Deja una respuesta Cancelar la respuesta