Primer CSS Ejemplo básico de pizarra en blanco

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. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

Las pizarras en blanco se utilizan para actuar como marcador de posición para algún contenido que aún no se ha cargado. Le da una razón al usuario de por qué esa área específica no está cargando el contenido. Hay diferentes tipos de pizarras en blanco disponibles en Primer CSS.

Sintaxis:

<div class="blankslate">
      ...
</div>

Nota: agregue la clase Blankslate para implementar este componente.

Ejemplo 1 : este ejemplo demuestra el ejemplo básico de la pizarra en blanco de Primer CSS utilizando la clase de pizarra en blanco .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Blankslate basic example</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
          
        <h5>Primer CSS Blankslate basic example</h5><br />
  
        <div class="blankslate">
            <h3 class="blankslate-heading">
                No records available ‼
            </h3>
            <p>
                Please contact the administrator to 
                get further information on the issue.
            </p>
        </div>
    </div>
</body>
  
</html>

Salida :

Pizarra en blanco básica

Ejemplo 2: el siguiente código muestra las clases blankslate y blankstate-heading .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Primer CSS Blankslate basic example
    </title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
          
        <h5>Primer CSS Blankslate basic example</h5><br />
  
        <div class="blankslate">
            <h3 class="blankslate-heading">
                404 Error !! <br /> Page Not Found
            </h3>
              
            <p>
                Sorry, the page you are looking for 
                does not exist.<br />If you think 
                something is broken , please report.
            </p>
        </div>
    </div>
</body>
  
</html>

Producción:

Pizarra en blanco básica

Referencia: https://primer.style/css/components/blankslate#basic-example

Publicación traducida automáticamente

Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta