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.
Los avatares son una herramienta importante para indicar la identificación del usuario o el logotipo de la página web en la página web. Existen diferentes tipos de avatares de los que podemos hacer uso. Uno de ellos es la insignia del círculo . Circle Badge se utiliza para mostrar iconos o imágenes como una insignia circular. Vienen en diferentes tamaños como pequeño, mediano y grande . También se pueden mostrar dos o más insignias circulares interconectadas a través del tipo DashedConnection .
Primer CSS Avatares Clases de insignias circulares:
- CircleBadge : esta clase se utiliza para agregar el elemento respectivo para implementar esta insignia.
- CircleBadge–small: esta clase se usa para establecer el tamaño de la insignia circular en un tamaño pequeño.
- CircleBadge–medium: esta clase se utiliza para establecer el tamaño de la insignia circular en tamaño mediano.
- CircleBadge–large: esta clase se usa para establecer el tamaño de la insignia circular en un tamaño grande.
- DashedConnection: esta clase se usa para establecer conexiones entre dos o más insignias circulares.
Sintaxis:
<div class="CircleBadge ">
...
</div>
Ejemplo 1: Este ejemplo demuestra los diferentes tipos de Insignia de círculo de avatares de Primer CSS utilizando la clase CircleBadge . En la primera fila, puede ver el emoji de la computadora portátil en insignias circulares de diferentes tamaños. En la segunda fila, se muestran dos emojis conectados.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Avatars Circle Badge</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 Avatars Circle Badge</h3><br /> <h5><u>Small Medium Large Circle Badge</u></h5><br /> </div> <div class="d-flex flex-justify-center"> <div class="CircleBadge CircleBadge--small color-bg-subtle m-3"> & </div> <div class="CircleBadge CircleBadge--medium color-bg-subtle m-3"> & </div> <div class="CircleBadge CircleBadge--large color-bg-subtle m-3"> & </div> </div> <h5 class="text-center"><u> Dashed Connection Circle Badge </u></h5> <div class="DashedConnection m-3"> <ul class="d-flex list-style-none flex-justify-between"> <li class="CircleBadge CircleBadge--small color-bg-subtle"> <</li> <li class="CircleBadge CircleBadge--small color-bg-subtle"> ></li> </ul> </div> </body> </html>
Producción:
Insignia del círculo de avatares de Primer CSS
Ejemplo 2: Este ejemplo demuestra la insignia de círculo pequeño de conexión discontinua.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Avatars Circle Badge</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 Avatars Circle Badge</h3><br /> <h5><u>Dashed Connection Small Circle Badge</u></h5><br /> </div> <div class="DashedConnection m-6"> <ul class="d-flex list-style-none flex-justify-between"> <li class="CircleBadge CircleBadge--small color-bg-subtle">£</li> <li class="CircleBadge CircleBadge--small color-bg-subtle">¢</li> <li class="CircleBadge CircleBadge--small color-bg-subtle">€</li> <li class="CircleBadge CircleBadge--small color-bg-subtle">¥</li> </ul> </div> </body> </html>
Producción:
Insignia de círculo pequeño de conexión discontinua
Referencia: https://primer.style/css/components/avatars#circle-badge
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA