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 Icons se usa para agregar íconos con el contenido en el cuadro. Usamos las clases Box-btn-occon y btn-occon para tener el mismo relleno que otros elementos de caja. En este artículo, discutiremos las Cajas CSS de Primer con Iconos.
Primer CSS Cajas con Iconos Clases:
- Box-btn-occon: Esta clase se utiliza para crear el botón de icono.
- octicon: Esta clase se utiliza para crear el octicon.
Sintaxis:
<div class="Box">
<div class="Box-body">
<span class="pr-2"> ... </span>
<button href="#" class="Box-btn-octicon
btn-octicon">
...
</button>
</div>
</div>
Ejemplo 1: El siguiente código demuestra los cuadros CSS básicos con iconos.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Boxes with Icons </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 Icons </h3> </div> <br> <br> <div class="Box"> <div class="Box-header"> <span class="Box-title"> GeeksforGeeks </span> <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> </div> </div> </body> </html>
Producción:
Primer CSS Cajas con Iconos
Ejemplo 2: El siguiente código demuestra las Cajas CSS de Primer con Iconos.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Boxes with Icons </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 Icons </h3> </div> <br> <br> <div class="Box"> <div class="Box-header"> <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 class="Box-title"> GeeksforGeeks </span> </div> <div class="Box-body"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > <button href="#" class="Box-btn-octicon btn-octicon float-right"> <svg class="octicon octicon-x" viewBox="0 0 12 16" width="12" height="16" aria-hidden="true"> <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" > </path> </svg> </button> </div> </div> </body> </html>
Producción:
Primer CSS Cajas con Iconos
Referencia: https://primer.style/css/components/box#boxes-with-icons
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