Primer CSS es de código abierto en Github que se crea con el sistema de diseño de GitHub. Podemos usar Primer CSS instalándolo a través de npm o incluir el enlace CDN en nuestro archivo HTML. Tiene diferentes tipos de estilos como espaciado, color y tipografía.
Primer CSS Timeline se utiliza para mostrar los elementos en dirección vertical. Primer CSS TimelineItem-Avatar se usa para dar propiedad al autor del evento de la línea de tiempo. Envolveremos TimelineItem dentro de <div> para que funcione perfectamente.
En este artículo, discutiremos Primer CSS TimelineItem-Avatar.
Primer CSS Clase TimelineItem-Avatar:
- TimelineItem-avatar: esta clase se usa para agregar el avatar a la línea de tiempo.
Sintaxis:
<div class="TimelineItem">
<div class="TimelineItem-avatar">
...
</div>
...
</div>
Ejemplo 1: El siguiente ejemplo demuestra Primer CSS TimelineItem-Avatar .
HTML
<!DOCTYPE html> <html> <head> <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 TimelineItem-Avatar </h3> </div> <br> <div class="d-flex flex-justify-center"> <div class="TimelineItem"> <div class="TimelineItem-avatar"> <img class="avatar" height="35" width="35" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> </div> <div class="TimelineItem-badge"> <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" > </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks Avatar </div> </div> </div> </body> </html>
Producción:
Primer CSS TimelineItem-Avatar
Ejemplo 2: El siguiente ejemplo demuestra Primer CSS TimelineItem-Avatar .
HTML
<!DOCTYPE html> <html> <head> <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 TimelineItem-Avatar </h3> </div> <br> <div class="d-flex flex-justify-center"> <div class="d-flex flex-column"> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-avatar"> <img class="avatar" height="30" width="30" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> </div> <div class="TimelineItem-badge"> <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" > </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks Avatar 1 </div> </div> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-avatar"> <img class="avatar" height="30" width="30" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" /> </div> <div class="TimelineItem-badge"> <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" > </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks Avatar 2 </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS TimelineItem-Avatar
Referencia: https://primer.style/css/components/timeline#timelineitem-avatar
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA