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 Timeline se utiliza para mostrar los elementos en dirección vertical. Primer CSS Timeline Target TimelineItem se utiliza para crear la línea de tiempo con enlaces de elementos para la navegación. En este artículo, discutiremos Primer CSS Timeline Target TimelineItem.
Primer CSS Timeline Target TimelineItem Classes:
- Link–primary: esta clase se utiliza para crear el enlace primario.
- Enlace–secundario: esta clase se utiliza para crear el enlace secundario.
Sintaxis:
<div class="TimelineItem" id="1">
<div class="TimelineItem-body">
<a href="#" class="Target-TimelineItem-Class">
...
</a>
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el elemento TimelineItem de destino de la línea de tiempo de Primer CSS usando la clase Link–primary .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Timeline Target TimelineItem </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 Timeline Target TimelineItem </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <div class="d-flex flex-column"> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true"> <path fill-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"> <a href="#" class="text-bold Link--primary"> GeeksforGeeks </a> website </div> </div> </div> </div> </body> </html>
Producción:
Cartilla CSS Línea de tiempo Objetivo TimelineItem
Ejemplo 2: El siguiente ejemplo demuestra el elemento TimelineItem de destino de la línea de tiempo de Primer CSS mediante el uso de la clase secundaria de enlace .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Timeline Target TimelineItem </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 Timeline Target TimelineItem </h3> </div> <br> <br> <div class="d-flex flex-justify-center"> <div class="d-flex flex-column"> <div class="TimelineItem"> <div class="TimelineItem-badge color-bg-success-emphasis color-fg-on-emphasis" > <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true"> <path fill-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"> <a href="#" class="text-bold Link--secondary color-fg-danger" > GeeksforGeeks </a> website </div> </div> <div class="TimelineItem"> <div class="TimelineItem-badge color-bg-success-emphasis color-fg-on-emphasis" > <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true"> <path fill-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"> <a href="#" class="Link--secondary color-bg-sponsors color-fg-done"> A Computer Science </a> portal for geeks </div> </div> </div> </div> </body> </html>
Producción:
Cartilla CSS Línea de tiempo Objetivo TimelineItem
Referencia: https://primer.style/css/components/timeline#target-timelineitem
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA