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 Box Headers with Counters se usa para crear el encabezado del cuadro con el contador usando la clase Counter . Usaremos Counter–gray para hacer que el color de fondo sea gris y el color del texto oscuro. En este artículo, discutiremos los encabezados de cuadro CSS básicos con contadores.
Primeros encabezados de cuadro CSS con clases de contadores:
- Box-header: esta clase se utiliza para crear el encabezado del cuadro.
- Box-title: esta clase se utiliza para crear el título del encabezado.
- Contador: esta clase se utiliza para crear el contador con el encabezado.
- Counter–gray: esta clase se usa para cambiar el color de fondo del mostrador a gris y el color del texto a oscuro.
Sintaxis:
<div class="Box">
<div class="Box-header">
<h3 class="Box-title">
...
<span class="Counter Counter--gray">
...
</span>
</h3>
</div>
</div>
Ejemplo 1: el siguiente código demuestra los encabezados de cuadro CSS de Primer con contadores.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Headers with Counters </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 Box Headers with Counters </h3> </div> <br> <br> <div class="Box"> <div class="Box-header"> <h3 class="Box-title"> GeeksforGeeks <span class="Counter Counter--gray">5</span> </h3> </div> </div> </body> </html>
Producción:
Primeros encabezados de cuadro CSS con contadores
Ejemplo 2: el siguiente código demuestra los encabezados de cuadro CSS de Primer con contadores.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box Headers with Counters </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 Box Headers with Counters </h3> </div> <br> <br> <div class="Box"> <div class="Box-header Box-row--yellow"> <h3 class="Box-title"> GeeksforGeeks <span class="Counter Counter--gray">42</span> </h3> </div> <div class="Box-body"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> </div> </body> </html>
Producción:
Primeros encabezados de cuadro CSS con contadores
Referencia: https://primer.style/css/components/box#box-headers-with-counters
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