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 Blankslate Octicons se usa para mostrar el estado en blanco usando los octicons. Para crear el octicon de pizarra en blanco, usaremos la clase icono de pizarra en blanco . En este artículo, discutiremos Primer CSS Blankslate Octicons.
Primer CSS Blankslate Octicons Clase:
- icono de pizarra en blanco: esta clase se utiliza para crear el icono de pizarra en blanco.
Sintaxis:
<div class="blankslate">
SVG ICON
<h3 class="blankslate-heading">
...
</h3>
...
</div>
Ejemplo 1: El siguiente ejemplo demuestra los Octicons de pizarra en blanco de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Blankslate Octicons </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Blankslate Octicons </h3> <br> <div class="blankslate"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="30" height="30" > <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"> </path> </svg> <h3 class="blankslate-heading"> No content </h3> </div> </div> </body> </html>
Producción:
Cartilla CSS Blankslate Octicons
Ejemplo 2: El siguiente ejemplo demuestra los Octicons de pizarra en blanco de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Blankslate Octicons </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Blankslate Octicons </h3> <br> <div class="blankslate"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="30" height="30" > <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"> </path> </svg> <h3 class="blankslate-heading"> No content </h3> <p> This is blank page </p> <div class="blankslate-action"> <button class="btn btn-primary" type="button"> Open GeeksforGeeks </button> </div> </div> </div> </body> </html>
Producción:
Cartilla CSS Blankslate Octicons
Referencia: https://primer.style/css/components/blankslate#with-ocicons
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA